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

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

簡単な文字だけのホームページを作ってみる

まずはシンプルに、文字だけホームページを作成してみよう!

【使用したタグ一覧】

(※html、head、title、body、p、bタグは前回紹介したので割愛する)

<h1></h1>

headingの略。一番大きいサイズの見出し。数字が小さいほど大きい。h6まである。
h1は、サイトのタイトル表示に使われることが多いので、検索結果に影響する。

<h2></h2>

小見出し。h1より文字が少し小さくなる。

<ul></ul>

unordered listの略。順不同。リストの範囲を指定。リストを書く際は必ず必要。

<li></li>

list itemの略(listの略かと思ったけど違ったw)。箇条書き。上記のulタグ内に書く。

<a href="URL">リンク名</a>

参照するWEBページ。書き方が決まっているので覚えておく。
href属性…hypertext referenceの略
"URL"の直後にtarget="blank"を書くと、新しいタブでリンク先が表示されるようになる。

<hr>

水平線(horizontal rule)。見やすさや、区切り線を付けたい時に。上下に改行が入る。


【便利な機能】
文中に「<」、「>」、「&」を表示したい時。
タグに「<>」が使われている。ではどうすれば?

「<」 … &lt;
「>」 … &gt;
「&」 … &amp;

&lt;&gt;&amp;をブログに書く際に、
そのまま書くと、HTMLなので、ご丁寧に「<」、「>」と「&」に変換されてしまう。
説明するときはどう書きゃいいんだ~!と調べてみると、どストライクな記事があったので、こちらを参考にした。
勝手に参考にさせていただきましたが、とても助かりました!m<_ _>m Thank you!!
<参考サイト>
&amp;lt;や&amp;gt;をそのまま文字として表示する方法 - くようの記録帳

で、そうすると上記のように書けば、きちんと表示が可能になる!ちょっと特殊だから気をつけないとね。


そしてさいごに、上記タグを使用した、文字だけホームページのソースがこちら

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>今期watchingのドラマ</title>
</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>

めっちゃ番宣みたいになってるww
せっかく練習で書くなら、自分の書いてみたいものがいいなと思ったのと、
時期モノだから後から見返したときに、懐かしいな~って思えると思ったんで、大好きなドラマを採用。

んで、上記ファイルをブラウザに表示させた結果がこちら。
          ↓ ↓ ↓
f:id:msm20-chocolateee:20180725162250p:plain

きちんとURLが埋め込まれていて、リンクに飛ぶようになっているので、よし!◎
リンク先に飛ぶようになると、動いたみたいでちょっとたのしい(笑)