スタート!CSS入門

個別要素のstyle属性に書く

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTML内の個々の要素に対して、style属性で直接スタイルを書く方法を紹介します。
講師:
04:10

字幕

このレッスンでは CSS の記述方法の内のひとつである個々の要素に対してスタイル属性で直接スタイルを書く方法を紹介します。画面は HTML5 をベースに簡単なウェブページを記述しウェブブラウザで表示した状態です。CSS は全く使っていません。それではこのウェブページに対してCSS を適用した状態を見てみましょう。ウェブページ全体に背景色が追加され文字色も変わり画面中央にcentering して表示されるようになりました。では、実際にこの CSS をスタイル属性に直接書く方法で記述してみましょう。HTML の編集画面を開きます。現在開いているのはCSS の適用する前の HTML です。この HTML は HTML5 で記述されています。設定したいスタイルを直接 HTML の要素のスタイル属性に記述してみましょう。まず、ウェブページ全体に文字色と背景色を設定します。ウェブページ全体を囲む body 要素の監視タグにスタイル属性を追加します。通常の HTML の属性と同じようにdouble quotation で値を囲みます。そのなかに CSS の宣言を記述していきます。ここでは文字色を薄いグレー背景色を深緑に設定します。 続いて見出しや文章を含んでいるdiv 要素を画面中央に centering して表示するようスタイルを追加します。先ほどと同じようにスタイル属性を追加しその中に CSS の宣言を記述します。ここでは宣言の内容を深く理解する必要はありません。これらの宣言によってdiv 要素が画面中央に centering されているとお考えください。CSS の記述が完了しました。ウェブブラウザで確認してみましょう。この HTML をウェブブラウザで表示します。個々の要素に対してスタイル属性で直接スタイルを追加できました。CSS をスタイル属性に書くメリットとしてはどの要素にどのスタイルが適用されているのかHTML だけを見れば把握できるという点があげられます。半面、複数のセレクタで同じスタイルを使いまわせなかったり記述が分散するためCSS の全体像を把握しずらいと言ったデメリットがあります。このレッスンでは CSS の記述方法の1つである個々の要素に対してスタイル属性で直接スタイルを書く方法について学びました。

スタート!CSS入門

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

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

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

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

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