《 11:06 公開/更新》
ブラウザは基本的に横スクロールバーを出さずに済むようにページを描画します。つまり、ながーい文章があれば、ウインドウの端で自動的に改行します。
下方向(垂直方向)にはスクロールバーを出しますが、右方向(水平方向)にはできるだけスクロールバーを出しません。巨大な画像があるとか、横幅固定の大きなボックスがあるとか、そういう「どうしようもない」状況があって初めて、横スクロールバーを出します。
で、スタイルシートを使うと、この自動改行(勝手に改行されること)を防ぐことができます。
以下のように、white-spaceプロパティに値「nowrap」を指定すると、自動的には改行されなくなります。
h1 { white-space: nowrap; }
上記の場合、h1要素(見出し)の中身は、勝手に改行されなくなります。
このように「自動改行をさせたくない」と思うケースは、表(テーブル)を作っているときが多そうに思います。
表(テーブル)を作っているときには、この「自動改行を防ぎたい」と思うことがあります。
例えば、以下のような構造の表を作ったときです。
主な使われ方 | white-spaceプロパティの値に「nowrap」が指定されるのは、表(テーブル)のセルに対してであることも多いのではないでしょうか。このようにテーブル内に「見出しセル」と「中身セル」がある場合で、「中身セル」の内容が極端に多い場合、「見出しセル」側の文字列が中途半端に改行されてしまって、見出しの内容が読みにくくなってしまうことがあります。 |
---|---|
防ぎたいよね? | このように、「見出しセル」のある列(ここでは左端の列)の幅が極端に狭くなってしまうと、「見出し」の内容が読みにくくなってしまいます。まあ、どう描画されるかはブラウザによって異なるので、場合によっては何もしなくてもうまく描画してくれるブラウザもあるかも知れませんが。 |
どうでしょう?
上記の表では、「主な使われ方」とか「防ぎたいよね?」という見出し部分(※1)のセルが、中途半端に改行されてしまっている(※2)と思います。(たぶん)
※1:この文字列が見出しに適しているかどうかはともかくとして。(^_^;)
※2:何が中途半端だと感じるかは人それぞれですが、この場合「見出し」内の文字列は改行して欲しくないです。私の場合は。その方が見やすそうに感じますし。
というわけで、ここでは「見出し」の存在するセル(th要素)に対して、自動改行を防ぐようスタイルを記述するのが良さそうです。
例えば、以下のようにCSSソースを記述します。
th { white-space: nowrap; }
見出しセルを構成している「th要素」に対して、white-spaceプロパティに値「nowrap」を指定しています。
このスタイルシートを適用させて、先ほどの表を表示させてみると、以下のように見えます。
主な使われ方 | white-spaceプロパティの値に「nowrap」が指定されるのは、表(テーブル)のセルに対してであることも多いのではないでしょうか。このようにテーブル内に「見出しセル」と「中身セル」がある場合で、「中身セル」の内容が極端に多い場合、「見出しセル」側の文字列が中途半端に改行されてしまって、見出しの内容が読みにくくなってしまうことがあります。 |
---|---|
防ぎたいよね? | このように、「見出しセル」のある列(ここでは左端の列)の幅が極端に狭くなってしまうと、「見出し」の内容が読みにくくなってしまいます。まあ、どう描画されるかはブラウザによって異なるので、場合によっては何もしなくてもうまく描画してくれるブラウザもあるかも知れませんが。 |
すると、上記のように、見出しセル内の自動改行がなくなります。
もっとも、閲覧者の使っているウインドウ幅がかなり狭い場合や、見出しセルに含まれる文字数がとても多い場合には、このスタイルを使うと逆に見にくくなりそうですが。見出しセルに含まれる文字がほんの数文字程度であれば問題にはならないでしょう。
()
(前の記事) « リンクをブロック化して縦横いっぱいまでどこでもクリック可能にするCSS
前後のスタイルシート TIPS
< 旧 / 新 >
(次の記事) ボックスの右下にロゴ(画像)を固定して表示するCSSの書き方 »
▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)