HTML5でHPを作ってるのですが、
1つ目の記事に関する内容を1つのページとして作成しました。
その作成した記事の最後に、前後のページのリンクを張りたいと考えています。
<考えている内容>
前のページへ トップへ 次のページへ
といったものを作成したいと考えているのですが、
どのように作るのが一般的なのでしょうか?
<footer id="navi_footer">
<a href="リンク先">前のページへ</a>
<a href="リンク先">トップへ</a>
<a href="リンク先">次のページへ</a>
</footer>
では芸がないかな・・・。と思っています。
何か言い作り方等を知っている方がおられましたが
ご教授よろしくお願いします。
No.2
- 回答日時:
「芸がない」が見た目のことなら CSS で!
それでも足りなければ JavaScript。
見た目のことじゃないなら。。。
http://example.com/ がコンテンツのトップだとしたときの例。
<footer>
<nav>
<ul>
<li><a rel="prev" href="./01.html">前へ:ページのタイトル</a></li>
<li><a rel="next" href="./03.html">次へ:ページのタイトル</a></li>
<li><a href="../">上へ:ページのタイトル</a></li>
<li><a rel="contents" href="/toc.html">目次</a></li>
<li><a rel="index" href="/index.html">索引</a></li>
</ul>
</nav>
</footer>
http://www.w3.org/TR/REC-html40/types.html#type- …
あと、どうしても見せたいコンテンツがないなら「トップ」へは、いらないかも。
どのようにHTMLの構造を作られるのかな。
と思い記述させていただきました。
大体考えていたものと同じようなので
安心しました。
ありがとうございました。
No.1ベストアンサー
- 回答日時:
現状、IE8が結構存在することを考えると、未勧告のHTML5は次期尚早だと思います。
HTML5の新しい要素に未対応なブラウザの存在を考慮すると、大きく二つ方法があって
肥大化footerの場合
<div class="footer">
<div class="nav">
<ul>
<li><a href="./contentTable.html">目次</a></li>
<li><a href="./01.html">前のページ</a></li>
<li><a href="./01.html">前のページ</a></li>
<li><a href="./01.html">前のページ</a></li>
<li><a href="./index.html">索引</a></li>
</ul>
</div>
<address></address>
</div>
簡潔な場合
<div class="footer">
<p>
<a href="リンク先">前のページへ</a> ---
<a href="リンク先">トップへ</a> ---
<a href="リンク先">次のページへ</a>
</p>
</div>
とか。HTML5対応のブラウザのシェアが90%を超えるとそのまま・・
<div class="footer">→<footer>
なお
詳しくは、HTML5の仕様書を読んでください。
4.4.9 The footer element — HTML5 ( http://www.w3.org/TR/html5/the-footer-element.ht … )
4.4.3 The nav element — HTML5 ( http://www.w3.org/TR/html5/the-nav-element.html# … )
>では芸がないかな・・・。と
HTML5に芸はありません。徹底的に文書構造をマークアップするだけです。HTML4.01で残っていたプレゼンテーションに関わる要素、属性はすべて--予告どおり廃止され--徹底的に文書構造にしたがってのみ、マークアップすることが、『究極の芸』です。
>HTML5に芸はありません。徹底的に文書構造をマークアップするだけです。
確かに仰られる通りだと思います。
記述いただいた簡潔なフッターを使っていきたいと思います。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- ホームページ作成・プログラミング ログインしないとみることができないWebページの作成方法 3 2023/07/29 13:33
- PDF こんなPDF作れますか? 6 2022/05/13 11:14
- Mac OS Macで今あるファイルの連番(ページ番号)に足し算をしてリネームしたい 1 2022/10/12 17:22
- PHP PHP MySql ページング 2 2022/09/20 06:38
- PHP PHP ページング データベース 1 2022/06/16 10:30
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
- SEO googleサーチコンソールでの重複ページ(ダブルスラッシュ) 3 2023/06/12 15:00
- Amazon 新規でAmazon商品ページ作成方法について 1 2022/03/28 00:22
- WordPress(ワードプレス) ワードプレスのパーマリンク設定について 1 2023/02/11 19:08
- MySQL PHPとMySQLを使った掲示板の作り方 1 2022/06/02 13:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
css 横並びのナビゲーションバ...
-
画像にリンクを張ると画像がず...
-
ポップアップメニューを表のよ...
-
ポップアップメニューの作成方...
-
html/cssの、navを2段にする...
-
CSSでの<ul><li>を使った改行設定
-
<table>の高さ固定。情報増加時...
-
リストの数字のフォントサイズ...
-
リストを2つに分割して、それぞ...
-
バーナーヘッダーを固定する方法
-
ol、liをスタイルシートで中央寄せ
-
計算式や注意書きなどの記述は...
-
タイトルの横にサブタイトルが並ぶ
-
文法チェックの<A>と</A>の間が...
-
CSS「table-cell」で横並びにし...
-
ボタンを横に並べて表示させる方法
-
スタイルシートで更新情報をつ...
-
2要素ずつcssを適用する疑似ク...
-
テーブル内のプルダウンの下に...
-
Webのコーディングについての質...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
レスポンシブWebデザインでリン...
-
<table>の高さ固定。情報増加時...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
ページを開いているときのリン...
-
html <ul></ul>の並びで一行空...
-
html/cssの、navを2段にする...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報