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

多段テキストレイアウトの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「column_count」と「column_width」というCSSプロパティを使って、テキストの多段レイアウトを作成する方法について、解説致します。
講師:
06:48

字幕

このレッスンでは column-count と― column-width という CSS プロパーティーを使って― テキストの多段レイアウトを作成する 方法について解説していきます まずはダウンロードしてきた こちらの column ― というフォルダの中に入っている この index.html ファイルと― style.css ファイルを エディタで開いて下さい そして これがそれらの ファイルを開いた状態です 左側には index.html ファイル そして 右側には style.css が― 表示された状態となっています これらのファイルを使って今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう それでは まず こちらの index.html ファイルから― 確認してみたいと思います こちらの index.html ファイルには― このように長い長文があります そしてその長い長文を p タグで囲っている状態ですね そして ID 属性を作っていますが 中にはまだ ID を設定していない状態です それでは この状態でこの index.html をブラウザで開いて― どのように見えるか 確認してみたいと思います それがこの index.html ファイルを開いた状態となっています 当然のようにこういった形で 先程の長文が表示されていますね 今回はこの長文を多段レイアウト つまりは マルチカラムのレイアウトに― 変更してみたいと思います それでは エディタに戻ります そして こちらの style.css ファイルの方を見てみます この style.css ファイルには 二つの ID に対応した― スタイルを定義しています まずは一つ目 こちらの部分です p#column-count というものですね そして この中には -webkit-column-count ― として 3 という値を入れています この -webkit- これは ベンダープレフェックスでしたね 今回利用するこちらの column-count ― という CSS のプロパーティーが まだクロムブラウザで― 正式採用されていない為 こういった形で ベンダープレフェックスを付けて― 先行機能にアクセスするような形としています それでは こちらの #column-count を― 先程の p タグの ID の中に入れて どのような表示になるのか― 確認してみたいと思います こちらをコピーして そして こちらに貼り付けます そして 保存します コピーのショートカットキーですが マックでしたら コマンドと C ウインドーズでしたら コントロールと C でしたね そして 保存のショートカットキーは マックでしたら コマンドと S ウインドーズでしたら コントロールと S でしたね それでは この状態でこの index.html ファイルを― ブラウザで開いて確認してみましょう これがその ID に column-count を設定した― index.html ファイルを ブラウザで表示した状態です このように先程と違って横並び三つの 枠が出来上がっているのが分かりますね この三つの枠は先程の CSS プロパーティー ― column-count で設定した 3 という値に紐付いています このように column-count を 使って カラムの数を― 指定してあげることによって このようにテキストの多段レイアウトを― 実装することが可能です 例えば この状態でブラウザの 横幅を変更してみましょう このように変更してみても三つのカラムは そのまま維持されていますね そして このように元に戻しても このように 三つのカラムの数は維持されています それでは もう一つの CSS プロパーティーをみていきたいと思います エディタに戻ります もう一つの CSS プロパーティーは こちらにあります こちらは p#column-width に 対して設定しています 同様にベンダープレフェックスである -webkit- を書いて その後に― column-width としています そして 今回はその値を 10 em としています この 10 em はそのカラムの横幅が 10 文字分という意味合いになります 要するに そのカラムに含まれている 一文字分の単位が 1 em という事ですね それでは こちらの ID column-width をコピーして― 先程のこちらの ID にセットします セットができたら 保存して そして こちらの index.html ファイルを― ブラウザで確認してみましょう そして これが column-width 10 em を設定した状態となっています 先程の column-count では カラムの数で制御していましたが 今回は一つのカラムの横幅が 10 文字分 という形でカラムが生成されています ですので 例えば この状態で ブラウザの横幅を変更してみるとー このように横幅自体は あまり変わりませんが カラムの数は― 変化していっているのが分かりますね 今はブラウザの横幅に合わせて 三つのカラムが表示されていますが― このように元に戻していくと そのカラムの数は増えてきます このようにこの column-width という CSS プロパーティーは― カラムの横幅が基準となってテキストの 多段レイアウトを生成する為の― CSS プロパーティーとなっています これまでこういったテキストの 多段レイアウトを組む為には― それぞれのカラムを div タグや p タグで区切って― その中に入るテキストをカラム毎に 設置して float: left なので― 横に並べていきましたが この column-count や― column-width を 使うことによって― そういった作業をする必要が 全く無くなり 簡単にこういった― テキストの多段レイアウトを組む事が できるようになっているわけです 以上でレッスンは終了です 今回は column-count と column-width ― という CSS プロパーティーを使って テキストの多段レイアウトを― 作成する方法について解説致しました 以降のレッスンでは border-radius ― という CSS プロパーティーを使って テキストボックスや画像ボックスの― 角を丸める方法について解説致しますので そちらも合わせてご覧下さい

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

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

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

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

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

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