【プログラミング独学4日目】特定要素へのスタイル指定・行間の調整・font-colorは間違い

2022-03-26FREELANCE,WORDPRESS/WEB

こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。

なお私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。

【プログラミング独学1日目】HTML・imgタグ・alt属性・metaタグ・rel属性・href属性・

独学でサイト制作は行なってきましたが、改めてHTMLからプログラミングをしっかり学び直すことにしまし ...

 https://chanmk.tokyo/programming_1/

そして今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。

【プログラミング独学4日目】学んだこと

今日もCSSの続きをやり、「はじめてのCSS」は全授業を終了しました。次の段階としては「もっと詳しくHTML」ですが有料登録が必要だったので登録しました。以前Progateで学習していたときは有料登録する気にならなかったのですが、ドットインストールはわかりやすいからか迷わず有料登録しました。しかも月たったの1000円ちょっとです。やっぱり動画で画面共有しているような形で学べるのがわかりやすくてありがたいですね。

ここ数日で夜更かしして学習するのは合っていないとわかったので、昨夜は早めに切り上げて寝ました。それが良かったのか、今日は朝1時間プログラミング学習をしてから仕事ができました。ただ日中は育児と外出でできず、夜も寝かしつけに苦労しほとんどできませんでした・・・。少ないですが、今日学んだことのアウトプットをしていきます。

①要素内の特定部分にスタイルを適用したいとき

.works h1 {
　font-weight : normal ;
　font-size : 24px ;
　text-align : center;
}

例えば上記のようなCSSだと、「works」という領域の中にあるh1全てに上記のスタイルが適用されます。なお復習になりますが、font-weightで文字の太さ、font-sizeで文字の大きさ、text-alignで行揃えを指定します。上記のように記述すると、h1が普通の太さ、大きさ24px、中央揃えで表示されます。

ただサイトのデザインによっては、同じ「works」という要素内でも一番上のh1にだけスタイルを適用したい、ということもあります。「works」という領域内の一番上のh1にだけ新しくクラス名を付けてスタイルを指定しても良いですが、新たにクラスを作らず以下のように記述する方法もあります。

.works > h1 {
　font-weight : normal ;
　font-size : 24px ;
　text-align : center;
}

「.works > h1」は「worksというクラスの直下にあるh1」という意味です。「>」を使用することで「直下の」と指定することができ、例えば以下のように連続して使うこともできます。

.works > section > h1 {
　font-weight : normal ;
}

②行間の調整

行間の調整には「line-height」というCSSを使用します。例えば「works」という領域内の文章（p）の行間を調整したいときは、以下のように記述します。

.works p {
　line-height : 1.8 ;
　}

上記のCSSの場合、「行間を文字サイズの1.8倍にする」という意味になります。ちなみにこのサイトの行間は、上記のCSSのように記述するのであれば1.0くらいかな？と思っています（自分でカスタマイズしました）。

③フッターのスタイル変更

以前コピーライト表示をフッターにしたのですが、そのスタイル変更を以下のように行います。

footer p {
　text-align : center ;
　font-size : 14px ; 
　margin-bottom : 60px ;
　color : gray ;
　}

test-alignで中央揃えにし、font-sizeで文字の大きさを14pxにし、margin-bottomで文字の下部のスペース調整をし、colorで文字色をグレーにしました。最近クラス名の付いた要素の記述ばかりしていたので、「.footer」ではなく「footer」とくると逆に違和感を感じてしまいます。

【プログラミング独学4日目】わからなかったこと・調べてわかったこと

今日学んで疑問が残った部分は以下です。

CSS「body」と「.body」の違い

HTML側で「body」というクラス名を作成した場合、CSSでその部分について記述するときは「. body」と記載します。これに慣れすぎて、普通の「bode」に逆に違和感を感じてしまっていました。「footer」についても同様です。基本は「.」が不要で、クラス名が付いているときだけ「.」を使用するというスタンスを忘れないようにします。

works > section > h1？

この構造がいまいち理解できませんでした・・・とここに何がわからなかったかまとめているうちに理解できました。アウトプットするって大事ですね。

worksという領域の中にポートフォリオが3つ並んでいて、3つはそれぞれ別のsectionに分けられている。なので「works > section」は「1つ目のポートフォリオにだけスタイルを指定する」ということ。「works > section > h1」なので、結局1番初めのポートフォリオの題名（h1）だけにスタイルを適用したかったんですね。なんだかややこしいというか遠回りな気がするので、クラス名を付けちゃった方がシンプルなのでは・・・と思ったりもしました。

「font-color」や「font color」ではだめなの？

文字サイズの調整は「font-size」、文字の太さの調整は「font-weight」と書くのに、文字色を指定するときだけ「color」なんですよね。他と同じように「font-color」あるいは「-」を抜いて「font color」ではだめなのか、実際にCSSを変更してみました。するとだめでした。文字色指定のCSSは「color」。要素内の条件などがあるのかもしれませんが、文字色だけシンプルなのややこしいです。個人的に今日一番の気付きでした。