【HTML】HTMLにCSSを読み込ませる方法【CSS】

ブレインキャット

WebサイトをHTMLで作成した際に、CSSの扱いも必須となりますよね。
CSSの読み込み方法を学んでいきたいと思います！

CSSの読み込み方法は、HTMLファイルを別にCSSファイルを作成して、読み込むパターンと、HTMLファイルに直接書き込む方法があります。

ブレインキャット

基本的には、HTMLファイルとは別で作成し読み込ませる方法が主流です。

【HTML】HTMLファイルを作成にあたっての基本とは！設定しておくことetc... ブレインキャット今回はHTMLファイルを作成するにあたって設定しておくべき基本的項目をまとめておこうと思います！ HTM...

CSSファイルを外部ファイルとして読み込む方法
CSSをHTMLファイルに直接書き込む方法
まとめ

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

HTMLファイルにCSSファイルを読み込むには、HTMLファイルの中の<head>~</head>部分に、以下を書き込みます。

<link rel="stylesheet" href="CSSファイルパス">

1	<link rel="stylesheet" href="CSSファイルパス">

具体的にはこんな感じで書きます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <title>記事のタイトル</title>
    </head>
    <body>
         <!--記事の内容-->
    </body>
</html>

<!DOCTYPE html>

<head>

<title>記事のタイトル</title>

</head>

<body>

</body>

</html>

上記の書き方だと、HTMLファイルと同階層にcssフォルダを作成し、その配下に「style.css」を配置する形になります。

ブレインキャット

この書き方は基本となるので、覚えていきましょう！

CSSをHTMLファイルに直接書き込む方法

HTMLの中にCSSを直接書き込む方法もあります。
やり方としては、HTMLファイルの中の<head>~</head>部分に、<style>~</style>を追加することで実現可能です。

<html lang="ja">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            <!--cssの内容-->
        </style>
        <title>記事のタイトル</title>
    </head>
    <body>
         <!--記事の内容-->
    </body>
</html>