スタート!CSS入門

レイアウト方法

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
表のセル、行、列などのレイアウトのために用いるアルゴリズムを変えるには、table-layoutプロパティを使います。ここでは、table-layoutプロパティの使い方について紹介します。
講師:
05:16

字幕

表のセル、行、列などのレイアウトのために用いるアルゴリズムを変えるには table-layoutプロパティを使います。このレッスンでは table-layout プロパティの使い方について紹介します。table-layout プロパティに使える値は「 auto 」「 fixed 」の各キーワードです。「 auto 」は任意の自動テーブルレイアウトを使います。「 fixed 」は固定テーブルレイアウトを使います。固定テーブルレイアウトでは表の幅、列の幅、ボーダーやセルの間隔にレイアウトが依存するようになります。具体的には以下のような法則にしたがって各列の幅が決められます。1つ目は前提として表全体に widthプロパティで幅を設定する必要があります。2つ目は width プロパティが auto 以外の値の列はその値で幅が設定されます。セルに幅が直接設定されている場合はそれが適用されるということです。3つ目はそれ以外の場合で、最初の行のセルがwidth プロパティで auto 以外の値を設定していればその値で幅が設定されます。セルが複数列にまたがる場合、幅は列に対して分割されます。これは一行目のセル、つまり最初の行のセルを基準に幅が決定されるということです。 最後は表の残りの幅を均等に分割した幅が残りの列の幅になります。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。現在はテーブルレイアウトプロパティに何も指定がない状態。つまり自動テーブルレイアウトです。これを固定テーブルレイアウトに変えてみましょう。なお表を認識しやすいようにすでに「 th 」要素「 td 」要素に対しては「 border 」枠線を追加しています。まず「 table 」要素に対して「 width 」プロパティを使って幅を設定します。ここでは 100% に設定します。ここまではウェブブラウザの表示も何も変化がありません。各列の幅に対して注意をしておいてください。続いて「 table 」要素に対して「 table-layout 」プロパティを使って固定テーブルレイアウトつまり「 fixed 」に設定します。ウェブブラウザを見ると先ほどと変化がありました。表の各列の幅が均等に分割されていることが確認できます。この状態で1つの列に対して幅を設定すると残りの列は全体の残りの幅を均等に分割するようになります。HTML では1列目の最初の行にあたる「 th 」要素にあらかじめ「 step 」という「 class 」が設定されています。 そこで1行目、1列目の「段階」というセルに幅を設定してみましょう。1列目の「 step 」という「 class 」に対して CSS を記述します。step class セレクタを記述します。そしてこれに対して「 witdh 」プロパティこちらを使って幅を固定100 ピクセルに設定します。ウェブブラウザを確認してみましょう。1列目の「段階」と書かれたセルに100 ピクセルの幅が設定されたおかげで残りの列、2列目と3列目、こちらについては全体の幅の残りの幅が均等に分割されました。この表では1列目だけ幅が固定されているということになります。このレッスンでは表のセル、行、列などのレイアウトのために用いるアルゴリズムを変える table-layoutプロパティの使い方について学びました。

スタート!CSS入門

CSSはWebページに視覚的な表現、つまりスタイルを与えるための言語です。HTMLと組み合わせることで、より自由なデザインをウェブ上で実現できます。このコースでは初めてCSSに触れる方でも体系的な理解が得られるように、Web標準としての仕様の成り立ちからさまざまな文法、ボックスモデルなどの基本概念まで幅広い内容を解説します。

5時間21分 (71 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年11月25日

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

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

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