スタイルシートはHTMLファイルとは別に外部ファイルを作成します。その他HTMLファイルへ直接記述する方法もありますが、外部ファイルとして記述する方が良いとされています。ここではスタイルシートの適用方法と位置関係を説明します。
こんにちは！あーるくんです。ヾ ^_^♪
Adobe提携校でWEBクリエイター講師を２年ほどしていました。しっかりと学べるように記事を書いていくので閲覧よろしくお願い致します。
もくじスタイルシートCSSの記述場所と適用方法！｜Webデザイナー講座
- CSSには２種類の記述場所がある。
- CSSを外部ファイルとして記述する。
- HTMLへの記述方法。
- HTMLへの記述方法（パス）
- 外部CSSファイルのメリット。
- HTMLファイルを実際に確認しよう。
- HTMLのheadタグ内に直接記述する方法。
- まとめ
CSSには２種類の記述場所がある。
スタイルシート（CSS）には2種類の記述方法があります。
- 外部ファイルとして記述する方法
- HTMLのheadタグ内に記述する方法。
この2種類をそれぞれ説明していきます。
デザインを適用する方法だね〜！
スタイルシートとはCSSのことね^^
CSSを外部ファイルとして記述する。
スタイルシートとHTMLファイルを別に作成します。互いにリンクさせることによりCSSファイルに記述されているスタイルをHTMLへ適用します。この方法が主流になります。
CSSファイルの拡張子は「.css」とです。style.cssなど分かりやすい名前にしましょう。
CSSファイルをHTMLファイルへ適用する為にHTMLへ一筆記述する必要があります。
HTMLへの記述方法。
HTMLのheadタグ内に以下のソースを記述します。
| <link rel="stylesheet" href="CSSファイルへのパス" type="text/css"> |
CSSファイルにstyle.cssという名前を付けます。続いて適用するHTMLファイルと同じ場所にCSSファイルを設置すると以下のようになります。
記述場所はこちら。
<!DOCTYPE HTML> <body> |
headタグ内に記述することで外部CSSを適用することができます。headタグ内であればどこに記述しても構いません。
HTMLへの記述方法（パス）
HTMLファイルとは違う階層のcssファイルを適用する場合。今回はcssフォルダの中にstyle.cssを設置しています。
<!DOCTYPE HTML> <body> |
このように記述することで適用することができます。CSSファイルはフォルダを作成してファイルを格納することが主流です。
外部CSSファイルのメリット。
外部CSSのメリットは一つのCSSファイルで複数のHTMLに適用することができます。スタイルシートを修正することで各ページのデザインを一括的に変更させることも可能です。お店のホームページを季節に応じたデザインに変更することも楽にできます。
HTMLファイルを実際に確認しよう。
CSSを適用する前の表示は以下になります。
外部CSSを適用後は以下の表示になります。スタイルは予めこちらで記述しております。
素材を用意しましたのでHTMLファイルをダブルクリックして確認しましょう。
lesson2の練習用ファイル DL※ 圧縮したファイルがダウンロードできたらzipファイルをダブルクリックで解凍しましょう。
ダウンロードしたHTMLファイルはVisual Studio Codeで確認してください。Lesson6で紹介しています。
解凍方法が分からない方はこちら
Visual Studio Codeの紹介
HTMLのheadタグ内に直接記述する方法。
CSSをHTMLファイルに直接記述することもできます。スタイルは外部CSSで適用することが一般的ですが、例外として記述することがあります。
headタグ内にstyleタグを記述します。styleタグ内にCSSを記述することで適用できます。
記述方法
<!DOCTYPE HTML> <body> |
素材を用意しましたのでHTMLファイルをダブルクリックして確認しましょう。
lesson2の練習用ファイル DLまとめ
スタイルを適用するには、外部CSSファイルの添付とHTMLへ直接記述する２つの方法がる。現在は外部CSSを用いて適用する流れが主流。