nth childとdisplay要素について
今回は主にnth childとdispley要素について勉強しました。参考テキストにはさらっとしか紹介されていませんでしたが、実際にWEBデザインをしてくのに欠かせない要素なので、しっかり理解したいと思います。
nth child
まず、今回の記述です。
/*ナビゲーションメニュー*/
nav ul {
list-style-type: none;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
font-size: 0px;
}
nav li {
display: inline;
font-size: 12px;
border-right: solid 1px #aaaaaa;
padding-left: 10px;
padding-right: 10px;
}
nav li:first-child {
border-left: solid 1px #aaaaaa;
}
nav {
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: right;
margin-top: -27px;
margin-bottom: 10px;
}
nav a {
color: #000000;
text-decoration: none;
}
nav li:first-childは、親要素の直下を指定する場合に使用するタグです。直下以外では使用できません。この要素を擬似要素と呼び、疑似要素は以下のとおりです。
- link リンク先に未アクセス時の表示
- visited リンク先にアクセス済の表示
- hover リンク先にカーソルを重ねたときの表示
- focus リンク先にフォーカスしたときの表示
- active リンク先をクリックしたときの表示
- first-child 親要素にとって一つ下の要素
- lang 当該要素の記述言語が指定したものである場合
- checked 当該要素がチェックされた場合を対象とする
- disabled 当該要素が操作不可の場合に対象とする
- empty 空要素を対象とする
- enebled 当該要素が操作不可能の場合に対象とする
- first-of-type 親要素にとって一番初めに現れた当該要素を対象
- last-child 親要素にとって最後の直下要素を対象
- last-of-type 親要素にとって一番最後に現れた当該要素を対象
- nth-child(数字) 子要素として、先頭から○番目の要素が対象
- nth-child(odd) 奇数番目の要素にスタイルを適用
- nth-(even) 偶数番目の要素にスタイルを適用
- nth-last-child(数字) 下から○番目の要素にスタイル適用
- only-child 親要素の対象となる子要素が一つだけのとき
本当はもう少しあるんですが、ひとまずここまで紹介しておきます。実際によく使うのは、nth-child(数字)とnth-child、first-of-typeとfirst-childらしいので、この辺をしっかり覚えておこうと思います。
display要素
display要素も擬似要素も本当にわかりにくいです。これを理解するために、いろんなサイトを見ましたが、未だに完全に理解はできていません。ただ、こんな感じなんだなってのはわかったので、今後も勉強していこうと思います。
display要素は以下のとおりの値があります。
- none 非表示
- block
- inline
- inline-block
- flex
block
- 要素は縦に並ぶ。（前後に改行が入る）
- width/heightを指定できる
- margin/paddingを指定できる
- text-alignは指定できない
- vertical-alignは指定できない
※p、div、ul、h1～h6などのタグの初期値
※中央揃えしたいときは、margin-right/leftをautoにする
inline
- 要素は横に並ぶ（前後に改行は入らない）
- 主に文章の一部として使用される、基本的にblockの中で使用する
- width/heightは指定できない
- 左右のpadding/marginは指定できる
- 上下のmarginは指定不可。上下のpaddingは指定できるが前後の行とかぶってしまう
- text-alignは指定できる。親要素（div.pなど）に記述する
- vertical-alignは指定できる。親要素ではなく、直接inlineに記述
※inlineの幅＆高さは要素の中身（テキストの長さやフォントサイズ）で自動的に設定される
inline-block
- 要素の並び方はinline的、要素の中身はblock的な性質を持つ
- width/heightを指定できる
- margin/paddingを指定できる
- text-alignは指定できる。親要素（div.pなど）に記述する
- vertical-alignは指定できる。親要素ではなく、直接inline-blockに記述する
※inline-blockはSNSボタンの横並びやナビゲーションメニューのバーを作るときに使われる。
flexについてはまだ深く理解していないので、また後日紹介したいと思います。
まとめ
今回の記述内容はとても簡単なんですが、参考テキストでは紹介していない大切なことが多すぎて、本当に理解に苦しみました。未だにdisplay要素と疑似要素を覚えられずにいます。
今後は実践を繰り返しながら覚えていくことになると思います。わからなくなったら、参考サイトを見て勉強していきます。
以下今回のBefore Afterです。
After
サイト右上にメニューが付いたのがわかると思います。ヘッダーの色が変わっているのは気分で変えただけのものを直しただけです。
ほとんど変化はありませんが、ここには覚えておくべき要素がたくさん詰まっています。
引き続き勉強していきます。
