あれ何だっけ？とすぐ忘れるけど覚えとくと便利なCSS

利用頻度が高くないCSSのプロパティは忘れてしまうこともしばしば。しかし、中には有用なプロパティもあるので、つい忘れてしまうようなものをまとめてご紹介。

CSSには膨大な数のプロパティがあり、すべてを覚えておく事は不可能です。

中にはほとんど使わない・使いものにならないようなものもありますが、いざという時に知っておくと便利なセレクタも存在します。

そこで、使う頻度が高くないので、すぐに「あれ、何だったっけ？」となってしまうようなCSSのプロパティをご紹介します。

ちなみに、私は一通りCSSを使ってページのレイアウトもできますので、基礎的な内容ではありませんが、本職のデザイナー・コーダーでもありませんので、中途半端な感じのネタですがご勘弁ください。

▼知りたいところから読む

長い単語の改行を途中で許可したい

URLは途中でスペースも入らないので、あまりにも長い場合ボックスからはみ出してしまうことがあります。

日本語がURLに使われている場合などが特に問題です。

こういった時に、途中で改行を許可するプロパティを設定しておくと、長いURLなどもはみ出さずに表示させることができます。

プロパティ
word-wrap

値
normal（途中で改行を入れない）：初期値
break-word（単語の途中で適宜改行を入れる：行の先頭に改行が入る）
break-all（改行が行末に入る）

URLの場合には、-（ハイフン）や/（スラッシュ）などの位置で改行が入る場合があり、-（ハイフン）だけはほとんどのブラウザで改行が入りますが、他の文字列ではブラウザによって挙動はまちまちです。

break-wordとbreak-allの使い分けですが、長い単語が1行に入る場合に、break-wordだと行の頭に改行が入りますので、ちょっと読みにくい見た目になってしまう場合もあります。

そういった時にはbreak-allを設定すれば、行末に改行が入るようになりますので、文章も読みやすくなります。

日本語URLを使っている場合、そのままページに記述すると以下のようにボックスからはみ出してしまいます。
（説明用に画像にしてあります）

ソースコード

<div>
http://example.com/%E6%97%A5%E6%9C%AC%E8%AA%9EURL%E4%BE%8B
</div>

useful-css_001

そこでこのdivタグにbreak-wordを設定すると、以下のようにdiv内に収まるようになります。

ソースコード

<div style="word-wrap: break-word;">
http://example.com/%E6%97%A5%E6%9C%AC%E8%AA%9EURL%E4%BE%8B
</div>

useful-css_002

パディングを設定してボックスの内側の余白を設定すると、ボックスのサイズそのものが変わってしまい、レイアウトが崩れてしまうことがあります。

仮にdivボックスの横幅を300pxにしていたとしても、paddingに20pxを設定していると、divボックスのサイズは両端に20pxを足した340pxになってしまいます。

useful-css_003

そんな時には、box-sizingでborder-boxを設定すると、パディングの設定に関係なくボックスサイズが300pxになりますのでレイアウトの崩れもありません。

プロパティ
box-sizing

値
content-box（パディングの影響を受ける）：初期値
border-box（パディングの影響を受けない）

floatを使ってメインコンテンツエリアとサイドメニューのレイアウトを整えることが多いので、このプロパティを設定しておくと計算機片手に、細かな幅の計算をしなくてもパディングの調整ができるので便利です。

「あっこれいいな」と思うマイナーなプロパティがあれば、このページで随時更新していきます。