happy cat image

tomodevel

皆んなのウェブ入門, ともでぃべる

headerタグと footerタグ

headerタグとfooterタグについて調べましょう。

headerタグ

headerタグはWebページの上に位置してロゴやメーニュや検索機能が普通に入ってます。
ヤフジャパンサイトを例を引いたら、下のイメージ部分です。

headerタグの使い方

<header></header>

上のheaderタグの内にロゴを入れたり、メニューを入れたりします。次は簡単にともでぃべるのheaderを作ってみたソースです。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
    <header>
        <h1>tomodevel</h1>
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>Java Script</li>
            <li>jQuery</li>
            <li>MySQL</li>
            <li>PHP</li>
        </ul>
    </header>
</body>
</html>

結果をみるボタンを押してもデザインがないんで実際のheaderのようには見えませんがそれは CSS3を学習する時に学べます。

footerタグ

footerタグはWebページの下に位置して会社の情報やアドレスなどが入ってます。
ネイバーまとめを例を引いたら、下のイメージ部分です。

footerタグの使い方

<footer></footer>

上のfooterタグの内にロゴを入れたり、メニューを入れたりします。次は簡単に作ってみたfooterタグです。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
    <footer>
        <h1>tomodevel</h1>
        <ul>
            <li>会社紹介</li>
            <li>会社構造図</li>
            <li>グリティング</li>
            <li>アドレス</li>
            <li>電話番号</li>
            <li>東京都港区 どこ どこ</li>
        </ul>
    </footer>
</body>
</html>

講座に戻り