CSS｜外部スタイルシートの作り方

前回、「内部スタイルシート」、「インラインスタイルシート」、「外部スタイルシート」について説明しました。今回は、一般的に良く使われている「外部スタイルシート」の作り方を説明します。

Contents

ファイルの保存場所
CSSファイルの作り方
1. CSSコードを書く
HTMLファイルからCSSファイルを読み込ませる
Webブラウザーで表示

ファイルの保存場所

外部スタイルシートは、HTMLとCSSのファイルを別々に作成し、CSSファイルをHTMLファイルに読み込ませます。CSSファイルを読み込ますためには、ファイルの保存場所とファイル名を指定しなければなりません。従って、それぞれのファイルの保存場所を決めておく必要があります。

HTML&CSS|ファイルの種類と保存場所

Wedサイトは、主に「HTML」と「CSS」というプログラムと「画像ファイル」で構成されています。ファイルパスを指定するためにファイルの種類と保存場所を適切に。

"Visual Studio Community"の使い方

HTMLとCSSファイルの作成をする前に"Visual Studio Community"の使い方を説明。

※上記の参考記事で作成したHTMLファイルとCSSファイルがあるものとして説明します。（ファイルの保存場所：パターン1）

CSSファイルの作り方

”Visual Studio Community”を立ち上げて「study01」を開くと「index.html」と「style.css」のファイルがあり、「index.html」ファイルには、前回までに記述したコードが残っています。

↓↓前回までの「HTML」ファイルの記述

<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>ステーキハウス</title>
<meta name="description"content="日本で一番美味しい「お肉」の店"/>
</head>
<body>
<h1>サービスランチ</h1>
<p>"サーロインステーキ300ｇ</p>
<a href="https://www.google.co.jp/"target=”_blank”><img src="images/steak.jpg" alt="ステーキ" /></a>
</body>
</html>

↓↓新規に作成したCSSファイル「style.css」の表示画面。（CSSファイルの初期画面）

CSSコードを書く

「style.css」に以下のサンプルコードを書いてみましょう。（※コピペは出来ません）

CSSファイルの1行目には「@charset “UTF-8”;」を書きます。これは、文字化けを防ぐもので必ず先頭に書くと覚えておきましょう。

【サンプルコードの解説】

「body」はセレクターでHTMLファイルの「body」要素を指定。
「background-color」はプロパティで背景の色を指定。
「aqua」はプロパティ値で具体的な色をスタイル付け。
「h1」はセレクターでHTMLファイルの見出し「h1」要素を指定。
「color: blue;」は、それぞれプロパティと値で「青色」を指定。
「p」はセレクターでHTMLファイルの「p」要素を指定。
「color: red;」は文字色を「赤色」に指定。
「font-size: 40px;」は文字の大きさを「40px」に指定。

※コードを書き込む際の記号は↓↓記事を参考にしてください。