[CSS]いろいろな問題を解決する1行のスタイルシート集

CSS Globeのエントリーから、スタイルシートのレイアウトで生じる問題を解決する８つの1行のスタイルシートの紹介です。

8 Premium One Line Css Tips

縦方向のセンタリング

高さが固定されている場合、「line-height」を使用して、縦方向のセンタリングが実装できます。
デモページ

line-height:24px;

はみだす箇所を隠す

横幅の広い画像などをフロートした要素に配置した場合に、はみだしてしまう箇所を隠します。
詳細ページ

#main{
	overflow:hidden;
}

リンクが複数行になるのを避ける

指定箇所の自動改行を禁止します。
※強制的に一行になるので、レイアウトに注意。

a{
	white-space:nowrap;
}

ブラウザのスクロールバーを常に表示させる

Firefoxのデフォルトでは縦方向のスクロールバーを表示しないため、ページごとに高さが異なる際、レイアウトがずれる場合があります。
スクロールバーの表示をさせて、そのずれを解消します。

html{
	overflow:-moz-scrollbars-vertical;
}

追記：

2008年4月10日

上記の指定を行うと横スクロールバーが非表示になります。
参考：Firefoxで「overflow:-moz-scrollbars-vertical;」の指定は危険

水平方向のセンタリング

全てのモダンブラウザ用に、ブロック要素を水平方向のセンタリングに配置します。

margin:0 auto;

textareaの縦のスクロールバー

Internet Explorerのデフォルトでは、textareaの縦方向にスクロールバーを表示します。これを取り除きます。

textarea{
	overflow:auto;
}

印刷時の改ページを指定する

ページを印刷する際、改ページ箇所を指定します。

h2{
	page-break-before:always;
}

リンクのボーダーを削除する

リンクのアクティブ・フォーカス時のボーダーを削除します。

a:active, a:focus{
	outline:none;
}

Post on:2008年3月11日