今までの記事を統合しました。以後はこちらに追記していきます。
floatの親要素の高さが消失する対処
<div class="hoge">
<div class="left">左にfloatさせるよー</div>
</div>
.hoge {
overflow:auto;
}
.left {
float: left;
}
floatの親要素にoverflow: auto（or hidden）;でもふっかける。
ブロック要素での縦に中央表示
要素を縦に中央表示させたくて下記のようにさせると思いますが、実はこれdivやpなどのブロック要素には機能しませんのでその対処。
hoge { vertical-align: middle; }
vertical-align: middleを強制的に機能させる
sample
sample
hoge {
height: 100px;
vertical-align: middle;
display: table-cell;
}
display: table-cellを追加するとvertical-align: middleが機能します。
ただこれには下記のようなデメリットも存在します。
- すでにdisplay属性を使用してしまっているのでtable-cell以外の値を使用することができない
- margin属性が機能しないため余白を開けることができない（paddingは内側に余白を設けるため代替にはならない）
まぁどちらも更に一つ階層増やせば対応出来ますが、ソースに無駄が……
height要素と同じ値のline-heightを設ける
sample
hoge {
height: 100px;
line-height: 100px;
}
heightとline-heightに同じ値をふっかけてやると縦に中央表示されます。
ただしこちらにもデメリットが存在します。
- 必然的に１行でなければならない
まぁ２行にしたら２つにline-heightがかかってしまいますからね……
※sampleでは元々のCSSファイルの関係上少し別のコードになっています。
heightを指定せずに上下に余白を設ける
sample
sample
hoge {
padding: 36px 0;
}
上下のpaddingで高さを調整する……というやり方なのですが、marginも機能するし複数行も機能する。中身が動的でない限り最適な気がしなくもないのですがなにせ調整がめんどくさい……
上記のサンプルを見ても分かる通り、中身のフォントサイズやboaderがあるときのその数値を考慮してpaddingの値を入れないといけないので非常にめんどくさいです。
中央寄せで字間を調整している際の注意点
letter-spacingで字間を調整する際に中央寄せや右寄せをしている場合は注意が必要です。
実際にやってみればわかると思いますがletter-spacingのみを指定していると正常には表示されません。
その場合は同様の値をtext-indentに入れてやれば解決します。
ダメな例：左にずれている
ABC
<div style="width: 150px; border: 1px solid #000;">
<p style="letter-spacing: 1em; text-align: center;">ABC</p>
</div>
良い例：ぴったり真ん中に
ABC
<div style="width: 150px; border: 1px solid #000;">
<p style="letter-spacing: 1em; text-indent: 1em; text-align: center;">ABC</p>
</div>
要はletter-spacingで字の"後"に余白を入れているので最後の字の後にも余白が入っているため、中央表示させようとするとその余白も幅として認識されるため位置がずれるです。なので文字列の最初にも同じだけの余白を入れて文字列の前後の余白を同じにし位置がずれないようにしているのです。
ページ内リンクでヘッダーに隠れる対処
ヘッダーなどが固定化されている場合、ページ内リンクでリンク先に飛ぶと上部がヘッダーで隠れます。
対処法としてはリンク先のID（css_hoge）に下記のCSSを適用させることで位置をずらすことができます。
[id^="css_"] {
padding: ヘッダーの縦幅px 0 0;
margin: -ヘッダーの縦幅px 0 0;
}