スタート!CSS入門

空白文字の扱い

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
空白文字の処理方法を指定するには、white-spaceプロパティを使います。空白文字とは、半角スペースやタブ、改行などのことを指します。ここでは、white-spaceプロパティの使い方について紹介します。
講師:
02:40

字幕

このレッスンでは半角スペース、タブ改行などの空白文字の扱いを指定するwhite-space プロパティの使い方について紹介します。white-space プロパティに使える値は normalpre nowrap pre-wrappre-line の各キーワードです。normal は連続する空白文字を1つにまとめて自動的に改行をいれます。pre は連続する空白文字の折り畳みを禁止し自動的に改行をしません。nowrap はノーマルのように空白文字をまとめますが自動的な改行はしません。pre-wrap は同様に空白文字の折り畳みを禁止しますが自動的に改行は入れます。pre-line は normal と同じですがsource 内の改行でも改行されます。そのほかの仕様は御覧の表の通りです。では実際に CSS を書いてみましょう。編集画面とウェブブラウザを開きます。ここではウェブページの少し下の部分にあるtable 要素こちらの table 要素の見出し部分にあたる th 要素のテキストこの一列目の部分ですねこの th 要素内のテキストが自動的に幅を調整されて改行が入ってることで読みにくくなっている点をwhite-space プロパティを使って制御してみます。 現状ではこのような表示になっていることを覚えておいてください。th 要素に対してwhite-space プロパティこちらを使って空白文字の扱いを設定します。white-space プロパティにpre つまり自動的な改行を禁止するように設定します。ウェブブラウザを見るとth 要素の部分で文字が改行されず1行で表示されてることが確認できます。このレッスンでは半角スペース、タブ改行などの空白文字の扱いを指定するwhite-space プロパティの使い方について学びました。

スタート!CSS入門

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

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

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

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

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