WebデザイナーのためのCSS3実践講座

「box_sizing」を利用したマルチカラムレイアウト

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「box_sizing」というCSSプロパティを利用したマルチカラムレイアウトの作成方法について、解説致します。
講師:
06:10

字幕

このレッスンでは box-sizing という CSS プロパーティーを利用して― マルチカラムレイアウトの 作成方法について解説していきます まずはダウンロードしてきたこちらの box-sizing ― というフォルダの中に入っているこの index.html ファイルと― style.css ファイルを エディタで開いて下さい そして これがそれらのファイルを 開いた状態です 左側には index.html ファイル そして 右側には style.css を― 表示させている状態です これらのファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずはこちらの index.html ファイルの方からみてみましょう こちらの index.html ファイルでは 二つの p タグ― そして それを囲む div タグ― これをワンセットとして同じ構成のものを 二つ準備しています そして この div タグの中で この p.left と p.right の― ボックス要素を float: left で 横並びのレイアウトを作成する形としています この大枠の div タグですが 横幅を 800 ピクセルとしており― そして p.left は 横幅 600 ピクセル― そして p.right は横幅 200 ピクセルとしています そして これらの p タグに対して padding を― 20 ピクセル付けています そして この下にあるもう一つの ワンセットの方も同じ構成となっていますが― 一点だけ異なる点があります それはこちらの p.left そして p.right に対して― こちらの部分ですね CSS の中で box-sizing: border-box― という値を設定しています それでは ここまで確認できましたら こちらの index.html ファイルを― ブラウザで開いて その表示を確認してみましょう そして これがその index.html ファイルを― ブラウザで表示したものとなります まず こちらの部分を見てみましょう こちらの部分は先程の index.html の上のワンセットの― 部分となります この灰色の枠が横幅 800 ピクセルの div タグ― そして こちらの赤い要素が p.left 横幅 600 ピクセルの要素― そして こちらの 青色の枠は p.right ― 横幅 200 ピクセルの要素となっています この二つの p タグに対しては float: left を付けているので― 本来であれば この div タグの中で これらの要素が横並びで表示される― 必要があります ただ 実際はこのように横並びにならずに 縦並びで表示されてしまっていますね これはこの p タグそれぞれに対して 設定されている padding そして― この border の幅が関係しています このように border や padding を― ボックス要素に設定すると その border や― padding で設定された分の幅が 本来の p タグの幅に上乗せした形で― これらの枠が大きくなってしまう という現象が発生します ですので 今回はこの 600 ピクセルの 横幅を期待したこの赤い枠― そして 200 ピクセルの横幅を期待した この青い枠 合計で 800 ピクセルで― この灰色の枠に入る予定だったのですが padding の値や― border の幅によってその分の幅が それぞれ増えてしまい― 800 ピクセルの中に入り切らなかったので 縦並びで表示されてしまった― という形になります それでは 次に こちらの 下の部分を見てみましょう こちらの部分は先程の index.html ファイルの― 下のワンセットとなります このワンセットにはこれらの p タグに対して― box-sizing: border-box という値を設定していましたね この box-sizing: border-box という値を― 設定することによってそれぞれの p タグに設定された padding や― border の値が元々この p タグに 設定されていた横幅の中で展開される― といったかたちになります 要するに 先程とは違って padding や border で― 設定してもその分の横幅がその 本来設定されていた p タグの横幅の中に― 収まる形でセットしてくれるといった 形のプロパーティーになります ですので こちらの下の部分では こちらの 赤い枠 横幅 600 ピクセルですね そして こちらの青い枠 こちらは 200 ピクセルとなります ですので 合計 800 ピクセルとなって この灰色の枠 横幅 800 ピクセルですね こちらの部分に入りますので こういった形で 横並びのレイアウトが可能になっている― という訳です この box-sizing という プロパーティーが登場するまで― こういった横並びのレイアウトを作る際には そういった padding や― border の値を気にしながら 作る必要がありましたが― このプロパーティーの登場でそういったものに 気を遣わなくても― box-sizing: border-box という値を付けてあげるだけで― このようにスムーズに 横並びのレイアウトが構築できる といった状態になっています 以上でレッスンは終了です 今回は box-sizing という CSS プロパーティーを利用した― マルチカラムのレイアウトの 作成方法について解説致しました 以降のレッスンでは column-count と― column-width という CSS プロパーティーを使って― テキストの多段レイアウトを作成する 方法について解説致しますので― そちらも合わせてご覧下さい

WebデザイナーのためのCSS3実践講座

このコースでは、実際にWebデザインを行うときに頻繁に利用するCSS3の新機能と使い方を解説します。具体的にはWebフォント機能やFont Awesomeを使ったアイコンの表現方法、マルチカラムレイアウトや丸角ボックスの作成方法、アニメーションができるトランジション機能やトランスフォーム機能について紹介します。

2時間15分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月09日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。