HTMLから始めたものの、レイアウトを調整するCSSはどこに書けばいいのか、何パターンか書き方があるので紹介します。
CSSの記述する場所
HTMLのプログラム内に記述する1
<!DOCTYPE html>
<html lang="jp"> <!--en（英語）ではなく、ja（日本語）でもOK-->
<head>
<!-- ファイルをHTMLで保存⇒最初の行に「！」を打つ⇒Enter⇒雛形が記述される-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ホームページのタグに表示されるタイトル-->
<title>ページタイトル</title>
<style>
h1 {color: red; }
</style>
</head>
<body>
<h1>タイトルの表示</h1>
<p>本文の表示</p>
</body>
</html>
11～13行目の
<style>
h1 {color: red; }
</style>
によって、h1のスタイルで表示されるテキストのスタイルを一律で変更した。
サイトでは下記のように見える
タイトルの表示
本文の表示
HTMLのプログラム内に記述する2
<!DOCTYPE html>
<html lang="jp"> <!--en（英語）ではなく、ja（日本語）でもOK-->
<head>
<!-- ファイルをHTMLで保存⇒最初の行に「！」を打つ⇒Enter⇒雛形が記述される-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ホームページのタグに表示されるタイトル-->
<title>ページタイトル</title>
</head>
<body>
<h1>タイトルの表示</h1>
<p style="color: red;">本文の表示</p>
</body>
</html>
16行目の
<p style="color: red;">本文の表示</p>
によって、pで囲まれたテキストの表示スタイルを変更した。
サイトでは下記のように見える
タイトルの表示
本文の表示
CSS用に別のファイルを用意して記述する
最初に注意点としてHTMLファイルとCSSファイルは同じ階層に保存してください。
HTMLファイルは下記の通りです
<!DOCTYPE html>
<html lang="jp"> <!--en（英語）ではなく、ja（日本語）でもOK-->
<head>
<!-- ファイルをHTMLで保存⇒最初の行に「！」を打つ⇒Enter⇒雛形が記述される-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ホームページのタグに表示されるタイトル-->
<title>ページタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>タイトルの表示</h1>
<p>本文の表示</p>
</body>
</html>
11行目の
<link rel="stylesheet" href="style.css">
で、CSSファイルと結びつけています。
次に、下記がCSSファイルです。ファイル名は「style.css」です。
h1{
font-size:100px;
}
これを保存してHTMLファイルの方でWebサイトを見てみると下記のようになります。
タイトルの表示
本文の表示
CSS よく使う表現
まず、HTMLファイルの方が次のようになっているものとします。
<!DOCTYPE html>
<html lang="jp"> <!--en（英語）ではなく、ja（日本語）でもOK-->
<head>
<!-- ファイルをHTMLで保存⇒最初の行に「！」を打つ⇒Enter⇒雛形が記述される-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ホームページのタグに表示されるタイトル-->
<title>ページタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<a href="https://www.alluring-master.com/"><img src="画像/Alluring.png" alt="タイトルロゴ" width="240" height="80"></a>
<!-- サイズとカラーを両方指定する 段落を分ける-->
<p>サイトの説明文</p>
</header>
<nav>
<a href="https://www.alluring-master.com/">ホーム</a>
<a href="ここにURLを記載" target="_blank">利用にあたり</a>
</nav>
<div align="center">
<h2>本文タイトル</h2>
<p>詳細な内容を記載</p>
</div>
<footer>
<p>© サイト名</p>
</footer>
</body>
</html>
実行結果
実際のプログラム
実行結果
実際のプログラム
実行結果
コメント