私が愛したレスポンシブ・デザインに効くCSS3たち

ウェブ制作技術

こんにちは、キタックCGSCの樋口です。

Web制作者のみなさん、使ってますか、CSS3?

僕は使っています。

使わないより使ったほうが素敵なサイトができるし、達成感があるし、モテるし、
良いこと尽くめだからです。

今日はそんなベリーナイスなCSS3のなかでも、昨今のWebに欠かせないレスポンシブ・デザインに効果的な、愛すべきCSS3のプロパティたちを紹介します。

※レスポンシブ・デザイン…デバイスのサイズに応じてWebページの表示を最適化させるデザイン手法のこと

CSS3

box-sizing

「レスポンシブ・デザインに使えるCSS3」、堂々の一位はこちら

box-sizing

でございます!

box-sizingの仕様

box-sizing … ボックスサイズの算出方法を指定する
(引用元:HTMLクイックリファレンス

box-sizingのプロパティ

content-box paddingとborderをwidthとheightに含めない
(デフォルト値)
border-box paddingとborderをwidthとheightに含める

box-sizingのすごさ

通常のボックスモデルは、「content-box」の状態でした。

box-sizingで「border-box」を指定してあげると、paddingとborderがwidthおよびheightに含まれた状態で計算されます。

レスポンシブ・デザインだと幅などを%指定することが多いのですが、box-sizing:border-box;のおかげで、widthをぽんと指定するだけで、はみ出さず、きれいにレイアウトされます。

display : table-cell ;

つづきまして、blockやらinlineやらinline-blockやら、HTML要素の属性を変えてしまう魔法でおなじみのdisplayプロパティより

display : table-cell ;

がエントリー!

table-cell の柔軟さ

使い方は

親要素にdisplay : table ; を指定し、子要素にdisplay : table-cell ; を指定するだけ。

読んで字のごとく、tableレイアウトと同じ配置になります。

均等に横並びすることもできますし、vertical-align で上下の位置揃えも可能に。

隊列を乱してばかりいた悪ガキが、しつけられて、ちゃんと整列するいい子になったような感覚を覚えます。

max-width : 100%;

最後はこちら

max-width : 100% ;

でございます。

「max」と「100%」の字面で元気になれます。

max-width : 100% ; の安定感

<img>や<iframe>なんかは、幅が指定されていたりするので、レスポンシブデザインにすると画面をはみ出してしまいがち。

こいつらに max – width : 100% ; を指定しておくと、これまたきちんと収まってくれます。

横綱白鵬が右四つで組んだくらいの安定感が出ます。


以上、レスポンシブ・コーディングライフを豊かにしてくれる、愛すべきCSS3をお届けいたしました。

今日はなんだか「愛してる」の響きだけで、強くなれる気がしてます。

それではまた。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。