CSSの読み込みについて!


結論!

CSSファイルの読み込みはHTMLのhead要素の中で行うこと!

link要素を用いてHTMLファイルからCSSファイルを読み込むことが出来ます!

以上が答えだと思います!

では、細かく書いていきたいと思います!

①.HTMLからCSSを呼び出す!

CSSファイルを呼び出すためには、head要素内に以下のような記述をします!

 <link rel="stylesheet" href="style1-1.css">

これでCSSファイルが適用されます!

②.link要素・rel属性・href属性について!

・link要素は現在のファイル(HTML)から外部情報(今回であればCSSファイル)を

関連付けする際に記載します!

rel属性、href属性と一緒に使用するのが一般的です!

・rel属性はRelation(関係)の略です!

参照先のファイルが現在のファイルとどのような関係であるのかを明らかにします!

属性値には決められたキーワードを記載します!

今回の例では”stylesheet”というキーワードを指定することでCSS(Cascading Style Sheets)を

参照することを表しています!

・href属性はHyper Referenceの略です!

参照先の外部ファイルの場所を明らかにします!

属性値にはファイルの場所、ファイル名を記載します!

以下の例のように記述して適用させます!

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML勉強用ウェブサイト</title>
   <link rel="stylesheet" href="style1-1.css">
  </head>
  <body>
    <h1>
      ここは見出しです
    </h1>
    <p>
      1つ目の段落
    </p>
    <p>
      2つ目の段落
    </p>
    <p>
      3つ目の段落<b>この部分は太字になる</b>
    </p>
      <a href="https://www.google.com/">クリックするとGoogleへアクセスします</a>
  </body>
</html>

これで完成です!

まとめ

形式とHTMLのhead要素の中で行うことを忘れずにすれば大丈夫かなと思います!

ここは本当に最初の段階ですからね^^;

次回はCSSの細かい記述について書いていきます!

何か説明で間違っていたらご指導お願い致します(_ _)