人に聞けない痔の悩み、これでスッキリ >>

完成したサイトなのですが…。
Dreamweaverにて開いて一応チェックすると、
「タグbrはur内では使用できません」との表示がでて驚いています。

<li>~</li>だけで自動的になされる改行だと、詰まって見えるのです。
だから、

<ul style="padding-left: 00px;">
<li>~</li></br>
<li>~</li></br>
</ul>

のようにして処理しております。ただ、これってSEO的にマズい、ということなのでしょうか?
どうか、ご存知の方いましたら教えてください。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

SEO(検索エンジン最適化)には無関係ですが、文法的には誤りです。


→10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

<!ELEMENT UL - - (LI)+ -- unordered list -->
ulには、「li要素のみを一個以上もつ。」と書かれています。


<!ELEMENT LI - O (%flow;)* -- list item -->
li要素には、%flowをゼロ個以上もつ、終了タグは省略できる。

読み方は、3.3.3 要素宣言 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )を参照すること

したがって
<ul>
 <li>・・・<br>
 <li>・・・<br>
</ul>
とは書けます。(HTMLの場合)
その場合、ブラウザは
<ul>
 <li>・・・<br></li>
 <li>・・・<br></li>
</ul>
と解釈します。(XHTMLはこう書かないとならない)

★もっと、はるかに大事なこと
「<li>~</li>だけで自動的になされる改行だと、詰まって見えるので」<br>を入れるは、HTML的には最大の間違いです。こちらのほうがはるかに重要!!
 構造とプレゼンテーションは区別すること。デザインのためにHTMLを書いてはなりません。
 2.3.2 アクセス性 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

スタイルシートで、
ul li{margin-bottom:1em;}
だけでよい。
    • good
    • 1
この回答へのお礼

たいへん参考になりました。
具体的な説明で、なるほどそう作ればいいんだな、と合点がいきました。
ありがとうございました。

お礼日時:2012/01/27 01:46

HTML の文法違反ですから非常にまずいですね。


http://validator.w3.org/ でチェックすることをお勧めします。
    • good
    • 1
この回答へのお礼

ご回答ありがとうございます。
そのサイトは使いやすいですね。
今後の参考にさせていただきます。

お礼日時:2012/01/27 01:42

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでの

<ul><li>を使用して文章入れても、その文章が長いと改行した時に
文字の始まりから、表示できません。(<li>の背景に矢印等の見出しマークを使用)
見出しマーク+スペース+文字の始まり・・・で改行されても、2行めの始まりが1行目の始まりに合わせて設定する方法をご存じないでしょうか?
よろしくお願いします。

Aベストアンサー

ちょっと、目指している仕上がりがよくわからなかったんですが
text-indent(とpadding)で調整してみては

<style type="text/css">
ul{
list-style-type:none;
border:solid 1px black;
width:8em;
}
li{
border:solid 1px red;
padding-left:1em;
}
li.type2 {text-indent:1em;}
li.type3 {text-indent:-1em;}
</style>


<ul>
<li class="type1">未調整のリスト、一行目と2行目以降が揃います。</li>
<li class="type2">1行目だけ一桁後ろから始まるように調整した例。</li>
<li class="type3">2行目以降を一桁後ろから始まるように調整した例。</li>
</ul>

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q「CSS」リストの2段組どのように組まれていますか?(同一カテゴリの場合)

リストの2段組ですが、皆さんどのように組まれていますか?

リストの項目が同一カテゴリーだった場合です。
例えば下記のような同一カテゴリー(花)の場合
・チューリップ
・あじさい
・たんぽぽ
・ひまわり
・すみれ
・パンジー

これを
=============
・チューリップ  ・ひまわり
・あじさい     ・すみれ
・たんぽぽ    ・パンジー
=============
のように表示させたい場合です。
投稿した後に表示がズレるかもしれませんが、
・ひまわり ・すみれ ・パンジー の頭は揃えたいです。

苦肉の策で下記のようなマークアップをしています。
<ul class="left">
<li>チューリップ</li>
<li>あじさい</li>
<li>たんぽぽ</li>
</ul>
<ul class="right">
<li>ひまわり</li>
<li>すみれ</li>
<li>パンジー</li>
</ul>
そして左右にfloatさせています。
ただ、これだとリストが途中で分断されてしまって
正しいマークアップとは言えないですよね・・・。

こういうケースって結構あるのでは、と思い、
色んなサイトを巡りましたが見つからず。

皆さんこういったケースの場合どのように組まれてますか?
いっそテーブルの方が良いのでしょうか?
項目は後から追加するものと想定してください。
(縦に可変していきます)

どうぞ宜しくお願いいたします。

リストの2段組ですが、皆さんどのように組まれていますか?

リストの項目が同一カテゴリーだった場合です。
例えば下記のような同一カテゴリー(花)の場合
・チューリップ
・あじさい
・たんぽぽ
・ひまわり
・すみれ
・パンジー

これを
=============
・チューリップ  ・ひまわり
・あじさい     ・すみれ
・たんぽぽ    ・パンジー
=============
のように表示させたい場合です。
投稿した後に表示がズレるかもしれませんが、
・ひまわり ・すみれ...続きを読む

Aベストアンサー

確かに下のソースだとIEで駄目でした・・・
以下の部分を追加してください。


.left {
width:251px;
float:left;
clear:left; /* ←追加する場所 */
}

Q
  • で改行する横並びのメニュー
  • <ul><li>を使って横並びのメニューを作っています。項目が増えると横幅いっぱいになるためメニューが2行になるのですが、項目の途中で改行されて困っています。

    │●リンクA ●リンクB ●リンクC ●リン│←ページ右端
    │クD ●リンクE

    項目の途中で改行せずに↓こうしたいと考えています。

    │●リンクA ●リンクB ●リンクC    │←ページ右端
    │●リンクD ●リンクE

    リストタグを使わずに<br>で改行を入れる方法は使いたくありません。いい方法をご存知の方がいましたら教えてください。よろしくお願いします。

    Aベストアンサー

    難しく考えすぎ。単純に改行されたくなければ、幅固定が一般的だけど、文字数で幅がかなり違う場合には、ブロックにして li や a 内に限り改行禁止にする。

    li{ display:block } が一般的。

    あとは、アンカーの前後に文字が付属する場合なら
    li{ white-space: nowrap; } li a{ display:block;}

    こうやれば、
    li や a を margin,paddingで調整。border で囲ったり background や color で色々出来る。
    また、この場合、
    ブラウザでフォントサイズのみを大きく変更された場合に、段落が増えるのでリンクメニューの順序も多少考慮し標準サイズで右側が短い文章の項目になるようにデザインも考慮しなければいけない。

    Q
    が二つ続くと間に改行ができてしまう

    <ul>~</ul>について質問です。下記のようなソースがあるとします。

    ----------------ソース----------------
    <h3>あいうえお</h3>
    <ul type="aaa">
    <li>あああ</li>
    <li>いいい</li>
    <li>ううう</li>
    </ul>
    <h3>あいうえお</h3>
    <ul type="bbb">
    <li>あああ</li>
    <li>いいい</li>
    <li>ううう</li>
    </ul>
    ------------------------------------
    と書くと、下のように表示されますが、
    ★★の部分に改行が出来てしまいます。
    この改行を出さないようにする方法はないでしょうか?

    ----------------表示----------------
    あいうえお

    1.あああ
    2.いいい
    3.ううう
    ★★
    あいうえお

    1.あああ
    2.いいい
    3.ううう
    ------------------------------------

    <ul>~</ul>について質問です。下記のようなソースがあるとします。

    ----------------ソース----------------
    <h3>あいうえお</h3>
    <ul type="aaa">
    <li>あああ</li>
    <li>いいい</li>
    <li>ううう</li>
    </ul>
    <h3>あいうえお</h3>
    <ul type="bbb">
    <li>あああ</li>
    <li>いいい</li>
    <li>ううう</li>
    </ul>
    ------------------------------------
    と書くと、下のように表示されますが、
    ★★の部分に改行が出来てしまいます。
    この改行を出さないようにする方法はないでしょうか?

    ------------...続きを読む

    Aベストアンサー

    普通に書けばこうかな

    <style>
    h3{
    margin:0px;
    }
    ul{
    margin-top:0px;
    margin-bottom:0px;
    }
    </style>

    <h3>あいうえお</h3>
    <ul>
    <li><span>あああ</span></li>
    <li><span>いいい</span></li>
    <li><span>ううう</span></li>
    </ul>
    <h3>あいうえお</h3>
    <ul>
    <li><span>あああ</span></li>
    <li><span>いいい</span></li>
    <li><span>ううう</span></li>
    </ul>

    Qcssで「下よせ」ってどうやっていますか?

    フロートのレフト、ライトはいいとして、

    あるボックス要素内(A)に異なるボックス要素(B)をいれます。
    この(B)を(A)の一番そこにはりつかせたい時にどうすれば
    最もよいのでしょうか?

    いいアイデアをご教授ください。

    Aベストアンサー

    こんなのはどうかな?

    position: absolute;
    bottom: 0px;

    Qテーブル内の文字サイズを変更したい。

    HTMLのテーブル内の文字サイズを変更したいのですが。
    イマイチ上手くいかずに悩んでいます。
    出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
    <TD>タグや<TR>タグのところでいじくるのですか?

    Aベストアンサー

    いろいろやり方はありますが
    文字単位でサイズを変更するには
    #2の方法ですね。

    テーブルごとやセル(<TD>)ごとにサイズを変更するには
    スタイルシート(CSS)を使用します。

    テーブルごとにサイズを変更する場合
    <TABLE style="font-size : 20px;">

    セル(<TD>)ごとにサイズを変更する場合
    <TD style="font-size : 20px;">あああ</TD>

    #1の方法だとページ内の全てのセル(<TD>)に設定することになります。

    スタイルシート(CSS)はこれら以外にも
    いろいろな設定方法があります。

    Qテーブルタグの中にdivを含めてはダメ?

    テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
    何か不都合でもあるのでしょうか?
    何かご存知の方がいれば教えていただけませんか?

    Aベストアンサー

    以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

    tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
    特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
    tr直下にはth,tdが書けることになっています(それ以外は不可)。

    th,tdの下にはブロック要素が書けるので、divも書けます。

    このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

    Qliタグの中に

    タグやら

    を入れるのはあり?

    それともなしでしょうか?
    たとえば、作品実績みたいなのを羅列するとき

    「画像」
    「タイトル」
    「簡単な説明」

    を乗せたいときはどうしますか?
    <ul>
    <li>
    <p>画像</p>
    <dl>
    <dt>タイトル</dt>
    <dd>説明</dd>
    </dl>
    </li>
    </ul>

    こんな感じを考えたのですが・・・
    <li>(作品)ごとにボーダーボトムで区切りたいかなと考えております。

    <li></li>の中に他のタグを入れないほうがいいときいたこともあるんですが、皆さんならどうしますか?


    </ul>

    Aベストアンサー

    #1 ORUKA1951です。
    #1の説明は、すこし専門的過ぎたかなということと、なぜリストにするかを含めて説明しておきます。
    まず、UL-unordered list 順不同リストは、文字通り順番の無い並列リストです。
    ★複数が同列でたくさん並ぶのでtableはおかしいですね。画像の数だけ横に長いのならtableでも良いですが、
    ★携帯端末では縦に並びます。
     ディスプレイの幅が狭いときもtableのように、はみ出ません

     このように、写真とそのタイトルと説明を羅列したい場合、文書構造上は最適なのはリストだと思います。リストに何を使うかとなると悩むところですね。
    OL ordered list 序列リストは、順番が必要なとき以外は使わないでしょう。
    DL definition list 定義リストでも良いかな?
    ・・・そして、なによりもリストにしておけば、携帯端末や読み上げソフト、あるいは検索エンジン最適化からも良いでしょう。
    しかし、「(作品)ごとにボーダーボトムで区切りたいかな」という条件が一つありますね。
    だとすると、
    【注意】
     ★分かりやすくするため全角スペースでインデントされています。
      利用するときはタブに変換すること
     ★これは、私のページ一部を抜粋したもの。画像は200px×150px
     ★基本的にCSSのためだけのclass,id,divは無いのでHTMLはシンプルです。
     ★セレクタの使い方は調べること。
     ★これはolですがulでもよい。
     ★本来は、
     <div id="photoList">
      <ol>
       <li>本体
        <ul>
         <li><img src="./photo/R0011583.jpg" width="200" height="150"
            alt="ディスプレイを開く"></li>
         <li>本体を正面から撮影したところ、パネルの下がカバー</li>
        </ul>
       </li>
    とマークアップしたほうがスマートでしょう。


    ______________サンプルソース。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="ja">
    <head>
     <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
     <title>ディスプレイの分解:ノートパソコンの分解</title>
     <meta http-equiv="Content-Style-Type" content="text/css">
     <style>
    <!--
      @media screen{
       div#photoList{
        display: block;
        border: solid green 1px;
        margin: 1em 10% 1em 10%;
        background-color: rgb(200,200,200);
        padding:0px;
       }
       div#photoList > ol{
        margin: 0px;
        padding: 0px;
       }
       div#photoList > ol>li{
        display:block;
        width: 210px;
        float:left;
        border-style: solid;
        border-color: black gray gray black;
        border-width: 1px 4px 4px 1px;
        padding: 5px;
        height: 240px;
        margin: 5px;
        background-color: white;
       }
       div#photoList > ol>li dl{
        margin:0px;
       }
       div#photoList > ol>li dl dt{
        padding: 5px 10px;
       }
       div#photoList > ol>li dl>dd{
        margin-left: 0px;
        text-align: center;
       }
       div#photoList > ol>li dl dd+dd{
        margin-left: 0px;
        text-indent: 1em;
        font-size: 0.8em;
        line-height: 1.5em;
        text-align: left;
       }
       div#photoList > hr{
        clear: both;
        margin: 0px;
        visibility: hidden;
       }
      }
    -->
     </style>
    </head>
    <body>
     <h1>ノートパソコンの分解</h1>
     <h2>ディスプレイの分解</h2>
     <div id="photoList">
      <ol>
       <li>
        <dl>
         <dt>本体</dt>
         <dd><img src="./photo/R0011583.jpg" width="200" height="150"
             alt="ディスプレイを開く"></dd>
         <dd>本体を正面から撮影したところ、パネルの下がカバー</dd>
        </dl>
       </li>
       <li>
        <dl>
         <dt>ビスの位置</dt>
         <dd><img src="./photo/R0011587.jpg" width="200" height="150"
             alt="カバーを外す"></dd>
         <dd>電源スイッチカバーを外すとビスがでてくる。</dd>
        </dl>
       </li>
       <li>
        <dl>
         <dt>パネルを開く</dt>
         <dd><img src="./photo/R0011590.jpg" width="200" height="150
             alt="パネルを180度開く"></dd>
         <dd>ヒンジに負荷がかからないようにパネルを一杯に開く</dd>
        </dl>
       </li>
       <li>
        <dl>
         <dt>パネルを裏返しに</dt>
         <dd><img src="./photo/R0011597.jpg" width="200" height="150"
             alt="パネルを1裏返す"></dd>
         <dd>取り外したパネルを裏返しにする。</dd>
        </dl>
       </li>
      </ol>
      <hr>
     </div>
    </body>
    </html>

    #1 ORUKA1951です。
    #1の説明は、すこし専門的過ぎたかなということと、なぜリストにするかを含めて説明しておきます。
    まず、UL-unordered list 順不同リストは、文字通り順番の無い並列リストです。
    ★複数が同列でたくさん並ぶのでtableはおかしいですね。画像の数だけ横に長いのならtableでも良いですが、
    ★携帯端末では縦に並びます。
     ディスプレイの幅が狭いときもtableのように、はみ出ません

     このように、写真とそのタイトルと説明を羅列したい場合、文書構造上は最適なのはリストだと思います...続きを読む

    QonClickに複数の関数を挿入する方法

    初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
    クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
    通常はこのような設定はしないものなのでしょうか?
    教えてください。
    よろしくお願いします。
    <INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
    <INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

    Aベストアンサー

    セミコロンでつなぐのが常道ですが、3つ以上なら
    別途function化したほうが、可読性が高くなると
    思います。


    人気Q&Aランキング