アジェンダ
- CSSを書いてみる
- 外部ファイルに記載
- HTMLファイルのheadタグの中に記載
- HTMLファイルの各タグの中に記載
CSSを書いてみる
以下のindex.htmlに、CSSを使用して見た目を変えてみる。
内容は、以下の三点。
- h1タグで指定している見出しのフォントサイズを20pxにする
- pタグで指定している段落の文字色を灰色にする。
- pタグで指定している段落のフォントサイズを10pxにする。
index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="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><htmllang="ja"><head><metacharset="UTF-8"><linktype="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><htmllang="ja"><head><metacharset="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><htmllang="ja"><head><metacharset="UTF-8"><title>はじめてのCSS</title></head><body><!-- 見出しのフォントサイズを20pxにする. --><h1style="font-size: 20px;">Lorem Ipsum</h1><!-- 段落の文字色を灰色に、フォントサイズを10pxにする. --><pstyle="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）