Tumblr使えるとレスポンシブWebデザインの実装に役立つCSSを幾つかまとめました。一部のブラウザでは非サポートのものもありますが、案件によっては使える状況になってきていると思います。○デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。Systemを作成するときに計算が簡単になります。Systemで2カラム分の相対幅を求めるとします。デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅を指定します。box-sizing:border-boxを指定した場合、2カラムは全体のカラム数の半分、つまり50%にあたるので単純にwidth:50%を指定すればOKです。これにpaddingでガター幅を指定します。このようにカラム幅の計算が感覚的に行えます。SystemやCSSフレームワークで使用されてます。(※余談:CSSプリプロセッサを使用すればそもそも計算の手間は省けますが...)策定状況は草案です。殆どのブラウザはpadding-boxに対応していません。△その名の通り柔軟にコンテンツを配置できます。縦並びや横並び、配置したボックスの並びや可変設定なども指定できます。表示する順序も変えることができるので、PCとスマートフォンサイズでコンテンツの順番を入れ替えたりできます。1;}....}DEMO現在はブラウザの対応状況もマチマチで、ひとつひとつ書くのも大変なのでCSSプリプロセッサのMixinを使ったほうがいいと思います。詳細な使い方は下記のサイトで丁寧に説明されてるので参考にしてください。株式会社LIG策定状況は勧告候補です。△マルチカラムレイアウトを作成できます。カラム幅とカラム間の幅を指定することができ、表示領域に応じて自動的にカラム数を調整してくれます。50px;}DEMOIE10以外はベンダープレフィックスが必要です。break-insideに対応してません。策定状況は勧告候補です。×calcはCSS内で四則演算が使えます。計算結果の値を返します。相対数値と固定数値も合わせて使用できるので、width:calc(100%-20px)といった使い方も可能です。Systemでwidthとmarginやborderを同時に指定するときなどに便利です。40px);}DEMOAndroid非対応、Safariは-webkit-をつけて対応します。策定状況は勧告候補です。○background-sizeはCSSで指定した背景画像のサイズを指定します。値にはpxや%、coverなどを指定できます。Retinaなど高解像度ディスプレイ対応に使用できます。高解像度ディスプレイに画像を対応するとき、img要素の画像はwidth、heightで指定しますが、CSSで指定した背景画像の場合はbackground-sizeでサイズを調整します。200px;}DEMO策定状況は勧告候補です。○remは単位のひとつで、root+emの意味です。rootつまりhtmlのフォントサイズを基準にしたサイズとなります。マルチデバイスに対応するためにフォントサイズは相対サイズのemや%で指定することが多いと思いますが、emは指定する位置によってコントロールしにくいことがあります。その点remは常にどの箇所に指定しても常にrootを基準にしているので使用しやすいです。1.5rem;}DEMO策定状況は勧告候補です。3終わりにまだ非サポートのブラウザもあるので全ての状況で使用できるわけではないですが、案件によってはこれらのCSSをうまく活用することで作業がラクになったり、設計の幅が広がります。Layout、Regions、vw、vhなども使えたら便利そうですが、まだ利用できるブラウザが限られてるのと私が消化不良のため今回は省いてます。レスポンシブWebデザインはそもそもそれまでに合った技術を組み合わせたものなので、構成によってはまだまだ工夫したりしなければならないケースがありますが、新しい仕様が出てきたり提案されたりしていますので、今後より設計がしやすくなっていくと思われます。Commentコメントはまだありません。Spiceサービス作りましたAbout自分で得た情報、学んだことのアウトプットのために始めたblogです。して情報を共有することで少しでもWEB業界に貢献できたらなと思ってます。このblogが誰かの役に立てたら幸いです。内容で間違いなどありましたら指摘頂けると助かります。AuthortooltipHiro東京在住のフリーランスwebデザイナー。TSUKURIBEと言う屋号で活動してます。お問い合せは右のフォームまたはTSUKURIBEのサイトよりお願いします。Formフォームまたはこちらよりお問い合わせください。