HTML入門トレーニング

style要素

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
style要素を使って、HTML全体に対してスタイルを記述する方法について学びます。
講師:
08:31

字幕

このレッスンではstyle要素を使って HTLM全体に対して styleを記述する方法について学びます style要素を使うとページ全体に対して styleを書くことができます 現在、コードエディタでサンプルファイルの HTMLを開いているところです HTMLの中身を見てみましょう body要素の中にはh1とh2タグで 見出しが二つマークアップされており h2要素にはstyle属性を使って この見出しの文字色が赤 フォントの太さが通常の太さで 表示されるように インラインスタイルを使って styleが記述されています インラインスタイルでは styleを指定したい要素に 直接styleを記述するため ここではこの同じ内容をこのページの中の h2要素、全てに適応されるように style要素を使って書き変えてみましょう style要素はこのページ冒頭の headタグの中に記述します styleはこのページにおいて 直接表示されるものではなく 裏側で動作するためのものだからです title下の後に改行を入れ styleタグを入力します styleタグは通常通り 開始タグと終了タグで構成されており このstyleタグの中に CSSを書いていきます このstyleタグの中は 非常に特殊な状態です このstyleタグの中では HTMLの構文ではなく CSSの構文を使います CSSの構文では 使用するstyleを適応したいターゲットを セレクタという形で定義します セレクタはスタイルを適応したいターゲットを ブラウザやユーザーエージェントに 伝えてくれます ここで適応したいターゲットは h2要素ですので ここではh2と入力します この時ここに記述するのは CSSの構文ですので htmlのように<(山形カッコ)で 始めたりする必要はありません 指定したい要素の名前を直接指定します このようにステイルを指定したい要素を 直接セレクタに指定する方法を タイプセレクタと呼びます セレクタを記述した後は {(波カッコ)を入力します しばしばこのセレクタと{(波カッコ)の間に 半角スペースを入力するケースがありますが この半角スペースは あってもなくてもかまいません 単に半角スペースがあると 見やすいという理由で 半角スペースを空けるケースがよく見られます CSSはこの{(波カッコ)で始まり }(波カッコ)で終わるこの間に プロパティとその値を入力していきます プロパティと値は1行で 全てを宣言しても構いませんが 見やすさを考えてここでは改行をしておきます そしてこの{(波カッコ)の間に プロパティとルールを宣言していきましょう 書き方はインラインスタイルでの この値の書き方と全く同じです まず変更したいstyleの プロパティを決定します ここでは文字色を変更したいため colorを入力して この値にはred、赤を指定します プロパティの名前の後には:(コロン) そして値を入力して 値の後には;(セミコロン)を入力します これがCSSの構文のルールです 同じようにfont-weight normal こちらを入力しておきます このようにセレクタとプロパティ そしてその値で構成される このひとまとまりのことを CSSではルールと呼びます ここでCSSを記述していますので インラインスタイルは削除しておきましょう h2の要素に直接指定された インライン要素は削除しました ここでコードをセーブして ブラウザで確認してみましょう ブラウザを移動すると 先ほどのインラインスタイルと 全く同じスタイルを 伝える要素を使って適応しているため 見た目は全く変わっていません もう一度コードエディタに戻ります ここではh2要素を二つに増やしてみましょう この既存のh2要素をコピーして ペーストします 区別がつくように内容は変えておきましょう ここでは、グルーバルスタイルは すべての要素に適応されます。 と入力しておきます ここも漢字にしておきましょう ここでいったん保存します ブラウザに切り替えて リロードしてみると 先ほどコピーして増やした このh2要素に対しても 文字色が赤 フォントの太さは普通の太さという styleが適応されています このようにstyle要素を使って h2要素に対してstyleを定義すると このHTMLの中に含まれる 全てのh2要素に対して ここで宣言したstyleが 適応されるようになるのです 必要な場合はもう少しstyleが 適応される範囲を狭めることができます 例えばこの1つめのh2に対して class属性で alertというクラスの値を設定します CSSではこのようなidやclassの 値を使ってセレクタを作ることもできます 現在はh2要素がセレクタになっていますので ここを.alertと変更します この.(ドット)で始まるセレクタは クラスセレクタと呼ばれ alertという名前の値を class属性にもつ要素全てに このstyleが適応されるという セレクタになります コードを保存し ブラウザで確認してみると 最初のh2要素 alertという値を class属性に設定したh2要素のみに styleが適応されています コードに戻り、今度はこのclass属性を h1要素にもつけてみましょう 値は全く同じalertです セーブしてもう一度 ブラウザを再読み込みすると h1要素と最初のh2要素に styleが適応されています h1とh2は全く別々の要素ではありますが このように同じclass属性の 値を設定することで classセレクタを使って 全く同じstyleを別々の要素に 適応することができました さらにこのclassセレクタは 要素と組み合わせて使うこともできます この.(ドット)の前にh2と入力します こうすることでstyleが適応される範囲を もっと狭めることができます ここで書かれているのは まずh2要素を探し さらにその中でalertという classの値をもつ要素 ここのみにstyleを適応するという 指定になります 保存してブラウザで確認してみましょう 先ほどはh1要素にも styleが適応されていましたが 今回はh2のかつalertという class属性を持つこの見出しのみに styleが適応されています このようにstyle要素を使うことで ページ全体に対して 様々なセレクタを使って styleを適応することができます このレッスンではstyle要素を使って HTML全体に対して styleを記述する方法について学びました

HTML入門トレーニング

HTMLはWebページを作るうえでもっとも重要な言語です。これがきちんと定義されなければ、Webページは正しく表示されません。このコースではHTMLの成り立ちから基本的な構文の書き方、さまざまなタグの意味やその使い方まで幅広い内容を学ぶことができます。またHTMLと並んで重要な言語であるCSSやJavaScriptについても、それぞれその概要を説明します。

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

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

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

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