[CSS]いろいろな問題を解決する1行のスタイルシート集
Post on:2008年3月11日
sponsors
CSS Globeのエントリーから、スタイルシートのレイアウトで生じる問題を解決する８つの1行のスタイルシートの紹介です。
縦方向のセンタリング
高さが固定されている場合、「line-height」を使用して、縦方向のセンタリングが実装できます。
デモページ
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> line-height:24px; </textarea> |
はみだす箇所を隠す
横幅の広い画像などをフロートした要素に配置した場合に、はみだしてしまう箇所を隠します。
詳細ページ
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> #main{ overflow:hidden; } </textarea> |
リンクが複数行になるのを避ける
指定箇所の自動改行を禁止します。
※強制的に一行になるので、レイアウトに注意。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> a{ white-space:nowrap; } </textarea> |
ブラウザのスクロールバーを常に表示させる
Firefoxのデフォルトでは縦方向のスクロールバーを表示しないため、ページごとに高さが異なる際、レイアウトがずれる場合があります。
スクロールバーの表示をさせて、そのずれを解消します。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> html{ overflow:-moz-scrollbars-vertical; } </textarea> |
追記：
- 2008年4月10日
- 上記の指定を行うと横スクロールバーが非表示になります。
参考：Firefoxで「overflow:-moz-scrollbars-vertical;」の指定は危険
水平方向のセンタリング
全てのモダンブラウザ用に、ブロック要素を水平方向のセンタリングに配置します。
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> margin:0 auto; </textarea> |
textareaの縦のスクロールバー
Internet Explorerのデフォルトでは、textareaの縦方向にスクロールバーを表示します。これを取り除きます。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> textarea{ overflow:auto; } </textarea> |
印刷時の改ページを指定する
ページを印刷する際、改ページ箇所を指定します。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> h2{ page-break-before:always; } </textarea> |
リンクのボーダーを削除する
リンクのアクティブ・フォーカス時のボーダーを削除します。
|
1 2 3 4 5 |
<textarea name="code" class="css" cols="60" rows="5"> a:active, a:focus{ outline:none; } </textarea> |
sponsors
