2種類あるCSSの導入手順を解説
公開:2019.09.10 更新:2019.10.24

こんにちは、木彫り猫です。

昔の記事を見返していると、まだCSSの導入を書いてないことが分かったので、二種類ある導入手順について解説していこうと思います。

CSSはご存じの通り、HTMLを装飾するものですが、スタイリングをHTMLに関連付ける方法としては、

  • ①HTMLファイルとは別に、拡張子が .css のCSSファイルを作ってそこに記述する方法
  • ②HTMLファイルに直接記載する方法

この二種類あります。では、まず「①別のCSSファイルを作る方法」から解説していきます。

別途にCSSファイルを作る方法

およそ、存在するほとんどのサイトがこちらの方式を採用します。

初心者であれば、こちらの方法だけ覚えておけばとりあえずサイトは作れるでしょう。

手順としては

  • ①拡張子が「.css」のテキストファイルをHTMLと同階層に設置する(ここではほとんどの場合で使用される「style.css」というファイル名にする。)
  • ②CSSファイルの初期記述などはあまりないが、迷うなら文字コード設定である「@charset “utf-8”;」を1行目に書いておくと安心できる。
  • ③HTMLに関連付けるために、HTMLファイルの「headタグエリア」の中に、「linkタグ」を使ってCSSファイルを関連付ける。
  • ④具体的な文 → <link href = “style.css” rel = “style.css”> (rel属性には関連付けたファイルがどんな役割を持っているか記述する。)

これで、指定したCSSファイルをHTMLファイルに関連付けてスタイリングを行うことが出来ます。

後は、CSSにスタイルを書き込んでいけば、HTMLに反映することが出来ます。

CSSの書式などについては過去に書きましたので下記の記事をどうぞ。

HTML&CSSロゴサムネ

CSSとは?HTMLとの関係性について

HTMLファイルに直接記載する方法

先述の別途ファイルを作る方法が一般的ではありますが、わざわざCSSを書きたくないときや、即席で記述する場合はHTMLタグに直接記述する方法もあります。

ただただサイトを作る場合とかだと、あんまり使わないかもしれませんが、HTMLという書式がいろんなところで使われているのもあって、別途のCSSファイルのを用意出来ない環境なんかでも役に立つ知識ですので、知っておいても損は無いでしょう。

やり方としては、HTMLタグのグローバル属性として使われる、style属性を使ってスタイリングをしていきます。

書式としては

<p style="color:red;font-size:20px;border-bottom:1px solid blue;width:300px;text-align:center;">君はスタイリングしてるかい?</p>

上記のように、ほとんどCSSファイルに書き込んでいるものと同じような感じになります。


上記コードの出力例↓

君はスタイリングしてるかい?


注意点として、こっちの方が楽やんけ!とかいって、CSS外部ファイルの方で基本的な形を作っていないと、後で改修したり、見直したりするときにとんでもなくごちゃごちゃして見にくくなるので、こちらの方法はあくまで緊急の時や、HTMLしか使えないときだけにしておきましょう。

まとめ

さて、今回はCSSスタイリングの関連付け方法について解説してみました。

とはいっても、ここらの方法はとっても基本的な事柄なので、これらを研究する暇があったら、一行でも多くCSSを打ち込んでいった方が、「体で覚える」感じで早いと思います。

それでは、スタイリングを楽しんでいきましょう~!

おすすめ商品

一から勉強する際に使った教材

持っていると便利なHTML&CSS辞典

コメント

内容をご確認の上、送信してください。