HTML入門トレーニング

HTMLとCSS

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLとCSSの関係、CSSの役割について学びます。
講師:
08:19

字幕

このレッスンではHTMLとCSSの関係 そしてCSSの役割について学びます HTMLとCSS、この2つの技術は 非常に密接に絡み合っています このためどちらか片方だけに言及して 学習を進めることはかなり難しいことです またWebデザインを学ぶ上で HTMLとCSSの両方学ぶことは 非常に一般的なことでもあります ここでは2つの技術が どのように絡み合っているか どのように連携をしているか ということをみていきましょう 現在画面ではサンプルファイルのHTMLを ブラウザのFirefoxで開いているところです ここでFirefoxを使っているのは Firefoxにはページのスタイル CSSのONのOFFを簡単に 切り替えることができるからです この機能を使ってCSSがどのように 作用しているかを確認していきましょう 現在表示されているのはCSSが 適応されていないWebページです しかし、全く適応されていない状態だとしても このように見出しと思われる部分は フォントサイズが大きくなっていたり 通常の段落と段落の間には 少しスペースが空いていたりと 最低限のスタイルが適応されているようです この現在Webページに 適応されているスタイルは いわゆるブラウザのデフォルトスタイルシート と呼ばれるスタイルシートです ブラウザのデフォルトのスタイルシートは ブラウザによって異なりますが おおむねHTMLのマークアップ内容 ここは見出しです、ここは段落です といったマークアップ内容に応じて ある程度のスタイルを適応してくれます デフォルトのスタイルシートは ブラウザによって異なることに注意して下さい このレッスンではCSSと呼ぶ時 デフォルトのスタイルシートではなく 独自に記述したCSS これをCSSと呼びます 通常独自に記述したCSSで 定義されたスタイルは このブラウザのデフォルトスタイルを 上書きして適応されます さて実際にこのWebページに CSSを適応してみましょう Firefoxのタイトルバーで 右クリックをしてメニューバーを選び メニューバーを表示します Macではデフォルトでメニューが表示されています 表示メニューからスタイルシートを選び 現在はスタイルシートを 使用しない、が選ばれています この下の標準スタイルシートというところを 選びます すると実際にこのWebページで 記述されたCSSが適応され ページの見た目、スタイルが変更されました 見出しは左右に分かれ 本文の部分の幅は少し狭くなっています またスクロールすると この右側の Allow me to demonstrateという文字は 固定されていますが 左側のHTML and CSSという見出しや 中の本文についてはスクロールされています CSSを使うとこのように様々な見栄え スタイルを制御することができます いったん先ほどの状態に戻して 実際にこのHTMLの中身を コードエディタでみていきましょう コードエディタに切り替えます HTMLの中身をみると このようにbodyタグの中に 見出しや段落が定義されています そして実際にスタイルは このページの上の部分 この部分で適応されています ここではCSSはstyleという タグを使ってマークアップされています そのためこのstyleの開始タグから 終了タグまでで囲まれた部分が このWebページで独自で記述している CSS、という風に言えます CSSの一つ一つを分解してみていきましょう CSSはカスケーディング・スタイル・シート という言葉の略です そしてスタイルはこのように 一つ一つのルールで制御されています 一つのルールは一つのセレクタが 必ず存在します ここではbody要素に対するスタイルを 記述するというセレクタがかかっています また一つのルールは 中カッコで囲まれたプロパティと その値のセットを持っています ここに書かれているのはbody要素に対して マージン、幅、フォントなどのスタイルを それぞれここに書かれた値のように 適応するというルールが書かれています CSSは非常に柔軟な言語です それをお見せするために 少し下にスクロールしましょう このすでに記述されている styleタグの下に コメントアウトされた styleタグがあることが分かります コメントアウトとは この左向きの山形カッコで始まり エクスクラメーションマーク そしてハイフン二つで始まります この一連のルールに従って書かれた 記号の後に書かれたテキストは 全てコメントとして無視されます そしてコメントを終了するためには このようにハイフンを二つと 右向きの山形カッコで終わらせます つまりこの山形カッコから山形カッコまで この間に書かれているテキストは 全て無視されているということです 通常コメントにはHTMLやCSSを 記述する上でメモなどを残します ここではCSSの効果を確認するために あらかじめ別のstyleタグを記述し それをコメントアウトしてあります そこでこのコメントアウトしている 部分を削除し 実際に適応してみましょう そして元々適応されていた この上の部分のstyleタグについては 逆にコメントアウトします 先ほどのルールと同じように 左向きの山形カッコ エクスクラメーションマーク ハイフン二つでコメントを始め ハイフン二つと右向きの山形カッコで コメントを終了します このコメントの中には改行を いくついれても構いません HTMLを保存し ブラウザで移動をしてみましょう 現在はスタイルシートが 適応されていない状態です 先ほどと同様に表示メニューから スタイルシート 標準スタイルシートを選んで スタイルシートを適応してみましょう 先ほどとは全く違う見た目が現れました しかし表示しているHTMLが 変わったわけではありません このように背景色に黒が適応されたり あるいはこの Allow me to demonstrateという文字を 大きく表示したり それ以外の要素を非表示にしたりということは 全てCSSで行われています 最初のCSSと次に適応したCSSでは 随分見た目が違いますね CSSを使うと非常にダイナミックに 視覚表現を制御することができます このレッスンではHTMLとCSSの関係 CSSの役割について学びました

HTML入門トレーニング

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

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

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

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

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