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

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

ただいまの
回答率

87.90%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 944
退会済みユーザー

退会済みユーザー

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

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の方がよいでしょうか?

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2016/06/30 15:50

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 2

checkベストアンサー

+2

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

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

とのことなのであまり一般的な呼び名ではないと思いますよ。まして唐突に「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 17:40

    >>http://www.backlog.jp/

    上記の三つの、ヒーローイメージ直下のリストの場合はhタグをHTML上は記載して、
    見出しのテキストも書いてCSSで消すということをしないといけないのですね。
    そこまでやらなければいけないというのは初めて聞きました。

    この場合は検索エンジンスパムにならないのですね。

    キャンセル

  • 2016/06/30 20:39

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

    キャンセル

  • 2016/07/01 10:59

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

    キャンセル

0

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

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

の事でしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/30 15:38

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

    キャンセル

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

  • ただいまの回答率 87.90%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る