1. ホーム > 
  2. Webサイト制作 > 
  3. サイト制作のヒント > 
  4. あれ何だっけ？とすぐ忘れるけど覚えとくと便利なCSS

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

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

  • 2016/5/26
  • 2016/5/27

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

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

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

Webスク（6か月のガッチリ型）

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

WebCamp（1か月の集中型）

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp（2〜6か月のカスタマイズ型）

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします

▲