スタート!CSS入門

外部ファイルに書く

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
外部ファイル化したCSSにスタイルを記述し、HTMLからlink要素で参照して適用する方法を紹介します。
講師:
06:26

字幕

このレッスンでは CSS の記述方法の内の1つである外部ファイル化した CSS にスタイルを記述しHTML から link 要素で参照する方法を紹介します。画面は HTML5 をベースに簡単なウェブページを記述しウェブブラウザで表示した状態です。CSS は全く使っていません。それでは、このウェブページに対してCSS を適用した状態を見てみましょう。ウェブページ全体に背景色が追加され文字色も変わり画面中央にcentering して表示されるようになりました。では、実際にこの CSS を外部ファイルに記述しHTML から link 要素で参照する方法で実装してみましょうHTML の編集画面を開きます。現在開いているのはCSS を適用する前の HTML です。この HTML は HTML5 で記述されています。外部ファイルに CSS を書くために新規ファイルを作成しましょう。CSS ファイルはプレーンテキストのファイルとして作成し拡張子を CSS とします。ここでは screen.css という名前でHTML と同階層にファイルを作成します。screen.css が作成できました。設定したいスタイルをこのファイルに記述してみましょう。 まず、ウェブページ全体に文字色と背景色を設定します。ウェブページ全体を囲む body 要素に対してCSS の宣言を記述していきます。ここでは文字色を薄いグレー背景色を深緑に設定します。続いて見出しや文章を含んでいるdiv 要素を画面中央にcentering して表示するようスタイルを追加します。もう一度 HTML5 を開いてみます。div 要素には container というクラスが設定されていますのでクラスセレクタに対してCSS の宣言を記述します。もう一度 CSS ファイルに戻りましょう。ここでは宣言の内容を深く理解する必要はありません。これらの宣言によって div 要素が画面中央に centering されてるとお考えください。CSS の記述が完了しました。次にこの CSS をHTML から参照するための方法を紹介します。HTML の編集画面を開きます。外部ファイルの CSS は link 要素のよってHTML から参照することができます。link 要素は head 要素内に記述するcolor 要素で二つの属性が必須になります。1つ目の属性は rel 属性です。rel 属性は HTML から参照するリソースのタイプを指定します。 ここでは外部ファイルを stylesheet として扱いたいのでstylesheet と記述します。二つ目の属性は href 属性です。href 属性はリソースの参照先を指定します。ここでは HTML から CSS のパスを相対パスで記述します。link 要素の記述が完了しました。なお link 要素は複数書くこともできるので複数の CSS ファイルを作成し順番に参照することも可能です。作成した HTML をウェブブラウザで確認してみましょう。外部ファイル化した CSS にスタイルを記述しHTML から link 要素で参照する方法でCSS を追加できました。CSS を外部ファイルに書くメリットとしては複数の HTML で同じスタイルを使いまわせたりスタイルを外部の CSS ファイルにまとめられたりという点があげられます。他の記述方法と比べてデメリットは特にありませんが外部ファイル化することで参照先を間違ってリンク切れを起こす可能性はあります。参照先には注意しましょう。このレッスンでは CSS の記述方法の内の一つである外部ファイル化した CSS にスタイルを記述しHTML から link 要素で参照する方法で学びました。

スタート!CSS入門

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

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

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

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

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