質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.31%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1322閲覧

メインビジュアルの下にグローバルナビを配置する場合の構造

f_e_beginner

総合スコア4

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2023/09/04 02:05

編集2023/09/05 00:45

コーディングの際のマークアップ方法(htmlの構造)について質問です。
質問の説明が慣れておらず申し訳ありません。

・PC版ではメインビジュアル(h1とキャッチコピーあり)の下に、グローバルナビが配置
・SP版及び下層ページでは、グローバルナビが一番上

というデザインを実現する場合、

ソースコード

html

1<header> 2 <nav>ナビ</nav> 3</header> 4<main> 5 <section>メインビジュアル</section> 6 <section>コンテンツ</section> 7</main> 8<footer>フッター</footer>

という順番で、メインビジュアルを<main>に入れて、位置の調整をしますか?

もしくは、下記構成にしても問題ないでしょうか?

ソースコード

html

1<section>メインビジュアルの内容</section> 2<header>グローバルナビ</header> 3<main> 4 <section>コンテンツ</section> 5 <section>コンテンツ</section> 6</main> 7<footer>フッター</footer>

出来ればSEOにも問題がないようにマークアップしたいのですが、
調べてみても良い方法がわからず質問しました。

補足情報

<main>タグは、必須ではない、入れ子になっていなければ複数使用も問題ないようですが、
やはりある方がseo的に良いのかと悩んでいます。
<header>タグにメインビジュアルまで入れる事は推奨されていないでしょうか?
・参考になる具体的なサイトを見つけられなかったので、メインビジュアルの下に、グローバルナビが配置されているサイトを(ここに記載しても大丈夫であれば)教えていただけるだけでも助かります。

イメージ説明
イメージ説明

修正ソースコード

html

1<header> 2 <div> 3  <figure><img src="メイン画像" alt="メイン画像"></figure> 4  <h1>サイトタイトル</h1> 5  <p>文章</p>   6 </div> 7 <nav> 8  <ul> 9   <li><a href="#1">1</a></li> 10   <li><a href="#2">2</a></li> 11   <li><a href="#3">3</a></li> 12  </ul> 13 </nav> 14</header> 15<main> 16 <section> 17 <h2>見出し</h2> 18  <p>コンテンツ</p> 19 </section> 20 <section> 21 <h2>見出し</h2> 22 <p>コンテンツ</p> 23 </section> 24</main>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2023/09/04 03:13

画像で図示できますか?
f_e_beginner

2023/09/04 03:43 編集

回答に図示をアップしたのでご確認いただきたいです。
Lhankor_Mhy

2023/09/04 05:05

回答に図を示すのはあまりよくないかと思います。 質問を編集すると、コメントをした人に通知が行くようにできます。
f_e_beginner

2023/09/04 05:23

ありがとうございます。編集しました。
Lhankor_Mhy

2023/09/04 08:14

編集ありがとうございます。
guest

回答2

0

ベストアンサー

私なら、意味論を考えるとheaderにメインビジュアルとナビを入れてしまうと思います。
一方で、メインビジュアルの下にナビを置くとなると、スティッキーヘッダにしないと不便なような気がしますので、その辺りを考慮した構造にするかもしれません。
あまり、正解みたいなものはなさそうに思います。


メインビジュアルの下に、グローバルナビが配置されているサイトを(ここに記載しても大丈夫であれば)教えていただけるだけでも助かります

こちらはどうでしょうか。
Cleverbird Creative - Award Winning Chicago Digital Design Agency

投稿2023/09/04 05:04

Lhankor_Mhy

総合スコア37419

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

f_e_beginner

2023/09/04 07:38

ありがとうございます。 正解はないという事で、人によってやり方が違うという事ですね。 headerにメインビジュアルも入れてしまっても問題ないのでしたら、そうしたいと思います。
guest

0

headerが全体のヘッダーとして想定するのであれば変にsectionの後に置かないほうがよいでしょう。メインビジュアルのロゴ用のsecitionであればheaderに含む方が現実的かもしれません。またナビはnavで明示的に管理するほうが楽だと思います。

HTML

1<header> 2<figure><img src="メイン画像" alt="メイン画像"></figure> 3<nav> 4<ul> 5<li><a href="#1">1</a></li> 6<li><a href="#2">2</a></li> 7<li><a href="#3">3</a></li> 8</nav> 9</header> 10<main> 11 <section> 12 <p>コンテンツ</p> 13 </section> 14 <section> 15 <p>コンテンツ</p> 16 </section> 17</main>

投稿2023/09/04 08:20

編集2023/09/04 10:59
yambejp

総合スコア117673

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

f_e_beginner

2023/09/04 09:06

よくあるトップのヘッダーにあるロゴはなく、メインビジュアルにh1(サイトタイトル)が来るので、 sectionも無しでheader内に、mainvisual(div)と<nav>が入っていればサイトとしておかしくないでしょうか?
yambejp

2023/09/04 10:53

せっかくセクション単位でのHTML校正を想定しているのであればimgはfigureで登録するとよいかもしれません
f_e_beginner

2023/09/05 00:47

ありがとうございます! 修正ソースコードを追記してみたのですが、見ていただけないでしょうか。 メイン画像の上にタイトルが乗ってくる仕様にしたいのですが、figcaptionにはh1は入れれないのかと思い、中に入れなかったです。
yambejp

2023/09/05 01:16

サイトタイトルや文章はメイン画像にオーバーレイするのでしょうか?
f_e_beginner

2023/09/05 03:49

はい、サイトタイトルと文章ともにオーバーレイします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問