これまでHTMLについて学んできました。
このHTMLはマークアップ言語であるということは、これまでの解説で理解頂けると思います。
そして今回からは、HTMLでマークアップした記事に装飾するCSSの言語を実際に使ってみましょう。
✅VSCodeを使ってCSSファイルを作る方法
✅CSSをコーディングすることで文字を装飾する
HTMLについては以下の記事で復習できるので分からない方は、そちらの記事から参照して下さい。
それでは早速、CSSを使ってみましょう。
CSSを使ってみる
CSSの言語を使う為には、３つの方法があります。
３つの方法については、以下の通りです。
- stye属性を使ってCSSを書く
- header内にCSSを書く
- 外部にCSSファイルを作成してCSSを書く
この３つの方法の内、今回は『外部にCSSファイルを作成してCSSを書く』方法について解説したいと思います。
まずはHTMLで記事を書いておく。
まずはHTMLで記事を作成しておきます。
今回は以下のように、HTMLで記述した記事を作成しておきました。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
</head>
<body>
<h1>CSSを学ぶ。シリーズ</h1>
<p>CSSを使うには３つの方法があります。</p>
<h2>stye属性を使ってCSSを書く</h2>
<p>これまで学んだHTMLのスキルを応用して記述する方法になります。</p>
<h2>header内にCSSを書く</h2>
<p>この方法はheader要素内にCSSを記述していく方法になります。</p>
<h2>外部にCSSファイルを作成してCSSを書く</h2>
<p>この方法は外部にCSSファイルを作成してCSSを記述する方法になります。</p>
</body>
</html>
この記事をブラウザで表示するとどうなるか想像できますか？
想像出来るようであれば、大分HTMLを使いこなせてきている証拠です。
答えは以下のようになります。
VSCodeを使って外部にCSSファイルを作成してCSSを書く
以前までの方法では、あらかじめ準備していたHTMLファイル内にCSSを記述していく方法でした。
今回はVSCodeを使ってCSSファイルを作成し、CSSファイル内にコーディングしていく方法になります。
CSSファイルを作成する前準備
今回はVS Codeを使用してCSSファイルを作成します。
VS Codeについては、以下の記事を参考にしていただけると理解頂けます。
そしてVS Codeの導入方法については以下の記事を参考にして下さい。
もちろん、PCに標準で入っているメモ帳を使用しても結構です。
その際は拡張子を『●●.css』と作成して下さい。
これは以前、HTMLファイルを作成した方法と同じです。
その方法については、以下の記事を参考にして下さい。
CSSファイルを作成する。
それではCSSファイルを作成していきましょう。
まずはHTMLファイルの入っている、同じフォルダ内にCSSファイルを作成することを前提として今回は解説します。
VS Codeを開きます。
そしてエクスプローラーを開きます。
次にフォルダーを指定します。
そして次にHTMLファイルの入っているフォルダを指定して開きます。
※今回は『ぱくぱくの解説ページ』フォルダ内に、HTMLファイルを作成しています。
次にファイル追加のアイコンをクリックします。
そしてそのまま『style.css』と入力して、CSSファイルを作成します。
この時『●●.css』とすることで拡張子がCSSとなり、CSSファイルとして認識されます。
VS Codeの上部にCSSタグが作成されていたら、CSSファイルの作成は完了です。
ついでにフォルダ内も見てみましょう。
CSSファイルが作成できていることが確認できます。
CSSを書いていく。
それでは出来上がったCSSファイルに、CSSを書いていきましょう。
今は何も書いていないので、ファイル内は空白だと思います。
そこに以下のように記述してみて下さい。
h1 {
color: blue;
}
そして保存して、HTMLファイルをブラウザで確認してみましょう。
あれ？全く変化がありません。
しかし、心配ご無用です。
これはHTMLファイルとCSSファイルの関連付けがされていない為です。
それではHTMLファイルとCSSファイルの関連付けをしていきましょう。
これには『linkタグ』を使用します。
HTMLファイルを開いて、以下の内容をhead内に記述してみましょう。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>CSSを学ぶ。シリーズ</h1>
<p>CSSを使うには３つの方法があります。</p>
<h2>stye属性を使ってCSSを書く</h2>
<p>これまで学んだHTMLのスキルを応用して記述する方法になります。</p>
<h2>header内にCSSを書く</h2>
<p>この方法はheader要素内にCSSを記述していく方法になります。</p>
<h2>外部にCSSファイルを作成してCSSを書く</h2>
<p>この方法は外部にCSSファイルを作成してCSSを記述する方法になります。</p>
</body>
</html>
そしてこのHTMLファイルを保存して、ブラウザで確認してみましょう。
いかがですか？
h1タグの部分が青文字になりました。
このようにHTMLファイル内に、どのCSSファイルを読み込むのかを宣言しないとCSSファイルは機能しません。
<link rel=”stylesheet” type=”text/css” href=”style.css”>
・リンクでstylesheet（スタイルシート）を使用します。
・タイプはテキストとCSSです。
・リンク先はstyle.cssです。
ここは頻繁に使用するので、覚えておきましょう。
それでは引き続きCSSファイルに記述していきましょう。
次はh2タグの文字を、赤色にしてみましょう。
記述内容は以下の通りです。
h1 {
color: blue;
}
h2 {
color: red;
}
そして、ブラウザで確認します。
いかがでしょうか？
外部にCSSファイルを作成して記述（コーディング）する方法は理解出来たでしょうか。
この方法はオーソドックスに使用されている方法なので是非覚えておきましょう。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
