05/201410

CSSの小技

今までの記事を統合しました。以後はこちらに追記していきます。

MENU

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に同じ値をふっかけてやると縦に中央表示されます。

ただしこちらにもデメリットが存在します。

  • 必然的に1行でなければならない

まぁ2行にしたら2つに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;
}

関連エントリー

【正規表現】英文以外の半角スペースを排除

とある事情により、日本語英語混在の文で半角スペースを排除する正規表現を探してい...

2017/12/08
SSL化予定

最近絵の記事が全くない御堂です。 てめぇ本当に絵描か? それはさておき...

2017/08/18
【freo】ページ送りナビゲーション【テンプレート】

freoのページ送りナビゲーションって初期だと前のページと次のページのみなんで...

2014/01/04
【艦これ】ユーザースタイルシート

ちまたで人気の肝これ……なんか違う。そう艦これ。一発変換で肝がでるってどういう...

2013/10/22
【freo】TinyMCEでspanが挿入されるのを防ぐ【Tips】

【もしかして13/08/22】 うまく動作していない可能性が出てきました。...

2013/08/22
サイトバージョンアップ

サイトバージョンなんて付けていませんが…… とりあえず更新しました。 ...

2013/05/16

コメント

  • コメントはまだありません。

コメント登録

  • 閲覧制限 ※管理者のみにすると投稿者でも確認ができなくなります。

archive


×

ログイン