Amazonランキング大賞2018

レイアウトデザイン

要素の高さと幅を指定する height, width

通常はpxで指定するが、レスポンシブデザインの場合は%で指定する。
使える単位は auto, px, %, em, など
高さ height
幅 width

コード
div{
    height: 100px;
    width: 100px;
}

要素の外側の余白サイズ margin

例えばdivで箱を作っている場合など、その周囲にmarginで余白を作ることが出来る。
使える単位は px, %, em, など

コード
p {
    margin: 20px;
}

margin: 20px
上下左右全てに20pxの余白ができる

margin: 10px 20px
上下に10px、左右に20pxの余白ができる

margin: 10px 20px 30px 40px
上、右、下、左、の順で設定される

個別設定
margin-top: 20px
margin-right: 20px
margin-bottom: 20px
margin-left: 20px

要素の内側の余白サイズ padding

例えばdivで箱を作っている場合は、その内側にpaddingで余白を作ることが出来る。
使える単位は px, %, em, など

コード
p {
    padding: 20px;
}

padding: 20px
上下左右全てに20pxの余白ができる

padding: 10px 20px
上下に10px、左右に20pxの余白ができる

padding: 10px 20px 30px 40px
上、右、下、左、の順で設定される

個別設定
padding-top: 20px
padding-right: 20px
padding-bottom: 20px
padding-left: 20px

テキスト、画像などの垂直方向の位置揃え指定 vertical-align

コード
img {
    vertical-align:bottom;
}


baseline 親要素のベースラインに揃える(初期値)
top 上端揃え
bottom 下端揃え
middle 中央揃え
px, %, em
など

テキストに下線、上線、打ち消し線の装飾 text-decoration

コード
p{
    text-decoration: underline;
}

none 装飾なし(初期値)
underline 下線
overline 上線
line-through 打ち消し線
blink 点滅

擬似クラス

要素がどういった状態にあるか、指定するためのもの。
要素:状態

コード
通常リンク
a{
    color:red;
}

訪問済みリンク
a:visited{
    color: blue;
}

マウスカーソルが乗っている時
a:hover{
    text-decoration: underline;
}

等。

参考 セレクタの種類HTMLクイックリファレンス

疑似要素

要素の前後や、特定の箇所にテキストや画像などを指定することが出来る。

要素::状態

コロンは一つでもいいが、IE8など古いブラウザが対応していない。
そもそもIE8はHTML5にも対応していないので、バッサリ切ってしまう。
擬似クラスと疑似要素の区別が付きやすいようにコロンは2つがいい。

コード
要素の前に追加する
before, afterではcontent属性が必須。不要な場合は "" とだけしておく。
h1::before{
    content: "";
}

要素の後に追加する
h1::after{
    content: "";
}
参考 セレクタの種類HTMLクイックリファレンス

clearfix

float要素を使用すると、親要素に高さが無くなる。
floatによる回り込みを解除しつつ、親要素に高さを与えるclearfixというテクニックがある。

コード
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

floatを利用する要素が入った親グループ(sectionやdivでグループ化しておく)に対して上記クラスを設定する。