[初心者用]CSS(スタイルシート)の基本的な書き方をwebデザイナーが解説

2019年8月3日 2021年12月12日

xxsuguruxx

Webサイトを作成する際、HTMLだけでは色のない単調なサイトが出来上がってしまいます。

そこでCascade Style Sheet (カスケイド・スタイル・シート)、通称CSS、を一緒に使ってあげるだけで華やかなサイトに仕上げることができます。

ではこのCSSをどのようにしてHTMLのファイルに取り込むのでしょうか。

その方法は3つあります。

CSSを外部ファイルとして読み込む方法
インファイルに記載する方法
インラインで記載する方法

の3通りです。

それぞれを詳しく見ていきましょう。

合わせて読みたい

CSS3とは？初心者必見！プロパティ、セレクタ、バージョン、文法など

2019.8.18

あらすじ CSSとはどのような言語で、どのような働きをするものなのでしょうか。今回はそんな疑問にお答えするべく、CSSという言語について詳しく解説していきたいと思います。具体的には CSSとは CSSの文法 CSSのバージョン CSSプロパティの代表例といった項目に分けてご紹介していきます。...

CSSを外部ファイルとして読み込む方法

概要

他の2つの方法とは大きく異なる要素として、HTMLを記載したファイルとはまた別のファイルを作成しなければいけないところです。

どういうことかというと、

HTMLが書いてあるファイル
CSSが書いてあるファイル

の2つ別々に用意するということです。

方法

2つのファイルを作成し、それぞれHTMLとCSSを記載し保存しておきます。

そして、HTMLのファイル内に別ファイルのCSSを指定してあげるだけでHTMLにCSSが反映されるようになります。

コード

具体的に外部のCSSファイルを指定してあげるコードは下記になります。

<!DOCTYPE HTML>
<head>
    <link rel=”stylesheet” type=”text/css” href=”index.css”>
</head>

と<head>タグ内に<link>タグでCSSの詳細を記載します。

rel属性でリンク先との関係性を記載し、type属性でファイルの種類を記載します。

そして、href属性で具体的なファイルの場所を指定してあげます。

メリット

複数のHTMLファイルに反映することができる
見栄えがよく、見やすい

デメリット

ファイル管理が増える
パスを間違えると反映されない

インファイルとして記載する方法

概要

インファイルとは外部ファイルの逆で、in(イン)+file(ファイル)で直訳すると「ファイルを中に入れる」となります。

まさにその通りで、外部ファイルとは逆のことをすればいいだけです、

方法

具体的には、CSSで記載したいことを<head>タグ内にすべて記載するだけです。

コード

文字だけではわからない方もいると思うので実際にコードで見ると下記のようになります。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      P {
        color:red;
      }
    </style>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

といった具合に、<p>タグ内の要素を指定し、色を赤に変更するコードを<head>タグ内に記載することでCSSを反映する方法がインファイルでの指定方法です。

メリット

一つのファイルで済むのでファイルが多くならない
CSSを記載するためにいちいちファイルを移動しなくてすむ

デメリット

HTMLファイル内の量が多くなる
見栄えが悪くなる

インラインに記載する方法

概要

インラインとは外部ファイルやインファイルとは違い直接タグに記載する方法です。

In(イン)line(ライン)で「ラインに入れる」という訳にできることから、行に直接記載するという意味を持ちます。

方法

外部ファイルやインファイルではclass(クラス)やid(アイ・ディー)といった属性を使って変更したい要素を指定していましたが、インラインでは直で変更したいタグにstyle属性を記載します。

コード

実際に記載する方法は下記のようになります。

<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>
    <p style=”color:red;”>Hello World</p>
  </body>
</html>

<head>タグ内には何も記載せず、<p>タグの中に直接style属性を書いています。

これによって<p>タグ内の「Hello World」は赤色の文字になります。

メリット

それぞれの要素に細かくCSSを記載できる
一つのファイルで済むのでファイルが多くならない

デメリット

HTMLファイル内の量が多くなる
インラインは記載したタグにしか反映されないため、他のタグでも反映したい場合はいちいち記載する必要がある

3つの方法を比較してみて

優先度

この3つの方法を同時に使うことはできますが、その際、どの方法が一番優先度が高いのでしょうか。

それは、タグに直接書き込むインラインでの記載方法が一番優先されます。

その次にインファイル、そして、外部ファイルと続きます。

わかりやすく書くと

インライン
　　
インファイル
　　
外部ファイル

となります。

推奨されている方法

一番推奨されている方法は外部ファイルでCSSを反映する方法です。

その理由として、複数のHTMLにCSSファイルを反映することができるということと、後で変更がききやすいということが挙げられます。

まとめ

いかがだったでしょうか。

正直インファイルに関してはあまり見る機会はないですが、方法は覚えておくことをおすすめします。

覚えておくことで、万が一外部ファイルがリンクできなかったり、ファイル自体が消えてしまった時にはこのインファイルでの記載方法を使うことができます。

以上ファイルの反映方法でした。

合わせて読みたい

headタグ内に記載するものとは?title,link,meta,style,scriptタグ等

2019.8.16

あらすじ <head>タグとは、実際のウェブ(web)ページには表示されませんが、ページの重要なデータを記載する場所です。例えば、CSSを外部ファイルから引っ張ってくるときには<head>タグ内に<link>タグを記載したり、ウェブページ全体の文字コードを決める...

この記事を書いた人

xxsuguruxx

ネットワークエンジニアからウェブデザイナーへ。オーストラリアに在住2年目。現在ウェブデザイナーとして活動しております。ウェブデザインやプログラミング、英語に関する有益な情報を提供してきます。