htmlって何？！ 初心者のためのウェブサイト作成教室

スタイルシートの設定

スタイルシートの設定の方法は２種類あります。 ページ内にまとめて設定する方法と、外部ファイルにまとめて設定する方法です。

ページ内にまとめて設定

1ページ内に全ての設定を記載する方法の説明です。

<html>
<head>
<title>ウェブサイトのタイトル</title>
<style type="text/css">

h1 { color: #0000ff; }
p { color: #ff0000; }

</style>
</head>
<body>

<h1>見出し1</h1>

<p>文章</p>

</body>
</html>

 

<style type="text/css> スタイルシートを記述するためのタグです。
color 文字の色を指定します。
#XXXXXX カラーコードです。red などのカラーネームでも可能です。

 

表示はこのようになります。

 

見出し1

文章

 

 

カラーコードは検索すればすぐ分かると思いますが、標準のものを載せておきます。

色 赤 青 黄 緑 白 黒
カラーネーム red blue yellow green white black
カラーコード #ff0000 #0000ff #ffff00 #008000 #ffffff #000000

 

外部ファイルにまとめる

外部にまとめると、外部にリンクした各ページに同じ内容が反映され、 同じことを記述する必要がなくなり、タグの見た目もスッキリします。

<html>
<head>
<title>ウェブサイトのタイトル</title>
<link rel="stylesheet" type="text/css" href="ファイル名.css" />
</head>
<body>

<h1>見出し1</h1>

<p>文章</p>

</body>
</html>

<style type="text/css"> から </style> に書いた内容を、別の新しいメモ帳に張り付けて、保存します。拡張子は、 .css です。

次に、スタイルシートを記載していたところに、
<link rel="stylesheet" type="text/css" href="ファイル名.css">
を追加します。