スタート!CSS入門

importルールで参照する

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

ぜひご覧ください。

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

字幕

このレッスンでは CSS の記述方法の内の1つである外部ファイル化した CSS にスタイルを記述しHTML または同じく外部ファイル化したCSS からat import rule で参照する方法を紹介します。画面は HTML5 をベースに簡単ウェブページを記述しウェブブラウザで表示した状態です。CSS は全く使っていません。それではこのウェブページに対してCSS を適用した状態を見てみましょう。ウェブページ全体に背景色が追加され文字色も変わり画面中央に centering して表示されるようになりました。では、実際にこの CSS を外部ファイルに記述しHTML または同じく外部ファイル化した CSS からat import rule で参照する方法で実装してみましょう。HTML の編集画面を開きます。現在開いているのはCSS を適用する前の HTML です。この HTML はHTML5 で記述されています。外部ファイルに CSS を書くために新規ファイルを作成しましょう。CSS ファイルはplane text のファイルとして作成し拡張子を CSS とします。ここでは screen.css という名前でHTML と同階層にファイルを作成します。 screen.css が作成できました。設定したいスタイルをこのファイルに記述してみましょう。まず、ウェブページ全体に文字色と背景色を設定します。ウェブページ全体を囲む body 要素に対してCSS の宣言を記述していきます。ここでは文字色を薄いグレー背景色を深緑に指定します。続いて見出しや文章を含んでいるdiv 要素を画面中央に centering して表示するようスタイルを追加します。もう一度 HTML を開きます。div 要素には container というクラスが設定されていますのでクラスセレクタに対してCSS の宣言を記述します。CSS に戻りましょう。ここでは宣言の内容を深く理解する必要はありません。これらの宣言によって div 要素が画面中央に centering されているとお考えください。CSS の記述が完了しました。次にこの CSS をHTML から参照するための方法を紹介します。HTML の編集画面を開きます。作成した外部ファイルの CSS をat import rule で参照します。at import rule は style 要素内または、外部 CSS 内の先頭で記述します。 ここでは style 要素内に記述してみましょう。まず、 at import と記述した後に半角スペースを開けURL 関数のカッコ内に外部ファイルへのパスを指定します。ここでは HTML から CSS のパスを相対パスで記述します。最後にセミコロンを付けます。at import rule の後には通常通りCSS の記述を続けることができます。at import rule の記述が完了しました。作成した HTML をウェブブラウザで確認してみましょう。外部ファイル化したCSS にスタイルを追加HTML から at import rule で参照する方法でSS を追加できました。ここでは、 HTML 内の style 要素でat import rule を記述しましたが外部 CSS ファイルでat import rule することができます。実際に試してみましょう。HTML の編集画面に戻ります。先ほど作成した style 要素は一旦削除します。次にスタイルを記述しているscreen.css を読みこむための外部 CSS ファイルを作成します。ここでは link.css という名前でHTML と同階層に作成します。 link.css が作成できました。link.css の中で先ほどの同様にat import rule を記述します。at import rule の記述が完了しました。HTML の編集画面に戻ります。今作成した link.css をlink 要素によって参照するためコードを記述します。これで完成です。作成した HTML をウェブブラウザで確認してみましょう。外部ファイル化した CSSscreen.css にスタイルを記述しそれをさらに外部 CSS であるlink.css から参照する方法で CSS を追加できました。CSS の編集画面に戻ります。at import rule は複数書くこともできるので複数の CSS ファイルを作成した順番に参照することも可能です。ただし一つの制限としてat import rule の前に CSS を記述することはできません。具体的にはこのような記述はできません。at import rule は必ず全体の先頭で使うようにしてください。CSS を外部ファイルに書いてat import rule で参照するメリットとしては複数の HTML で同じスタイルを使いまわせたりスタイルの役割別に CSS ファイルを分けることができたりという点があげられます。 デメリットとしては CSS ファイルを増やしすぎるとウェブブラウザが読み込むファイル数が増え結果的に読み込み速度が遅くなる可能性があるという点です。CSS ファイルの分割は適度な数で行うようにしましょう。このレッスンでは CSS の記述方法の内に1つである外部ファイル化した CSS にスタイルを記述しHTML または同じく外部ファイル化した CSS からat import rule で参照する方法について学びました。

スタート!CSS入門

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

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

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

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

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