スタート!CSS入門

head要素内のstyle要素に書く

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
head要素内にstyle要素を作成し、その中でスタイルを書く方法を紹介します。
講師:
04:17

字幕

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

スタート!CSS入門

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

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

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

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

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