CSSを学ぶ。外部にCSSファイルを作成してCSSを書く。

CSSを学ぶ。外部にCSSファイルを作成してCSSを書く。

これまでHTMLについて学んできました。

このHTMLはマークアップ言語であるということは、これまでの解説で理解頂けると思います。

そして今回からは、HTMLでマークアップした記事に装飾するCSSの言語を実際に使ってみましょう。

期待できるスキルアップ

✅VSCodeを使ってCSSファイルを作る方法

✅CSSをコーディングすることで文字を装飾する

HTMLについては以下の記事で復習できるので分からない方は、そちらの記事から参照して下さい。

それでは早速、CSSを使ってみましょう。

Advertisement

CSSを使ってみる

CSSの言語を使う為には、3つの方法があります。
3つの方法については、以下の通りです。

  • stye属性を使ってCSSを書く
  • header内にCSSを書く
  • 外部にCSSファイルを作成してCSSを書く

この3つの方法の内、今回は『外部に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を使うには3つの方法があります。</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を使うには3つの方法があります。</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を学ぶ。シリーズはこちら

CSSカテゴリの最新記事