はてなブログをカスタマイズしてみよう

はてなブログはカスタマイズできる

毎日報告を書いているはてなブログ、好きなようにカスタマイズできます。
テンプレート(ひな形)もあるが、それ以上のことも。
例えば…
検索してみる。

WEBサイトってなにでできてるの?

WEBサイトの中身は、ブラウザの検証ツールで覗くことができます。
ブラウザで見たいサイトを開いて「F12」を押してみましょう。

続き→

WEBサイトはなぜ見れるの?

WEBサイトはどうやって手元で見られるのか。
手元のデバイスに大量のWEBサイトが保存されているわけではない。
続き→

簡単なWEBサイトをつくろう

  1. テキストエディタでHTMLファイルとCSSファイルを作成する
  2. 研修サーバに置く
  3. ブラウザからアクセスする

例:HTML

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
  <h1>Hello</h1>
  <div>
    <p>This is a paragraph.</p>
  </div>
</body>
</html>

例:CSS

@charset 'UTF-8';

h1{
  /*color: red;*/
}

★お題

  • 文字を太字にしよう
  • 文字を大きくしよう
  • 文字を赤字にしよう
  • 文字をセンター揃えにしよう
  • 背景色を#e0e0e0にしよう