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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

1264閲覧

下記のような水戸黄門型のサイトの三つの自慢の部分は、どのタグを使いますか?

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2016/06/30 06:13

編集2016/06/30 08:42

下記のような水戸黄門型のサイトの三つの自慢の部分は、どのタグを使いますか?

https://evernote.com/intl/jp/

エバーノートはulのリストを使っているのですが、
これだけ内容があってhタグも使われているのに、リストというのは、
よい選択と思ってよいのでしょうか?

横にポンポンと並んでいれば、内容がそれなりにあってもリストなのでしょうか?

リストならせめてdl~かなと私は思ってしまいます。

ないしはhタグがあるのでdivで全体を囲んで、それぞれをsectionという方法はどうでしょうか?
sectionは内容が少なく横に並ぶようなものなので使わないということでしょうか?

・また同じように三つの自慢の所で、画像の説明の見出しより先に画像などが来ていることも多いのですが、見出しより先に画像が来ている場合は、
下記のような順番になってしまってもよいのでしょうか?
img
h2

・私のヒーローイメージ直下の三つの自慢、ソースは下記にしました。

<div> <div> <img src="" alt=""> <dl> <dt></dt> <dd></dd> </dl> </div> <div> <img src="" alt=""> <dl> <dt></dt> <dd></dd> </dl> </div> <div> <img src="" alt=""> <dl> <dt></dt> <dd></dd> </dl> </div> </div>

divはsectionの方がよいでしょうか?

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

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

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

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

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

guest

回答2

0

ベストアンサー

水戸黄門型サイトという名称を初めて聞いたので調べてみましたが、
元ネタはココですかね?
記事の中で著者さん自身も言ってますが、

「グリッドレイアウトの亜種ともいうべきこれに正式名称があるのかわからないのですが、とりあえず僕は心の中で水戸黄門型と呼んでいます。」

とのことなのであまり一般的な呼び名ではないと思いますよ。まして唐突に「3つの自慢部分」と言われましても、普通は意味不明です。
あと、質問内容とmoonpaseさんとのやりとりを総合すると、「3つの自慢部分」がどこを指すのかご自身でも食い違いが生じています。元ネタ記事の内容と最初の質問内容から判断すると、evernoteサイトの4つのプラン紹介部分のことですよね?

もう少し回答者にやさしい質問の仕方をされた方が適切なアドバイスが得やすくなると思いますよ。
老婆心ながら・・・


さて、質門に対する私の考えですが、

これだけ内容があってhタグも使われているのに、リストというのは、

よい選択と思ってよいのでしょうか?

このサイトのケースであればulを選択する事自体は悪く無いと思います。
ただ、liの中でhタグを使っていることについては文法的には問題ありませんが、
文書全体のアウトライン構造から考えると少々やりすぎな感があります。
単なるulにしておくか、仰るとおりdlの方が良いケースかな? という印象ですね。

ないしはhタグがあるのでdivで全体を囲んで、それぞれをsectionという方法はどうでしょうか?

sectionは内容が少なく横に並ぶようなものなので使わないということでしょうか?

単純にそれぞれをsectionとした場合、「4つプラン部分全体で1つのコンテンツの固まりである」
ということが構造的に主張できなくなってしまいますので、あまり得策ではないと思います。
4つのプラン全体に対してもうひとつ「料金プラン」などのような見出しを立てて、
4つのプラン全体を1つのsectionに入れた上でそれぞれを更にsectionで区分するのであれば
問題ないと思いますが。

・また同じように三つの自慢の所で、画像の説明の見出しより先に画像などが来ていることも多いのですが、見出しより先に画像が来ている場合は、

下記のような順番になってしまってもよいのでしょうか?
img
h2

まぁ厳密に言えば見出しの後にimgを持ってきたほうが素直ですよね。
ただ、それが単なるイメージ画像であればあくまで装飾ということなので、見出しの前に存在していても別に問題ないと思います。
まぁ装飾画像なのであればimgではなく背景画像にするのが筋だとは思いますが。

投稿2016/06/30 07:10

aKusano

総合スコア3763

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

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

退会済みユーザー

退会済みユーザー

2016/06/30 08:03

いつもありがとうございます。 >>> 水戸黄門型サイトという名称を初めて聞いたので調べてみましたが、 元ネタはココですかね? 記事の中で著者さん自身も言ってますが、 そのサイトからエバーノートのサイトが紹介されていました。 水戸黄門型の3つの自慢とは有名学習サイトの先生が言っていたので、一般的かと思ったのですが、 そうではないのですね。 それは知らずに失礼しました。 >>> evernoteサイトの4つのプラン紹介部分のことですよね? そうです。水戸黄門型の例とあってみたのですが、4つと記載するべきでした。 >>> このサイトのケースであればulを選択する事自体は悪く無いと思います。 ただ、liの中でhタグを使っていることについては文法的には問題ありませんが、 文書全体のアウトライン構造から考えると少々やりすぎな感があります。 単なるulにしておくか、仰るとおりdlの方が良いケースかな? という印象ですね。 ulはただのテキストやアイコンの羅列のイメージがあったのですが、内容がそれなりにある、大きい要素でも並んでいればulをつかって問題ないのですね。 私もdlが一番かなと思います。 >>> まぁ厳密に言えば見出しの後にimgを持ってきたほうが素直ですよね。 ただ、それが単なるイメージ画像であればあくまで装飾ということなので、見出しの前に存在していても別に問題ないと思います。 まぁ装飾画像なのであればimgではなく背景画像にするのが筋だとは思いますが。 まさに下記のヘッダーの直下にある三つのカードの部分のことです。 http://www.backlog.jp/ ここでは下記のようにしていますね。 section img h p /section 装飾の画像はcssでbackground-imgということですが、上記の画像の場合これは装飾といえますでしょうか? 微妙ですがコンテンツの一部ではないでしょうか? その場合はimgですよね。 本文から参照られる画像ですが、自己完結しているか微妙です。 figureをここでは使っていませんね。 最後にsectionの中にsectionというのは、考えませんでした。 一つ目のコンテナーのsectionが章で、中が一つ下がって節ということでしょうか? 一つ目のコンテナーのsectionにhタグは入れられませんが、水上なのでarticleと違って問題ないということでしょうか?
退会済みユーザー

退会済みユーザー

2016/06/30 08:11

私は下記のようにしてみました。 ・ソース           <div> <div> <img src="" alt=""> <dl> <dt></dt> <dd></dd> </dl> </div> <div> <img src="" alt=""> <dl> <dt></dt> <dd></dd> </dl> </div> <div> divはsectionの方がよいでしょうか? <img src="" alt=""> <dl> <dt></dt> <dd></dd> </dl> </div> </div>
aKusano

2016/06/30 08:14 編集

>>私もdlが一番かなと思います。 回答してから思ったのですが、このレイアウトをdlで作ろうとするとどうしてもdl要素を4つ並べる形にしないといけないので、そうするとやっぱり4つのプラン全体で1つだという構造をマークアップでは主張できないので、そこを主張するならやっぱりulがいいかなと思い直しました。その上でulの中にdlを入れるのもアリかな、と。 >>http://www.backlog.jp/ あー、これはイメージ画像でいいんじゃないですか? >>一つ目のコンテナーのsectionが章で、中が一つ下がって節ということでしょうか? そういうことです。もともとsection要素は入れ子にすることで情報の階層構造=アウトラインを生成するのが役割ですから、sectionの中に子sectionが入ることは普通にあります。 >>一つ目のコンテナーのsectionにhタグは入れられませんが、水上なのでarticleと違って問題ないということでしょうか? 「水上」ってなんですか?
退会済みユーザー

退会済みユーザー

2016/06/30 08:15

すいません。途中で文字が入ってしまいましたので、質問の編集に追加しました。
退会済みユーザー

退会済みユーザー

2016/06/30 08:17

すいません。誤字で推奨が水上になっていました。
aKusano

2016/06/30 08:26

sectionもarticleと同じく見出し要素は原則として必須です。 なので本来ならsectionを追加するなら見出しも追加すべきです。 evernoteの事例で言うと「料金プラン」という見出しが自然と入る領域になりますので、 見出しを追加してsectionでまとめることは理にかなっていると思われます。 デザイン的に見出しをそのまま表示するとダサいから敢えて省略したい、 ということであれば省略しても構わないです。 ただその場合でもHTML上に見出しは記述し、CSSでvisibility:hidden;とする等で対応することが望ましいそうです。
退会済みユーザー

退会済みユーザー

2016/06/30 08:37

>>> そうするとやっぱり4つのプラン全体で1つだという構造をマークアップでは主張できないので、そこを主張するならやっぱりulがいいかなと思い直しました。 その上でulの中にdlを入れるのもアリかな、と。 4つの自慢が一つのグループであることを伝えることが、セマンティクであり重要ということですね。 私はdivで囲ってしまいましたので、意味のないタグですと囲っていてもグループであることが伝わらないということですね。
aKusano

2016/06/30 08:39

念のために言っておくと、参考として提示されているevernoteの場合は「料金プラン」としてその4つが明確に同じコンテンツの並列アイテムであることが分かるのでそのようにするだけであって、全てのサイトで1つにまとめることにこだわるべきであるとは限りませんのでご了承ください。
退会済みユーザー

退会済みユーザー

2016/06/30 08:40

>>http://www.backlog.jp/ 上記の三つの、ヒーローイメージ直下のリストの場合はhタグをHTML上は記載して、 見出しのテキストも書いてCSSで消すということをしないといけないのですね。 そこまでやらなければいけないというのは初めて聞きました。 この場合は検索エンジンスパムにならないのですね。
aKusano

2016/06/30 11:39

いや、もしsectionをどうしても使うのであれば、の話であって、 普通はそこまでしないでulやdlで済ませる方が多いし妥当だと思いますよ。
退会済みユーザー

退会済みユーザー

2016/07/01 01:59

やはりリストが妥当ですねありがとうございました。
guest

0

各ブラウザで見た目がきちんとしていて、ページを公開している人の意図に合うSEO対策が取れていればいいのではないでしょうか。

3つの自慢とは
・ノートに記録する
・どこからでも情報にアクセス
・何でも素早く検索
・みんなと共有

の事でしょうか?

投稿2016/06/30 06:25

moonphase

総合スコア6621

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

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

退会済みユーザー

退会済みユーザー

2016/06/30 06:38

そうです。 このサイトは例外的に4つですが 3つが多いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問