【CSS】簡単！CSSファイルをHTMLファイルに組み込む方法

こんにちは！最近バイクに再びハマりつつあるmaythamです。

今回は、CSSファイルを作成してHTMLファイルに組み込んでみようと思います。

CSSって何？って初心者の人は思うかもしれないので、はじめにわかりやすく解説も入れながら進めていきます。

そもそもCSSとは？
CSSで何ができるの？
HTMLファイルにCSSファイルを組み込む
あとがき

そもそもCSSとは？

それでは、CSSの説明から入ります。

CSSって何？また、CSSって聞いたことはあるけど、実際に何をするの？と初心者の方は思うかもしれません。

大丈夫です、僕も社会人１年目の時はそうでした。CSS？スタイルシート？は？って感じで全然理解ができていませんでした。

では、CSSについてです。まず、CSSとは何か。

簡単にいうと、スタイルを変更できる言語です。

HTMLでウェブサイトを構成し、サイトの見た目を修飾するためにCSSを使用する、といった感じです。

CSSで何ができるの？

次に、具体的にCSSで何ができるかの説明です。

CSSで何ができるか。例えば<p>タグで書いていた文章があったとして、その要素を右寄せにしたいとすると、CSSで align=right; と設定することで右寄せになります。

このように、要素の位置の調整や背景色の変更等、見た目を変更することができます。

HTMLファイルにCSSファイルを組み込む

前にHTMLファイルを作成する記事を書きました。

今回は、これで作成したHTMLに、新しくCSSを組み込んで動かしてみます。

（↓以前はWindowsで作成していましたが、今回はMacで作成し直しています。）

HTMLをフォルダに格納する

まずは、↑で作成していたHTMLファイルを新しいフォルダに格納します。

※作成したHTMLファイルと同じ階層にCSSファイルを配置するため。

これでOKです！

CSSファイルを同じ階層に作成する

次に、同じ階層にCSSファイルを配置します。

あとで中身を書くので、現状は空のファイル(.css)で大丈夫です。

このように、同じ階層に配置をしてあげてください。

HTMLとCSSを紐付ける

それでは、紐付けに入ります。

まずはHTMLです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HTML作成</title>
  </head>
  <body>
    <h1>HTMLを作成しています</h1>
  </body>
</html>

このようになっているものを、以下のように変更してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HTML作成</title>
    <link rel="stylesheet" href="CSS練習.css">
  </head>
  <body>
    <h1 class='title1'>HTMLを作成しています</h1>
  </body>
</html>

次に、CSSです。今回は、「CSS練習.css」という名前で作成しています。