プロが教える店舗＆オフィスのセキュリティ対策術

詳しい人求む！

HTML5コーディング（初心者の疑問）

解決済

  • 質問者：hayaken73
  • 質問日時：
  • 回答数：1件

HTML5でのコーディングを始めたばかりで
どうしていいかよく分からない事があります。
（コーディング初心者です）


①以下の場合はどうコーディングすると良いのでしょうか？

◆サイト　　　：整体サロンのサイト

◆対称のページ：トップページ

◆対称のコンテンツ：
サロンが過去に受けた雑誌取材のうち３つを
トップページにあげる

・コンテンツタイトル画像
　・雑誌の表紙画像
　・雑誌名
　・内容（どのような取材だったか）

　・雑誌の表紙画像
　・雑誌名
　・内容（どのような取材だったか）

　・雑誌の表紙画像
　・雑誌名
　・内容（どのような取材だったか）


◇私は以下のようにしましたが自信がありません。

<article>
<p><h1>コンテンツタイトル</h3></p>
<ul>
<li>
<a href="#">
<p><img (雑誌の表示画像) /></p>
<h2>雑誌名</h2>
<p>内容</p>
</a>
</li>
<li>・２つ目・</li>
<li>・３つ目・</li>
</ul>
</article>


-----------------------------------------------------
◆疑問のポイント
①画像を<p>タグで囲むのはどうか？
②<article>でいいのか？
③正解のコーディングはどういう記述か？
-----------------------------------------------------

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

まったく違います。


HTML5が開発されるときの大きな目標に、文書の構造を明確化するというのがあります。
　そのいきさつは
HTML5“とか”アプリ開発入門（1）：Webの3つの問題を解決する「HTML5」とは何なのか (2/2) - ＠IT( http://www.atmarkit.co.jp/ait/articles/1008/30/n … )
　の「【問題2】文書内に埋め込まれた「意味」が不明確」を読まれると良く分かります。
　そのためにheader,section,footer,nav,aside,articleなどが用意されました。
　ごく簡単に説明すると
header:その文書のヘッダ
section:その文書の本文
　★内部に【ひとつだけ】見出し要素<h1>～<h6>も必ず持ちます。
　★階層は<section>の入れ子で示されます。
footer:その文書のフッター
nav:ナビゲーション(navigation)
　★ナビゲーションheaderないにあるときはサイト内
　★section内にあるときはそのsectionの目次などに使われます。
aside:そのブロックの本文と直接関係ない記事(aside)
　本文の内容とは直接関係ない記事は必ずasideで括ります。

article:内部にheader,section,footerを持つと期待される記事の集合
よって、headerをひとつ,section,blockをひとつ持つだけの場合は、articleは不要です。なぜならbody要素がまさにそれなのですからね。
[使用例]
<body>
　<header><!-- ヘッダ -->
　　<h1>ページタイトル</h1>
　　<nav>サイトナビゲーション</nav>
　</header>
　<section><!-- 章 -->
　　<h2>本文見出し</h2>
　　<p>段落</p>
　　<section><!-- 項 -->
　　　<h3>本文(項)見出し</h3>
　　</section>
　　<section><!-- 項 -->
　　　<h3>本文(項)見出し</h3>
　　　<article><!-- 独立した完結する記事 -->
　　　　<header><header>
　　　　<section></section>
　　　　<footer></footer>
　　　</article>
　　</section>
　　<nav><!-- この章の見出し -->
　　<aside><!--このセクションの内容とは関係ない記事-->
　</section>
　<footer>
　　<h2>文書情報</h2>
　　<p><a href=""></a>・・ここではnavは使わない</p>
　</footer>
</body>

★以下詳しい説明
<article>　×　通常は不要です。×内部にheaderがない。
　<p>
　　<h1>コンテンツタイトル</h3>
　　× P要素には一切のブロック要素は入れられません。
　</p>
　<ul>
　　<li>
　　　<a href="#">
　　　　 × a要素ないにブロック要素は入れられません。
　　　　HTML5では仕様上は入りますが、この場合は入れられません。
　　　　<p><img (雑誌の表示画像) /></p>
　　　　 × />と書いても良いです(HTML5では許されている)が、
　　　　　この場合は>で閉じる方が良い。XMLに合わせる書き方も
　　　　　ありますが、難しい。
　　　　　→Polyglot マークアップ: HTML 互換の XHTML 文書( http://standards.mitsue.co.jp/resources/w3c/TR/h … )
　　　　なお、表紙画像が重要でしたら入れますが、普通入れずに背景にしてスタイルシートで指定します。
　　　　<h2>雑誌名</h2>
　　　　<p>内容</p>
　　　</a>
　　</li>
　・・・【中略】・・・
</ul>
</article>

著書の紹介だとすると、それがそのページの本文ですから、sectionに入るのじゃないかと。
<body>
　<header></header>
　<section>
　　<h2>本の紹介</h2>
　　<ul>
　　　<li><a href="" tuitle="本のタイトル"><img (雑誌の表示画像)></a>
　　　　<p>内容</p>
　　　</li>
　　　<li><a href="" tuitle="本のタイトル"><img (雑誌の表示画像)></a>
　　　　<p>内容</p>
　　　</li>
　　</ul>
　</section>
以下略
　こうする事で検索エンジンにページの主たるコンテント(内容)が本の紹介である事が分かる。

または
<body>
　<header></header>
　<section>
　　<h2>本の紹介</h2>
　　<ul>
　　　<li><a href="">本のタイトル</a>
　　　　<p>内容</p>
　　　</li>
　　　<li><a href="">本のタイトル</a>
　　　　<p>内容</p>
　　　</li>
　　　<li><a href="">本のタイトル</a>
　　　　<p>内容</p>
　　　</li>
　　</ul>
　</section>

の方がシンプルでメンテナンスも容易でしょう、カバー画像はスタイルシートを用いていれる。

これは気づきなのですが
◆サイト　　　：整体サロンのサイト
◆対称のページ：トップページ
◆対称のコンテンツ：
サロンが過去に受けた雑誌取材のうち３つをトップページにあげる。

　これはとてもまずいのですよ。あなたのサロンの紹介が主であって、「過去に受けた雑誌取材」は基本的には「aside・・」に入るないようじゃないかと。最も困るのは、読者は記事内容を探しているわけじゃない。
　視覚系ブラウザ対象で、それをビジュアルにそれを紹介したい場合は、スタイルシートで見えやすいように配置すれば良い。

　また、articleも使いますが・・その場合は
　<section>
　　<h2>本の紹介</h2>
　　<article>
　　　<section>
　　　　<h5>本の見出し</h5>
　　　　<p><img></p>
　　　<section>
　　　<footer></footer>
　　</article>
　</section>

　本文で説明するのでしたらfigure要素を使う方が良いかもしれません。他のページなどからも参照されることを想定されるなら・・
　<section>
　　<h2>本の紹介</h2>
　　<figure>
　　　<img>
　　　<figcaption>
　　　　<p>本の紹介</p>
　　</figure>
　　<figure>
　　　<img>
　　　<figcaption>
　　　　<p>本の紹介</p>
　　</figure>
　</section>

HTML5のそれぞれの要素の使い方は、厳しいです。
なぜならHTML改訂の大きな目標の一つですから

とても良い、すばらしい記事があります。
HTML5 Doctor, helping you implement HTML5 today( http://html5doctor.com/ )
　今探したら邦訳も・・ありますね。古いかも
html5doctor - HTML5.JP( http://www.html5.jp/html5doctor/index.html )
    • good
    • 0
    • 件
通報する
この回答へのお礼

ページ全体の構造をきちんと理解していくことができないと
HTML5のコーディングができないのが分かりました。

非常に詳しく、また丁寧にご説明いただき、今後コーディングして
いくうえで大変参考になりました。

本当にありがとうございました。

通報する
お礼日時：2015/09/18 09:02

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報