はちど

ボードゲームのレビューなど。

*

HTMLを書いてみよう。その3:リスト、リンク、画像

      2013/10/27

Hachiです。
HTML基礎講座、第3回です。
前回までで、タイトルと本文を書くことができるようになりました。
今回は、本文に色々なタグを挿入し、よりWebページらしくしていきましょう。

リストを作る

複数のものを並べて表示するのには、リストを使用します。
前回の見出しと本文と合わせて、文書の構造化に役立つタグです。

箇条書きリスト

順序にこだわらない、箇条書きのリストを表示するには、
<ul>~</ul>で括った中に、
<li>~</li>で括った要素をいくつか挿入します。

ul

順序リスト

順序のあるリストを記述するには、
<ol>~</ol>で括った中に、
<li>~</li>で括った要素をいくつか挿入すると、
自動的に上から昇順で番号が振られます。

ol
順序の意味に気付いた人は私と同年代(か、上の世代)だ!しくしく。

定義リスト

辞書のような、言葉と意味の組み合わせの羅列も
HTMLではリストとして表されます。
<dl>~</dl>で括った中に、
<dt>~</dt>で定義する言葉を、
<dd>~</dd>でその言葉の内容を記述し、
dtとddの組み合わせを幾つか羅列します。
ddはブラウザの判断で自動的にインデントが挿入されます。

dl
dtとddの組み合わせは、1対1だけではなく1対多も可能。
多対1や多対多でもOKですが、上記2つに比べてわかりづらくなります。

組み合わせ例

上記のリストを組み合わせて使いながら
見出しなんかも使うと、こんな感じになります。
list

リンクを追加する

リンクは<a>タグを使って挿入します。
たとえば、Googleへリンクを貼る場合は、以下のように記述します。

リンクの見た目サンプル画像は、
さすがにわかると思うので省略します。

<a>タグには、a というタグの名前以外に
href=という形式でURLを記述することで、
href=のあとに書かれている場所へのリンクを作成することができます。

本文の一部にリンクを貼る

<a>タグは、リンクを貼りたい部分を括るだけでいいので、
<p>タグの中にある文章の一部分で使っても問題ありません。

Webサイト内でリンクを貼る

index.htmlと同じフォルダにlink.htmlを作成してください。
自分のWebサイトのURLがhttp://www.cortoso.com/だった場合、
link.htmlへのリンクはこれまでと同様に
<a href=”http://cortoso.com/link.html”>と書いても良いですが、
同じフォルダ内のHTMLへリンクを貼る場合は、
次のように記述してURLを省略することができます。

href=の後ろにある ./ は「同じフォルダの中の」という意味になります。
同様な記述で、 ../ は「ひとつ上のフォルダの」という意味に、
/ のみでは「いちばん上のフォルダの」という意味になります。
# ここでは一般的な用語としてフォルダと呼んでいますが、
# Webサイトでフォルダにあたるものは「ディレクトリ」と呼ばれます。

自分のWebサイト内でリンクを貼る場合は、これらの表現を使って
<a>タグの記述をなるべく省略しましょう。
記述を短くするだけでなく、WebサイトのURLが変わってしまった場合の
リンク先修正が必要なくなるなどのメリットがあります。

新しいウィンドウ(タブ)で開く

同じウィンドウ(タブ)でリンクが開いてしまうと困る場合は、
aタグにtarget=””という記述を追加します。

このようにtarget=”_blank”を追加すると、そのリンクは
新しいウィンドウ(タブ)で開くようになります。
自分のWebサイトから出てしまうリンクに使う場合が多いです。

画像を表示させる

画像を表示させるには、<img>タグを使います。

imgタグに挿入されたそれぞれの要素について説明します。

src

src=””で、表示する画像を指定します。
リンクのhref=””と同様にURLを指定すればよいのですが、
画像の場合はhttp://からではなく./から書くのが一般的です。

外部からでも指定はできますが、外部サイトの画像を
勝手にsrcで指定して使用する行為は「画像直リン」と呼ばれ
マナー違反とされています。ほとんどの場合、誰かに怒られます。
自前のサイト画像は自前で用意しましょう、ということです。

alt

何らかの理由で画像が表示されない場合に、
代わりに表示される文字列を指定します。
ハンディのある人に対しても対応できるようにという
アクセシビリティの観点からも、付けることをお勧めします。

意味のある画像ではなく装飾に用いている画像の場合は、
alt=””のように空の文字列を指定するのが正しいです。

width,height

画像の表示されるサイズを指定します。
指定を省略した場合は、画像の素のサイズで表示されます。
CSSで指定することも可能です。

まとめ

これまでの要素をまとめて使うと、
こんな感じのWebページが作れます。

自己紹介(偽)
上記画像をクリックすると、実際のテストページへ飛べます。

次回も引き続き、よく使うタグについて書いていきます。

sns-widget

更新情報の確認にはこちら!

 - HTML基礎講座