属性のきほん

属性はタグに足す設定

タグは要素の種類を決めるだけのものです。そこに細かい情報を足すのが属性です。書き方は次の通りです。

<img src="cat.jpg" alt="ねこ" width="160">

開始タグの中に、属性名="値" の形を半角スペースで区切って並べます。値は必ずダブルクォートで囲みます。属性は何個並べてもかまいませんが、同じ属性を 2 回書くことはできません。

すでに書いた属性を読み返す

これまで何気なく書いた属性にも、それぞれ役割があります。おもなものは次の通りです。

• lang="ja" はこのページが日本語だとブラウザに伝えます。読み上げソフトが正しい読み方を選べます
• charset="UTF-8" は文字の種類を伝えます。これが無いと日本語が文字化けします
• alt は画像が表示できなかったときに代わりに出る説明文です
• target="_blank" はリンクを新しいタブで開きます

次に使う囲み方

div は複数の部品をまとめる箱、span は文章の途中の範囲です。div は段落の外、span は段落の中で使います。図書室の案内なら次のように囲めます。

<div>
  <h2>利用案内</h2>
  <p>受付は<span>北館</span>です。</p>
</div>

今回書くこと

プロフィール画像に width と height を足します。この 2 つがあると、画像が届く前からブラウザが表示場所を確保できるので、読み込みの途中で文章がガタッとずれません。単位は付けず、数字だけを書きます。あわせて、外部サイトへのリンクに target="_blank" が付いているかも確かめます。

1. プロフィール画像の img に width="160" を足す
2. 同じ img に height="160" を足す
3. ゆめさくコードへのリンクに target="_blank" を足す