基礎から学ぶ!HTMLにCSSを適用させる方法【初心者向け】

初心者向けにHTMLにCSSを適用させる方法について解説しています。Webサイトを作っていく上でHTMLとCSSは必ず使います。その中でCSSを扱う方法について詳しく説明しているので、ぜひ使えるようにしておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

基本的にHTMLだけでは文字を表示するだけで、リッチなデザインが整ったWebデザインを制作することは難しいです。

そんな時に必要になってくるのがCSSです。HTMLでCSSを読み込むためには、二つの方法があります。

今回は、その方法について解説していきたいと思います。

HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

外部ファイルで指定する方法

まずは外部ファイルで作成した、CSSファイルをHTML内で読み込む方法について解説していきたいと思います。

<link rel="stylesheet" type="text/css" href="example.css">

上の例のように、linkタグでそれぞれCSS用の要素を指定します。hrefの部分でcss名を指定するとそのcssが読み込まれるようになります。

このlinkタグはhtml内のhead部分で読み込むのが一般的です。

またファイル名の部分は以下のように、パスで指定することも可能です。

"~/css/example.css"

プロジェクトが大きくなるとファイルが肥大化していくため、ファイル分けも大事になってきます。

 

大石ゆかり

HTMLなのに外部からファイルを読み込めるんですねー!

田島悠介

そうだよ。rel属性、type属性、href属性は決まってる書き方なんだ。

大石ゆかり

外部から読み込んだ方がいいんですか?

田島悠介

ファイルを分けた方がソースコードの見通しが良くなるんだよ。さらに、複数ページで使用している場合、一括で変更することも出来るよね。

 

HTMLファイル内でCSSを適用する方法

次にHTMLファイル内に直接CSSを記述する方法について解説していきます。ファイルに分ける必要もないような細かい修正を行う際に使用します。

以下のようにstyleタグを使用して、styleタグ内に記入していきます。

<style type="text/css">
  //CSSの記述
</style>

 

大石ゆかり

styleタグで、そのページにCSSの定義を書くことも出来るんですね。

田島悠介

そうだよ。基本的にはheadタグ内に書いた方がいいかな。

大石ゆかり

外部ファイルから読み込んだCSSとstyleタグで定義したCSSが重なった場合はどうなるんですか?

田島悠介

基本的には内側に書いたものが優先されるんだ。タグに直接書いたCSSが最優先で適用されるんだよ。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは実際にCSSをHTMLに適用させていきます。文字を大きくするサンプルを作っていきましょう。

まずは直接埋め込む方法からです。

#sample.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style type="text/css">
      p{
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <p>サンプル</p>
  </body>
</html>

次に別ファイルに分けて読み込む方法です。

#sample.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
    <link rel="stylesheet" type="text/css" href="example.css">
  </head>
  <body>
    <p>サンプル</p>
  </body>
</html>

#example.css

p{
  font-size: 40px;
}

どちらの方法でも文字が大きくなっている(フォントサイズ40になっている)ことが確認できれば成功です。

 

まとめ

今回はCSSをHTMLに適用する方法を2パターン紹介していきました。

実際のWebデザインんの現場では、二つのファイルに分けてHTMLとCSSを適用する方法が一般的ですが、どちらの方法も使いこなせるようにしておくと、記述の幅が広がります。

是非どちらの方法でもCSSを読み込めるようにしておきましょう。

 

大石ゆかり

文字がかなり大きく表示されてますね。

田島悠介

どちらも、pタグそのものに適用しているんだ。

大石ゆかり

pタグがあって、font-size:40pxって書かれてますね。

田島悠介

全てのpタグに適用していて、pタグの中のフォントの大きさを40pxにするっていう意味なんだよ。

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。