backgroundプロパティ
backgroundプロパティについて調べているときに今まで使ったことがなかったbackgroud-attachmentというプロパティが出てきました。
これは画面や要素をスクロールするときに背景画像をスクロールさせるのか固定した状態にするのかを設定できるプロパティです。
初期値は
backgroud-attachment:scroll
となっていて背景画像もスクロールされます。
背景画像を固定させたいときは
backgroud-attachment:fixed
を使うことで固定させることができます。
displayプロパティ
displayプロパティでは（私が）よく使う
- block
- inline
- inline-block
- none
の他にも
- list-item
- table
- table-cell
- table-row
などその他にも沢山値をとることができます。
display:list-itemは例えばspanなどのインラインレベル要素を強制的にリスト化をすることが可能にするようです。
最近display:table、display:table-cellを使う場面があったので、今回はこのことについて説明していきます。
display:table、display:table-cellを使う理由
display:tableを使うことで段組が実現できます。
段組みをつくるのはfloatプロパティでも実現できますがfloatプロパティはwidthの指定が必要でした。
しかし、display:tableを使うことで
- ブラウザ側が自動で要素の横幅を調整してくれるのでカラム落ちしない
- すべてのカラムの高さは、一番縦長と同じ高さになる
- vertical-alignを使って縦の位置を調整することができるようになる
という特徴を発揮できます。
特徴の3つ目に出てきたvertical-alignについて少し書いていきます。
vertical-alignは縦位置の指定をすることができます。
例えばボックスの中央に要素を配置したい場合、verticcal-align:middle;を指定すると
簡単に中央揃えで配置することができます。
ただし、ブロック要素には効きません。使えるのはインライン要素とテーブルセルのみになります。
そこでdisplay:table-cellを指定することでブロック要素にもverticcal-alignが使えるようになります。
display:tableとtableタグの違い
CSSのdisplay:tableとhtmlのtableタグの違いを見ていきます。
| css displayのプロパティ | tableタグ |
|---|---|
| table,inline-table | table |
| table-row | tr |
| table-header-group | thead |
| table-row-group | tbody |
| table-footer-group | tfoot |
| table-column | col |
| table-cell | td, th |
| table-caption | caption |
tdやthはtable-cellのプロパティにまとめられているので、別々で書くことはできないようです。
また、colspanなどは使えないようです。
display:table、display:table-cellの使い方
基本的には親要素にdisplay:table、子要素にdisplay:table-cellをつければ反映されます。
<ul class="table"> <li>子要素01</li> <li>子要素02</li> <li>子要素03</li> </ul>
.table {
display:table;
width:100%;
}
.table li {
display:table-cell;
}
子要素を均等な幅にして配置したい場合は親要素にtable-layout:fixed;を記載して、widthを指定します。
また、上にも書いたようにdisplay:table-cellをつかうとブラウザ側が自動で要素の横幅を調整してくれるのでレスポンシブデザインになります。
もし固定幅にしたい場合はwidthを指定することで固定幅になります。
これによって1つのカラムだけ固定幅であとはレスポンシブにといった使い方もできます。
position
私がhtmlの勉強をし始めた頃、positionプロパティがあるということは知っていても要素の位置を指定するのはmarginやpaddingを使っていました。
というのもなんだかpositionプロパティは複雑で難しいというイメージがあったからです。
いまでも完璧に使いこなせていない部分があるので、今一度positionプロパティについて調べてみました。
まずはpositionプロパティで指定できる値から
- static
初期値。使う場面は指定したpositionを打ち消したいときなど。 - relative
相対位置への配置。開始位置はstaticと同じ。 - absolute
絶対位置への配置。static以外が指定された親要素を基準とした配置。static以外を指定した親要素が無ければbodyを基準とするのでサイトの左上が基準となります。 - fixed絶対位置への配置。ウィンドウを基準とし、スクロールしても画面上に表示されます。
relativeとabsoluteの違いですが、
relativeは元々配置されるはずだったスペースが確保された状態で移動します。
一方absoluteは元々配置されるはずだったスペースが破棄されて移動します。
absoluteは要素が浮いているような感覚です。
absoluteの注意点
注意しなければいけないのは、上にも書いていますがabsoluteを使うとき、サイトの左上からの絶対位置を指定したい場合以外は親要素にstatic以外の値を指定する必要があるということです。
基本的には親要素にrelativeを指定することがほとんどですが、これを指定しないと希望通りのレイアウトになりません。
最初のころは、サイト中盤で親要素にrelativeを指定しないでabsoluteを使っていてtop:2050px;みたいな感じで指定していました。。。
また、子要素全てにabsoluteを指定した場合、親要素の高さは0になります。
これは子要素全てにfloatを指定したときも同じですね。
なので親要素にheightを指定する必要があります。
positionプロパティと一緒に使われるプロパティ
positionプロパティとよく一緒に使われるプロパティには
top、right、left、bottom、z-indexがあります。
これらはstatic以外のpositionプロパティを指定していないと使えません。
top、right、left、bottomは名前どおり、上からの距離、右からの距離、左からの距離、下からの距離を指定できます。
z-indexではボックスの重なりの優先順位を指定することができます。
z-indexの値が大きいものほど上に表示され、小さいものほど下に表示されます。
overflow
overflowは、ボックスに収まりきらない内容を、どう処理するかを指定するプロパティです。
- visible：領域をはみ出して表示する(初期値)
- hidden：はみ出た部分を表示しない
- scroll：スクロールで表示する
- auto：自動
この中でよく使われるのはhiddenになります。
今後の記事でも紹介していく予定ですが、例えばhiddenを使ってfloatを解除させることができます。
また、サイトを作っていて右側に余白ができることがあるのですが、bodyに対してoverflow:hidden;をつけると解消されるケースもあります。
テキストの高さを指定する
文章が長くなり2行以上になる場合、行と行との間隔が小さすぎると文章が読みづらくなってしまいます。
そこで使われるのがline-heightです。
line-heightを指定することでテキストがもつ高さを指定することができます。
例えばfont-sizeが16pxでline-heightを20pxに指定するとテキストの上下に2pxずつの空間がうまれます。
今回はここまでです。
見やすいサイトをつくるために色んなプロパティを有効活用していきましょう。
