アジェンダ
- CSSを書いてみる
- 外部ファイルに記載
- HTMLファイルのheadタグの中に記載
- HTMLファイルの各タグの中に記載
CSSを書いてみる
以下のindex.htmlに、CSSを使用して見た目を変えてみる。
内容は、以下の三点。
- h1タグで指定している見出しのフォントサイズを20pxにする
- pタグで指定している段落の文字色を灰色にする。
- pタグで指定している段落のフォントサイズを10pxにする。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのCSS</title>
</head>
<body>
<!-- 見出しのフォントサイズを20pxにする. -->
<h1>Lorem Ipsum</h1>
<!-- 段落の文字色を灰色に、フォントサイズを10pxにする. -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
</p>
</body>
</html>
ちなみに、CSS無しだとこんな感じ。
外部ファイルに記載
見た目の編集内容をCSSファイルに記述する。
以下のstyle.cssを作成した。
style.css
h1 {
font-size: 20px;
}
p {
font-size: 10px;
color: darkgrey;
}
そして、CSSを反映させるため、index.htmlにlinkタグを追記する。
index_use_cssfile.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="./style.css">
<title>はじめてのCSS</title>
</head>
<body>
<!-- 見出しのフォントサイズを20pxにする. -->
<h1>Lorem Ipsum</h1>
<!-- 段落の文字色を灰色に、フォントサイズを10pxにする. -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
</p>
</body>
</html>
これをWebブラウザに表示させるとこんな感じ。
見た目を変更することができた。
HTMLファイルのheadタグの中に記載
index.htmlにstyleタグを追記し、見た目の編集内容も記載する。
index_write_head.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのCSS</title>
<style type="text/css">
h1 {
font-size: 20px;
}
p {
font-size: 10px;
color: darkgray;
}
</style>
</head>
<body>
<!-- 見出しのフォントサイズを20pxにする. -->
<h1>Lorem Ipsum</h1>
<!-- 段落の文字色を灰色に、フォントサイズを10pxにする. -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
</p>
</body>
</html>
これをWebブラウザに表示させるとこんな感じ。
見た目を変更することができた(2回目)。
HTMLファイルの各タグの中に記載
index.htmlの各タグにstyle属性を追記し、見た目の編集内容も記載する。
index_write_tag.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのCSS</title>
</head>
<body>
<!-- 見出しのフォントサイズを20pxにする. -->
<h1 style="font-size: 20px;">Lorem Ipsum</h1>
<!-- 段落の文字色を灰色に、フォントサイズを10pxにする. -->
<p style="font-size: 10px; color: darkgray;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br>
</p>
</body>
</html>
これをWebブラウザに表示させるとこんな感じ。
見た目を変更することができた(3回目)。
おわりに
今回は、実際にCSSを書いてみてHTMLファイルの見た目を編集した。
基本的には、CSSファイルを使用することになるだろう。
次回 >> ここ
参考
1-3 style属性によるスタイル適用（はじめてのCSS）
1-4 styleタグによるスタイル適用（はじめてのCSS）
1-5 外部ファイルによるスタイル適用（はじめてのCSS）