HTML入門トレーニング

外部CSSファイル

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
外部CSSファイルを使ってスタイルを外部化し、それを読み込む方法について学びます。
講師:
08:42

字幕

このレッスンでは外部cssファイルを使って スタイルを外部化し、 それをhtmlに読み込む方法について 学びます インラインスタイルや、 スタイル要素を使ったスタイルの定義は、 特定のページ、ひとつを 制作する上では問題ありません しかし、複数のページを抱えるウェブサイト 全体に対してスタイルを定義する時は、 非効率的と言えます そのためここでは、 スタイルを外部cssファイルによって 外部化する方法を紹介しましょう 場面では、コードエディターで サンプルファイルの external.htmを開いている所です サンプルファイルの中にはもうひとつ page2.htmというファイルもあります htmlの中身を見ると、 冒頭にはスタイルがいくつか宣言されており、 その下には見出しと、 いくつかの段落があります。 そして段落の冒頭では、 page2.htmのリンクが張られています page2.htmに切り替えてみましょう page2.htmを開くと、 こちらにはスタイルタグによる スタイルの定義はありません 中身については、 見出しと段落があるのみです 先ほどの external.htmファイルに戻ります さてこのようなウェブサイトがあったとき、 このhtmlファイルの中に スタイル要素でスタイルを提示する方法で スタイルを管理している事は、 正しい方法でしょうか? 現在は、ただ2ページだけが ウェブサイトを構成しています しかしでは、これが50ページだったら どうでしょうか? 50ページ全てのページに このスタイル要素を作って、 全てのページにこのスタイルを定義していく これはとても非効率ですよね そこでこれらのスタイルを 外部ファイルにまとめてみましょう ファイルメニューから 新規作成をクリックします お使いのエディターが現在この 画面で開いているブラケッツでない場合でも、 新規のテキストファイルを 作成して頂ければ問題ありません そしてこのファイルは style.cssとして このサンプルファイルと同階層に保存します style.cssです cssファイルはhtmlファイルと同様 その実態はテキストファイルですので、 どのようなコードインターでも 編集して頂けます 場面の左側を見ると、 htmlファイルと同階層に style.cssという新しい cssファイルが作成できた事が分かります cssファイルを作成できたら、 先ほどのexternal.htmに戻り、 このhtmlのスタイル要素に 書かれているスタイルを、 全て選択し、カットします コピーではなく、切り取りです そして切り取ったスタイルを全て 先ほど作成した style.cssにペーストします これで一旦、 cssファイルを保存しておきましょう external.htmに戻り、 不要になったこのスタイル要素を削除します ここで一旦ファイルを保存して ブラウザーに切り替えてリロードしてみると、 cssが全く適用されていない 状態である事が分かります コードエディターに戻ります 保存と同時にコードが フォーマットされていますが ここでは気にしないで下さい さて、先ほどまでこのhtmlの 内部に書いてあったスタイルは、 外部cssファイルに移動しました そのため、このhtmlと 先程新しく作成したcssファイルを 関連づける必要があります この外部リソースの参照は、 リンクタグというタグを使って行います リンクタグは、ヘッドタグの中に記述します リンクタグを記述していきましょう スタイルシートを読み込む時に リンクタグに必要な要素はまずrel属性です rel属性はこれから読み込む外部リソースが どのようなリソースであるか、 という事を示します ここではスタイルシートを読み込みますので、 stylesheetという値を指定します 更にスペースでもうひとつの属性、 外部リソースへのパスを指定する href属性を入力します cssはこのexternal.htmという htmlファイルと、 同階層に置いてありますので、 そのままstyle.cssという ファイル名を入力します 最後に山形かっこででリンクタグを閉じます リンクタグはメタタグなどと同様に、 終了タグを書かないタグです なお、外部cssへのパスは、 リンクや画像へのパスと同様に 相対パスで入力します 相対パスとは 現在いるこのウェブページから見た、 外部リソースへのパスという事です そのため、このcssファイルが 仮に、アンダーバーcssという ディレクトリーの下にある場合は、 このような指定の仕方になります ここではhtmlファイルと cssファイルが同階層にあるため、 ファイル名のみを指定します さてこれでhtmlから外部cssファイルを 読み込む事に成功しました この追加した行を一旦コピーして、 もうひとつのhtmlファイル、 page2.htmを開き、 このヘッドタグの中にも追加をします これで、2つのhtmlファイルに対して、 ひとつのスタイルシート、 ひとつのcssファイルを関連づけた状態です どちらのhtmlも このstyle.cssに書かれている スタイルを参照し適用されます 保存して、ブラウザーに表示してみましょう 現在はページ2が表示されているところです 先ほどリンクタグでスタイルシートの 読み込みを追加しましたので、 こちらのページにも スタイルが適用されています external.htmに遷移してみても、 やはり同じように スタイルが適用されています このように外部ファイル、 外部cssファイルを使うと、 複数のページで同じスタイルを 共有する事ができるのです コードエディターに戻って cssファイルを開き、 スタイルを追加してみましょう 一番下にスクロールして、 a要素に対してのスタイルを追加します a要素はリンクを表現しますので、 ここで下線を非表示にするために テキストデコレーションプロパティーを使って 下線を非表示、消すように指定します 文字色はred、赤に指定してみましょう 更にロールオーバーした時の文字色も 合わせて設定しておきます a:hoverというセレクターを入力すると マウスが重なった時のa要素を設定できます マウスが重なった時の a要素のスタイルを設定できます ここでは文字色を黒に設定します セーブしてブラウザーに戻りリロードすると、 リンク要素の部分、a要素の部分が文字色は赤 そして下線が非表示になっています マウスを重ねると文字色は黒に変化します 更に現在は external.htmにいますが、 ページ数に遷移しても、 同じように新しく追加した スタイルが適用されています このように外部cssファイルに スタイルを定義し、 そのファイルを 様々なhtmlファイルに読み込む事で、 スタイルをまとめて複数のページに 適用する事ができます この方法を使えば、ウェブサイトのページが 数十、数百、数万になっていっても cssファイルさえ編集すれば全てのページに 新しいスタイルが適用される事になります このレッスンでは外部cssファイルを使って スタイルを外部化し、 それをhtmlに読み込む方法について 学びました

HTML入門トレーニング

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

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

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

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

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