Uブログ

はじめての板芸 #5 ― 自己紹介ページに仕上げる

その他

「はじめての板芸 #4 ― 絵を描いてみる」の続きです。前回はSVGで丸や四角を組み合わせてアイコンを作りました。最終回の今回は、これまで学んだことをすべて使って、自己紹介ページを完成させます。

1. 完成イメージを決める

今のindex.htmlには、#3と#4で作った内容が入っているはずです。ここに手を加えて、自己紹介ページに仕上げていきます。完成形に載せるのは次の3つです。

ページの中身

  • 名前（見出しとして大きく表示する）
  • 名前の横に添えるアイコン（前回作った顔の絵）
  • 趣味や好きなもの（箇条書きで並べる）

料理のレシピと同じで、先に完成形をイメージしてから手を動かすと迷いません。

参考として、完成形のサンプルを載せておきます。今のファイルの中身を見比べながら、足りない部分を追加したり書き換えたりしてみてください。

完成形のサンプル

<meta charset="UTF-8">
<body style="background: #fffdf7;">

<h1 style="color: #4a90d9; font-size: 36px;">
  <svg width="40" height="40" style="vertical-align: middle;">
    <circle cx="20" cy="20" r="18" fill="#ffe0b2" />
    <circle cx="14" cy="16" r="3" fill="#333" />
    <circle cx="26" cy="16" r="3" fill="#333" />
    <rect x="13" y="27" width="14" height="3" rx="1" fill="#333" />
  </svg>
  なまえ
</h1>

<h2 style="color: #333; font-size: 24px;">好きなもの</h2>
<ul style="font-size: 20px; line-height: 2;">
  <li>散歩</li>
  <li>読書</li>
  <li>コーヒー</li>
</ul>

</body>

2. 名前とアイコンを並べる

前回のh1（「こんにちは」と書いてある行）を、名前の見出しに書き換えます。h1の中にSVGを入れると、文字とアイコンが横に並びます。

上のサンプルを参考に、h1の行を次のように書き換えてください。

書き換える内容

<h1 style="color: #4a90d9; font-size: 36px;">
  <svg width="40" height="40" style="vertical-align: middle;">
    <circle cx="20" cy="20" r="18" fill="#ffe0b2" />
    <circle cx="14" cy="16" r="3" fill="#333" />
    <circle cx="26" cy="16" r="3" fill="#333" />
    <rect x="13" y="27" width="14" height="3" rx="1" fill="#333" />
  </svg>
  なまえ
</h1>

Windows（メモ帳）の場合

  1. hangeiフォルダの「index.html」を右クリックする
  2. 「プログラムから開く」→「メモ帳」を選ぶ
  3. h1の行を上の内容に書き換える
  4. 「ファイル」→「上書き保存」で保存する

Mac（CotEditor）の場合

  1. hangeiフォルダの「index.html」を右クリックする
  2. 「このアプリケーションで開く」→「CotEditor」を選ぶ
  3. h1の行を上の内容に書き換える
  4. 「ファイル」→「保存」で上書き保存する

保存してブラウザで開き直すと、顔のアイコンと「なまえ」が横に並んで表示されます。style="vertical-align: middle;"は、アイコンと文字の高さを揃える指定です。

「なまえ」の部分を、自分の名前やニックネームに書き換えてください。本名でもあだ名でも構いません。アイコンの色や形を変えたい場合は、前回と同じ要領で数字や色番号を書き換えます。

3. 趣味を書き足す

</h1>の下に、次の内容を追加してください。前回書いたSVGの練習コードがまだ残っている場合は、その下に足しても構いませんし、練習部分を消して入れ替えても構いません。

追加する内容

<h2 style="color: #333; font-size: 24px;">好きなもの</h2>
<ul style="font-size: 20px; line-height: 2;">
  <li>散歩</li>
  <li>読書</li>
  <li>コーヒー</li>
</ul>

Windows / Mac 共通

  1. テキストエディタでindex.htmlを開く
  2. </h1>の行を見つける
  3. その下に上の内容を書き足す
  4. 上書き保存する

ブラウザで開き直すと、名前の下に「好きなもの」という見出しと箇条書きが表示されます。

各部分の意味

  • <h2> ― h1より一段小さい見出し
  • <ul> ― 箇条書きの始まり
  • <li> ― 箇条書きの各項目
  • line-height: 2; ― 行と行の間を広くして読みやすくする

4. 自分の言葉に変える

ここが一番大事な工程です。サンプルのまま残さず、自分の情報に書き換えてください。

書き換えるポイント

  • 「なまえ」→ 自分の名前やニックネームにする
  • 「好きなもの」→「趣味」「最近ハマっていること」など、好きな見出しに変える
  • 「散歩」「読書」「コーヒー」→ 自分の趣味や好きなものに入れ替える。数を増やしても減らしても構わない
  • 色や文字の大きさも、#3で覚えた方法で自由に変える

書き換えて保存し、ブラウザで開き直す。何度でも繰り返してください。しっくりくる見た目になったら、それが完成です。

5. まとめ

  • 名前を<h1>で大きく表示し、その中にSVGアイコンを添える
  • <h2>と<ul>で趣味や好きなものを箇条書きにする
  • サンプルをそのまま使わず、自分の名前・趣味・好きな色に書き換えて完成させる
  • 保存→ブラウザで確認を繰り返して、自分の好きな見た目に仕上げる

シリーズ完走

#1から#5まで、お疲れさまでした。デスクトップのhangeiフォルダに、自分だけの自己紹介ページが残っているはずです。手芸で編み上げたマフラーが手元に残るように、キーボードで打ち上げたページも手元に残ります。気が向いたら、色を変えたり項目を足したりして、いつでも手を入れてみてください。