入門CSS 第3話
前回の記事では float によるレイアウトの配置について解説しました。今回はより細かなCSSのトピックを扱います。細かいとはいえ、実際にCSSコーディングすると必ずといっていいほど出てくる概念ですので、知っておいて損はないでしょう。
display
<div>は block要素、<span>はinline要素、などがありました。block要素は縦横の長さを指定することができ、まとまりを配置するのに大変役立ちます。inline要素は通常の文字のような扱いで、改行はされないし縦横の長さを指定できません。inline要素は文中の一部のスタイルを変えたい時などに役立ちます。
しかしながら、この display 要素を使えば、<span>でもブロック要素にしたりすることができます。また、display: none; という指定によってタグを非表示にすることも可能です。
これは特に JavaScriptなどでプログラミングでHTMLを色々といじりたい時に活躍します。
高さの指定ができるが改行されない、inline-block もあります。他にもdisplayで指定できる値はありますが、基本的にはこの4つをよく使います。
position
position では、relative, absolute, fixed の3つを特によく使います。 absolute を指定すると、relative の範囲で右から何px、上から何pxなどのように絶対的な位置で指定することが可能です。
特殊な位置に要素を出したい、という時に効果を発揮します。
position: fixed は、スクロールしても画面にくっついてくるような要素を作りたい時に利用します。これもabsolute の時と同様に、 bottom, top, left, right などで絶対的な位置を指定します。
擬似クラス
例えば、この要素にマウスを乗せた時、などのように特殊な状態でのCSSを指定することができます。それには、.sample:hover{ ... }のように、:をつけてそのあとに状態を指定することで実現できます。
他によく使う擬似クラスにはその中の最初の子供だけを指定する:first-childがあります。例えば<ul>と<li> で表現したリストで最初の<li>タグのみ適用するという場合です。3つ横並びしている時に最初だけmarginを変えるといったことができます。
終わりに
今回は特殊な CSS だけども本当によく使うものを厳選して解説しました。
CSS 編はそろそろ次回でラストにしようと思います。最後は「CSS適用の優先度」と、「レスポンシブデザイン」について解説します。
そのあとはいよいよJavaScriptプログラミングに移っていきましょう！