猫と遊ぶ 見習いプログラマーの備忘録

日々の学んだ事を随時更新。主にプログラム。その他いろいろ

文字だけホームページに色をつける!

さて前回は、文字だけのホームページを作成してみた。
今回は、そのホームページに色を施してみようと思う!いわば装飾。


白と黒だけじゃあ、ちょっとさみしい。簡素だし、見ていてあまり楽しくない。
なので、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>&lt;現在視聴中の夏ドラマ&gt;</h1>
  <h2>◎高嶺の花 (日本テレビ 水曜よる10時)</h2>
  <p>石原さとみがきれいすぎる!目の保養!演技が石原さとみだけど、それでいいのだ。かわいいから(笑)</p>
  <b>
    <p>&lt;出演者&gt;</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>&lt;出演者&gt;</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>&lt;これから放送の気になるドラマ&gt;</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>&lt;現在視聴中の夏ドラマ&gt;</h1>
  <h2>◎高嶺の花 (日本テレビ 水曜よる10時)</h2>
  <p>石原さとみがきれいすぎる!目の保養!演技が石原さとみだけど、それでいいのだ。かわいいから(笑)</p>
  <b>
    <p>&lt;出演者&gt;</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】

f:id:msm20-chocolateee:20180725162250p:plain



CSSで装飾したホームページ
【After】

f:id:msm20-chocolateee:20180726162930p:plain

いい感じになってる…♪♪