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

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

8 Premium One Line Css Tips

縦方向のセンタリング

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

はみだす箇所を隠す

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

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

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

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

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

追記:

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

水平方向のセンタリング

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

textareaの縦のスクロールバー

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

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

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

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

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

top of page

©2017 coliss