CSSの基本的な書き方と外部ファイル化

アイキャッチ画像 初めてのホームページ作成

こちらの記事ではHTMLで書いたプロフィールページに、CSSを使ってページ全体の見た目を変化させる方法を説明しています。CSSの使い方をわかりやすく説明しているので、これからCSSを覚えたい方におススメです。

ご自身でHTMLのページを用意して試しても良いですし、こちらの記事と同じように進めたい方は以下の記事を参考にHTML全文と画像を用意してみて下さい。

▼フォルダー構成と画像

▼HTML文書

CSSをhead内に書く方法

CSSを外部ファイルにして読み込む方法もありますが、それは後ほどご紹介します。基本として最初はHTML文書のhead内にCSSを書いてページの見た目を変えてみましょう。

VScode画面の画像

CSSを使う場合は上のようにhead内styleタグを書きます。このstyleタグの間にページの変化させたい部分を書いて行きます。

VScode画面の画像

色を変化させる方法

VScode画面の画像

まずは、styleタグの間に変化させたい場所(タグ)、{(波括弧)、変化させる内容(今回は色なのでcolor):(コロン)、色の指定でred(今回は赤にします)、;(セミコロン)で最後に、}(波括弧)を閉じます。

<style>
 h1 {
  color: red;
 }
</style>

色の見本が出るのはVisual Studio Codeの仕様です。他のテキストエディタでは出ないものもありますが、ブラウザの表示に影響はでません。

例文(用意したHTML文書)

VScode画面の画像

この文書ではheaderの中にプロフィール名の令和一郎がh1タグで囲まれていますが、先ほどCSSでh1タグをcolor: red;と赤色に指定したのでブラウザではこの部分が赤文字になります。

ブラウザで表示の確認

Chromeブラウザ画面の画像

ブラウザで確認してみると赤文字に変化しています。

HTMLファイルのブラウザ確認方法が分からない方は以下の記事を参考にできます。

セレクターとプロパティ

先ほどh1タグ赤色に変えましたがCSSでは場所(どこに?)の部分をセレクタと呼び、どのようなスタイルにするか?の部分をプロパティと呼びます。

VScode画面の画像

ここでのセレクターh1プロパティcolor: red;になります。h1を赤色にするという指定になります。

CSS外部ファイル読み込み

今度はCSSのファイルを分けて管理する方法をご紹介します。head内に書くのは全然ありなのですが、CSSセレクター/プロパティを沢山書いて行くと見にくくなり管理も大変なってきます。外部ファイルで別管理すると、CSSだけしか書かないのでスッキリして見やすくなります。

linkタグで読み込み

VScode画面の画像

先ほどと同じようにHTMLのhead内に書きます。linkタグ、rel属性でstylesheet、href属性でファイルの場所を指定します。以下のように書きます。

<link rel="stylesheet" href="css/styles.css">

先ほどhead内に書いたセレクターとプロパティーは一旦コメント化していますが、必要ないので消しても構いません。また、コメント化する意味と方法が分からない方は以下の記事を参考にできます。

CSSフォルダーとファイルの作成の一例

Window画面の画像

作業用フォルダーを開いてフォルダーの中で右クリック、新規作成→フォルダーをクリック。

Window画面の画像

フォルダーの名前は半角小文字でcssとします。

※フォルダーをクリックしてキーボードのF2キーを押すと、名前の決め直しができます。

VScode画面の画像

VS Code画面に戻って、画面上のFile → New Fileとクリック。

VScode画面の画像

Untitled-1というファイルができるので、もう一度画面上のFileをクリックしてSaveをクリックします。

Window画面の画像

先ほど作ったcssフォルダーにファイルが入るようにし、ファイル名はstyles.css、ファイルの種類はCSSにして保存します。

VScode画面の画像

VS Codeの画面がこのような感じになっていれば大丈夫です。フォルダーやファイルの作り方は沢山ありますが、ほんの一例として紹介しました。

VS Codeではもっと簡単な作り方もありますが、また別記事でご紹介します。

CSS外部ファイルの書き方

VScode画面の画像

書き方はhead内で書いた書き方とほとんど変わりないですが、stytleタグは必要ありません。

セレクターとプロパティのみになります。linkタグとして読み込みしているので確認の為に今回はカラーをブルーにして検証します。

h1 {
  color: blue;
}

ブラウザ表示の確認

Chromeブラウザ画面の画像

このように青に変化していれば外部ファイルとして読み込んでくれています。

もし上手くいかないようでしたら、フォルダーの名前と位置、ファイル名前と位置が正しく設定されていないか、headタグ内でタグを書き間違っているかだと思うのでもう一度確認をしてみて下さい。

これで基本的なCSSの書き方と外部ファイル化は完了です。

▼こちらの記事で次のステップに進みます

コメント

タイトルとURLをコピーしました