文字だけホームページに色をつける!
さて前回は、文字だけのホームページを作成してみた。
今回は、そのホームページに色を施してみようと思う!いわば装飾。
白と黒だけじゃあ、ちょっとさみしい。簡素だし、見ていてあまり楽しくない。
なので、CSSという見た目のデザインを変える機能を加えてみることにする。
フロントエンドの人がよく使用するらしい。
ざっと、CSSはどんなものかを説明する。
CSSとは、Cascading Style Sheetsの略で、デザインやレイアウト変更する際に用いられる。
さらに言うと、CSSなしで作られたHTMLは、質が高いと言われるらしい。ほう。
で、HTMLにCSSを加えるときに、直接HTMLファイルに書き加えてもOKだけど、
たくさんCSSを記述するとなると、コードが長くなり、HTMLが見にくくなってしまう。
そういう時に、HTMLファイルはそのままで、CSSファイルを別に作ることもできる!
さらに、独立したCSSファイルを作ることによって、他のHTMLファイルにも適用させることが可能になるのだ💡
じゃあ別途CSSファイルを作ったほうがよくない?と思ったんで、筆者は後者の方法でCSSファイルを作成することにした。
しかし今回は、HTMLファイルにCSSを埋め込む方法と、HTMLファイルとCSSファイルを別にして書く方法の二つを紹介する。
まずは、HTMLファイルにCSSを埋め込む方法。
さっそくHTMLにCSSを埋め込んでみたコードを見てみよう。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>今期watchingのドラマ</title> <!--titleの下にCSSを書いていく↓--> <style type="text/css"> body { background: pink; color: black; margin-left: 2em; margin-right: 2em; } h1 { background: magenta; color: white; font-size: 1.5em; } h2 { font-size: 1.2em; color: #FF1493; } p { line-height: 1.5em; } a:link { color: blue; } a:visited { color: purple; } a:hover { color: skyblue; } a { text-decoration: none; } </style> <!--styleタグで囲ったところまでがCSS↑--> </head> <body> <h1><現在視聴中の夏ドラマ></h1> <h2>◎高嶺の花 (日本テレビ 水曜よる10時)</h2> <p>石原さとみがきれいすぎる!目の保養!演技が石原さとみだけど、それでいいのだ。かわいいから(笑)</p> <b> <p><出演者></p> </b> <!-- オーソドックスな箇条書きの書き方 --> <ul> <li>石原さとみ</li> <li>峯田和伸</li> <li>芳根京子</li> <li>千葉雄大</li> <li>小日向文世</li> <li>戸田菜穂</li> <p>and more...</p> </ul> <p>公式サイト: <a href="https://www.ntv.co.jp/takanenohana/" target="blank">https://www.ntv.co.jp/takanenohana/</a> </p> <!--これでもOK↓ <p>公式サイト: <a href="https://www.ntv.co.jp/takanenohana/" target="blank">高嶺の花 公式HP</a> </p>--> <h2>◎サバイバル・ウェディング (日本テレビ 土曜よる10時)</h2> <p> <a href="http://www.ntv.co.jp/momifuyu/" target="blank">もみ消して冬</a>のドSキャラの波瑠も好き。こちらはザ・ドラマって感じだけどおもしろい</p> <b> <p><出演者></p> </b> <!-- 上の箇条書きの書き方だとちょっと見づらいので、<p>で改行を入れてみた --> <ul> <p> <li>波瑠</li> </p> <p> <li>伊勢谷友介</li> </p> <p> <li>吉沢亮</li> </p> <p> <li>高橋メアリージュン</li> </p> <p> <li>風間俊介</li> </p> <p>and more...</p> </ul> <p>公式サイト: <a href=" https://www.ntv.co.jp/survival-wedding/ " target="blank">https://www.ntv.co.jp/survival-wedding/</a> </p> <h2>◎探偵が早すぎる (日本テレビ 木曜よる11:59)</h2> <p>滝藤賢一の演技と声が好きなのと、広瀬アリスの演技と展開に期待してみてる。</p> <p>意外と水野美紀の役柄にハマる</p> <p>公式サイト(滝藤さんちょっとうるさいw): <a href="http://www.ytv.co.jp/tantei/ " target="blank">http://www.ytv.co.jp/tantei/"</a> </p> </p> <h2>◎義母と娘のブルース (TBS 火曜よる10時)</h2> <p>なんでその展開に至ったのかは未だ定かではないが、今後の展開に期待して一応みてる感じ</p> <p>公式サイト: <a href="http://www.tbs.co.jp/gibomusu_blues/" target="blank">http://www.tbs.co.jp/gibomusu_blues/</a> </p> <h2>◎チア☆ダン (TBS 金曜よる10時)</h2> <p>高校生活での青春というものが過ぎてしまった身だけど、まあまあ面白いかな、で観てる(笑)</p> <p>意外と涙腺が緩くなるときがある</p> <p>公式サイト: <a href="http://www.tbs.co.jp/cheerdan_tbs/" target="blank">http://www.tbs.co.jp/cheerdan_tbs/</a> </p> <h2>◎グッドドクター (フジテレビ 木曜よる10時)</h2> <p>山崎賢人の演技が素晴らしい。藤木直人は <a href="http://www.ntv.co.jp/himono/index.html" target="blank">ホタルノヒカリ</a>での、ぶちょお役がとてもどストライクで好きだったけど、</p> <p>今は悪そうな役多いからあれだけど、内容は見応えがある!涙腺が緩くなるドラマ</p> <p>公式サイト: <a href="http://www.fujitv.co.jp/gooddoctor/" target="blank">http://www.fujitv.co.jp/gooddoctor/</a> </p> <h2>◎健康で文化的な最低限度の生活 (フジテレビ 火曜よる9時)</h2> <p>興味本位でみてみた。そして個人的に春ドラマ満足度ナンバーワンの <a href="http://www.tv-asahi.co.jp/ossanslove/" target="blank">おっさんずラブ</a>のはるたんが出てる♪ <p>それと、 <a href="http://www.tbs.co.jp/unnatural2018/" target="blank">アンナチュラル</a>の中堂さんとは正反対な役柄をする井浦新さんにも注目!</p> </p> <p>公式サイト: <a href="https://www.ktv.jp/kbss/index.html" target="blank">https://www.ktv.jp/kbss/index.html</a> </p> <h2>◎絶対零度 (フジテレビ 月曜よる9時)</h2> <p>月9枠。シリーズ?になってるみたいで、はじめてみたけど、超面白い。初回の本田翼がかっこよすぎた…</p> <p>そして最近の月9は波に乗ってきてる気がする。前回の <a href="https://www.fujitv.co.jp/confidenceman_jp/" target="blank">コンフィデンスマンJP</a>もよかったし。個人的な意見だけどね笑</p> <p>公式サイト: <a href="http://www.fujitv.co.jp/zettaireido/index.html" target="blank">http://www.fujitv.co.jp/zettaireido/index.html</a> </p> <!-- なんとなく水平線を入れてみた --> <hr> <h1><これから放送の気になるドラマ></h1> <h2>◎dele 初回7/27(テレビ朝日 金曜よる11:15)</h2> <p>演技力が素晴らしい山田孝之がどんな役をやるのか…興味津々</p> <p>公式サイト: <a href="http://dele.life/" target="blank">http://dele.life/</a> </p> <h2>◎ヒモメン 初回7/28(テレビ朝日 土曜よる11:15)</h2> <p>窪田正孝がヒモ男をやる! <a href="https://www.ktv.jp/bokuyari/index.html" target="blank">僕たちがやりました</a>以来?内容がおもしろそう!</p> <p>公式サイト: <a href="http://www.tv-asahi.co.jp/himomen/#/?category=drama" target="blank">http://www.tv-asahi.co.jp/himomen/#/?category=drama</a> </p> </body> </html>
それではCSSの書き方を説明していく。styleタグで囲ったこの部分。
<style type="text/css"> body { background: pink; color: black; margin-left: 2em; margin-right: 2em; } h1 { background: magenta; color: white; font-size: 1.5em; } h2 { font-size: 1.2em; color: #FF1493; } p { line-height: 1.5em; } a:link { color: blue; } a:visited { color: purple; } a:hover { color: skyblue; } a { text-decoration: none; } </style>
上から順に何をしているのか詳しくみていく。
<style type="text/css"> body { background: pink; color: black; margin-left: 2em; margin-right: 2em; }
CSSはまずstyleタグで囲む。
そして、style type="text/css"はお決まりの書き方。必ずこう書く。
bodyとは、HTML全体の部分。
background(背景色):薄いピンク
color(文字色):黒
margin-left(ページ左側の余白):少しだけ(説明しにくいので、あとで表示結果貼ります笑)
margin-right(ページ右側の余白):少しだけ
h1 { background: magenta; color: white; font-size: 1.5em; }
h1は、一番大きい見出し部分。
background(背景色):濃いピンク
color(文字色):白
font-size(文字の大きさ):(実際のブラウザでの表示をご覧くださいw)
h2 { font-size: 1.2em; color: #FF1493; }
h2は小見出し部分。
font-size(文字の大きさ):(h1の見出しより小さめに設定)
color(文字色):h1とは違う濃いピンク
p { line-height: 1.5em; }
pは段落部分。line-height(行間):少し空けた感じ
a:link { color: blue; }
aはリンク部分。a:linkは、クリックも何もしていない状態のリンクの色(青に設定)
a:visited { color: purple; }
a:visitedは、クリック後のリンクの色(紫に設定)
a:hover { color: skyblue; }
a:hoverは、リンクにカーソルが重なった時に変わる色(水色に設定)
a { text-decoration: none; }
これは、リンクに下線表示をなくすための設定
次に、HTMLファイルとCSSファイルを別にして書く方法
まず、上記CSSの設定をファイルとして独立させると、書き方はこうなる。
「.css」の拡張子を付けるのを忘れずに!
@charset "utf-8"; body { background: pink; color: black; margin-left: 2em; margin-right: 2em; } h1 { background: magenta; color: white; font-size: 1.5em; } h2 { color: #FF1493; font-size: 1.2em; } p { line-height: 1.5em; } a:link { color: blue; } a:visited { color: purple; } a:hover { color: skyblue; } a { text-decoration: none; }
そしてHTMLファイルに関連付けさせるために、CSSファイルの在り方を記述する。
もとのHTMLのコードが長いので、少し省略する。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>今期watchingのドラマ</title> <link rel="stylesheet" type="text/css" href="CSSファイルが置いてあるパスを書く"> </head> <body> <h1><現在視聴中の夏ドラマ></h1> <h2>◎高嶺の花 (日本テレビ 水曜よる10時)</h2> <p>石原さとみがきれいすぎる!目の保養!演技が石原さとみだけど、それでいいのだ。かわいいから(笑)</p> <b> <p><出演者></p> </b> <!-- オーソドックスな箇条書きの書き方 --> <ul> <li>石原さとみ</li> <li>峯田和伸</li> <li>芳根京子</li> <li>千葉雄大</li> <li>小日向文世</li> <li>戸田菜穂</li> <p>and more...</p> </ul> <p>公式サイト: <a href="https://www.ntv.co.jp/takanenohana/" target="blank">https://www.ntv.co.jp/takanenohana/</a> </p> <!--これでもOK↓ <p>公式サイト: <a href="https://www.ntv.co.jp/takanenohana/" target="blank">高嶺の花 公式HP</a> </p>-->
では、比較してみよう!
以前のホームページ
【Before】
CSSで装飾したホームページ
【After】
いい感じになってる…♪♪