コース目次 / 第1章
骨組み
見出し・段落・リストを使って、名前と自己紹介の載った1ページにします。
前の章で、名前だけが表示されたページができました。ここからも同じ進め方です。まず見本(はるとさん)のとおりに書き写し、そのあと自分の内容に置き換えます。この章では、そこに自己紹介と「好きなもの」のリストを足します。まだ見た目の飾り付けはしません。まず中身を書く、飾るのは後 という順番が、崩れにくいサイトを作るコツです。
HTML のタグは「これは何か」の札
<h1> は「これは一番大きな見出しです」、<p> は「これは段落です」という札を、文章に貼っているだけです。ブラウザはその札を見て、大きさや間隔を決めています。
この章で使う札は3種類だけです。
| タグ | 意味 |
|---|---|
<h2> |
中くらいの見出し |
<p> |
段落(ふつうの文章) |
<ul> と <li> |
箇条書きのまとまりと、その1項目 |
<!-- --> |
コメント。ブラウザには表示されない、自分用のメモ |
前章からの変更点
<body> の中だけが変わります。緑の行が追加された部分です。
<body> <h1>こんにちは、はるとです</h1>+ <p>カメラと旅行が好きです。撮った写真と、行ってよかった場所を少しずつここに置いていきます。</p>+ + <!-- 好きなものを3つならべる -->+ <h2>好きなもの</h2>+ <ul>+ <li>カメラ</li>+ <li>旅行</li>+ <li>コーヒー</li>+ </ul> </body>書き終わったファイル全体は次のようになります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>はるとの記録</title>
</head>
<body>
<h1>こんにちは、はるとです</h1>
<p>カメラと旅行が好きです。撮った写真と、行ってよかった場所を少しずつここに置いていきます。</p>
<!-- 好きなものを3つならべる -->
<h2>好きなもの</h2>
<ul>
<li>カメラ</li>
<li>旅行</li>
<li>コーヒー</li>
</ul>
</body>
</html>自分用に書き換える
ここからが「あなたのサイト」になる部分です。
<p>の文章を、自分の言葉に書き換えてください。1〜2行で十分です。<li>の中身を、自分が好きなもの3つに書き換えてください。増やしたければ<li>...</li>の行をコピーして足せます。<title>を自分のサイト名にしてください。ブラウザのタブに出る名前です。
保存したら、ブラウザで再読み込み(Mac は command + R、Windows は Ctrl + R)してください。変わっていなければ、保存できているかを確認します。
うまく表示されないときは、閉じ札(</p> のようにスラッシュが付いたもの)を書き忘れていないか見てください。初心者がつまずく原因のほとんどはこれです。
こうなっていればOK
うまくいかないときは、この章の完成ファイル一式(ZIP)をダウンロードして続きから進めても大丈夫です。
この章はまだ完了していません。