カテゴリー

キーワード

 
> a要素、img要素、figure要素...

a要素、img要素、figure要素、figcaption要素を紹介します【HTML5実践編】


2015 年 2 月 23 日 投稿    view: 6632
タグ:
このエントリーをはてなブックマークに追加

a,img,figure,figcaption

こんにちは、WEBマーケティング部の杉尾です。


本日はa要素、figure要素、figcaption要素、img要素を紹介します。

a要素、figure要素、figcaption要素、img要素

a要素とimg要素はHTML5以前からありますが、figure要素、figcaption要素はHTML5から新たに追加された要素です。


まずは実際に見ていただいて、説明させていただきます。
以下のようなソースコードを用意しました。

<figure>
    <a href="italy.html" target="_blank">
        <img src="images/italy.png" alt="イタリア国旗の画像">
    </a>
    <figcaption>
        イタリア国旗
    </figcaption>
</figure>

ソースコードの説明

1行目
  figure要素はここに図表があることを示しています。


2行目
  a要素はhref=""の""内にリンクしたいページのURLを書くと、そこがハイパーリンクとなります。


 この場合、imgタグに埋め込まれた【画像全体】をハイパーリンクにしていて、『italy.html』という名前がついたページへ移動するという意味です。
 target属性は、リンク先をどう開くかを指定するものです。何も指定しなければそのまま新たなページへ移動します。


 今回はtarget="_blank"と指定しているのでページ移動する際、新たにタブを開くということです。


3行目
  img要素はsrc=""の""内に画像へのリンクURLを書くと、画像が表示されます。
 alt属性には画像表示ができない環境にある場合の代替テキストを書きます。必須ではありませんが、アクセシビリティが良くなるので書くことをおすすめします。


 この場合、『imagesというフォルダの中にあるitaly.png』という画像を表示するということです。


4行目
  figcaption要素はfigure要素の中に書くと、同じくfigure要素内にある図表にキャプションをつけることができます。
figure内の先頭か、最後に配置してください。


 この場合、『イタリア国旗』というキャプションをつけるということです。


それぞれ閉じタグは忘れないようにしてくださいね。imgタグは閉じタグがいらない特殊な要素です。


a要素のhref属性、img要素のsrc属性の後に指定しているファイルの書き方は『相対パス』という書き方です。 これについては次回、詳しく説明しますので、自分でやってみてできなかった方は参考にしてください。


で、これを利用して、前々回のソースに埋め込んでみます。


ファイル名【travel.html】

<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>旅行したい国</title>
</head>
<body>
    <header>
        <h1>旅行したい国</h1>
        <nav>
            <ul>
                <li>ヨーロッパ編</li>
                <li>アジア編</li>
                <li>アフリカ編</li>
                <li>北米、南米編</li>
                <li>オセアニア編</li>
            </ul>
        </nav>
    </header>
  
    <main role="main">
        <article>
  
            <h2>ヨーロッパ編</h2>
  
            <section>
                <h3>イタリア</h3>
                <figure>
                    <a href="italy.html" target="_blank">
                        <img src="images/italy.png" alt="イタリア国旗の画像" >
                    </a>
                    <figcaption>
                        イタリア国旗
                    </figcaption>
                </figure>
                <p class="test1">サッカー、ファッション、バッジョ</p>
            </section>
  
            <section>
                <h3>スペイン</h3>
                <figure>
                    <a href="spain.html" target="_blank">
                        <img src="images/spain.png" alt="スペイン国旗の画像">
                    </a>
                    <figcaption>
                        スペイン国旗
                    </figcaption>
                </figure>
                <p class="test2">サッカー、闘牛、イニエスタ</p>
            </section>
  
            <section>
                <h3>フランス</h3>
                <figure>
                    <a href="france.html" target="_blank">
                        <img src="images/france.png" alt="フランス国旗の画像">
                    </a>
                    <figcaption>
                        フランス国旗
                    </figcaption>
                </figure>
                <p class="test3">サッカー、オシャレ、プラティニ</p>
            </section>
        </article>
    </main>
  
    <aside>
        <h2>アジア編はこちら</h2>
        <p>1位はなんとあの国…</p>
    </aside>
  
    <footer>
        <small>Copyright 旅行したい国 All Rights Reserved.</small>
    </footer>
</body>
</html>

すると、こういう感じになります。
[デモへのハイパーリンク(別ページ)]


それぞれの国旗をクリックすると、各ページに行けると思います。
※各ページに大した中身はありません。すみません。


a要素はこのような使い方もしますが、多くはテキスト(文字)を囲んでハイパーリンクにします。 その場合、特にスタイルで指定していない限り、青い文字に変わり、下線がつきます

上に書かれている『デモへのハイパーリンク』という文字が正にそれですね。


まとめ

a要素、img要素はかなりの頻度で使う要素ですので、使い方を覚えてくださいね。


次回は『絶対パス、相対パス』についてお話しさせていただきます。


【追記】書きました ⇒ HTMLの相対パス、絶対パスを紹介します【HTML5実践編】


最後までお読みいただき、ありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事