htmlについて、初歩的かもしれませんが、お伺いします。

現在、<ul><li>を使って、リストを作成しています。
ですが、その途中に一行空けたい部分が何カ所かありまして、

<ul>
<li>×××</li>
<li>×××</li>
<br>
<li>×××</li>
<li>×××</li>
</ul>

という感じで、組んでみました。
何の違和感もなく反映されるかと思いましたが、<br>が機能せずに、一行空かずくっついて表示されてしまい、不思議に思っています。
<ul>の中では、brは使えないのでしょうか?
それとも、使えるけれど、何か他の要因があると使えなくなってしまうのでしょうか。

htmlは基礎的なことしか存じませんので、詳しい方や思い当たることをご存じの方にお答えいただけると助かります。
宜しくお願いします。

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

A 回答 (1件)

<br>は改行だから段落として使ってはいけないし、


リストならテキストの改行だけしか使えないはず。

一行余白をつけるなら、
.hoge{
margin-top:1em;
}

<ul>
<li>×××</li>
<li>×××</li>
<li class="hoge">×××</li>
<li>×××</li>
</ul>

こうすべきでは?
    • good
    • 0
この回答へのお礼

なるほど、クラスで設定すればいいんですね。
考えが至りませんでした。
torayoshiさん、ありがとうございました!
とても参考になりました。

お礼日時:2011/08/01 22:20

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

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

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

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

Q空白行について(できればCSS)

こんにちは!

デザイン上、どうしても2行分以上の空白行が欲しいときがあります。
現状でやってる方法としては<hr>タグの高さで調節か<pre>タグで間に改行を入れて誤魔化しています
<br>タグの連続はいけないと言われました。これは改行タグであって空白行を作るものではないと

CSS使ってて、これからなくなるタグなんかも排除しているところなので
間違いのない方法を知りたいのです。
そこで、2行分とか3行分とかの改行をする際に、他にどんな方法があるか教えてください!

なんとなく今自分がやってる方法は自信がありません。

Aベストアンサー

こんにちは、じゃんぬねっと です。

margin とかで空の空間を作れば良いのでは?

<p style="margin-bottom:20px">
 うんたらかんたら。<br>
 ほげほげ、ふーばー。
</p>

<p>
 おんどぅるるらぎったんでぃすかー!!<br>
 ダヂヤーナザーーーン。
</p>

とか。

CSS で定義するのも可能。

Qulタグやliタグの中でbrタグは使えない?

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

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

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

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

Aベストアンサー

SEO(検索エンジン最適化)には無関係ですが、文法的には誤りです。
→10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL )

<!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-html401j/intro/sgmltut.html#h-3.3.1 )を参照すること

したがって
<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-html401j/intro/intro.html#h-2.3.2 )

スタイルシートで、
ul li{margin-bottom:1em;}
だけでよい。

SEO(検索エンジン最適化)には無関係ですが、文法的には誤りです。
→10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL )

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


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

読み方は、3.3.3 要素宣言 ( http://www.asahi-net.or.jp...続きを読む

Q行と行の間を一行空けたいです

ブラウザ上で
「キーワード」
「キーワード」
このように、二行つながっているものを
「キーワード」

「キーワード」
このように、一行空けたいのですが、これを外部CSSに指定する方法を教えてください。宜しくお願いします。

Aベストアンサー

こんにちは。
外部cssのファイルに

.xxx {line-height:200%;}

という記述をつくり、html の方はヘッダーに
<LINK REL=STYLESHEET TYPE="text/css" HREF="xxx.css">
を記述し、て、cssファイルは同じディレクトリに置きます。
本文の方は
<span class=xxx>
「キーワード」
「キーワード」
</span>

で行間が2倍になります。

文書全体を行間を倍にする場合は、body タグでこれを行います。
<body class=xxx>

「xxx」は好きな文字などを指定してください。

Qホームページ制作で複数行の空白行を入れるには

(ホームページ制作の勉強中です。)

文章のと文章の間に複数行の空白行を入れには、<br>タグを
数回入力すれば可能ですが、他にに何か良い方法があるのでしょうか?
(<br>タグは、むやみに使わないほうがよいと聞きますので・・・)

Aベストアンサー

> (<br>タグは、むやみに使わないほうがよいと聞きますので・・・)
確かに論理構造を考えるとbrじゃなくてpを使った方がいいということはあります。

考え方としては、「コンテンツの論理構造を考えてから見た目を整える」という順序に気をつけるということでしょうか。
(意外と逆に考えがちなんですよね…。)

** 段落で区切る

<p>....文章...</p>
<p>....文章...</p>
<p>....文章...</p>

** CSSで見た目を整える

p{
margin: 1em 0px;
}


** 章の節目を空行2つ分にしてみる

.chapter{
margin-top: 2em;
}
p{
margin:
}

<p class='chapter'>....文章...</p>
<p>....文章...</p>
<p>....文章...</p>
<p class='chapter'>....文章...</p>
<p>....文章...</p>


章立てはdivで区切ってもいいですし、その辺はお好みです。

第一章の部分で margin-top: 2em を適用させたくなかったら、:first-child を使ってみてください。
IE6が対応していませんが、「大した問題じゃないと割り切る」か「.first-child のclassで代替する」か「http://trac.openpne.jp/ticket/2553 を使ってみる」か…。
クロスブラウザに関しては手間と効率と目的のバランスを考えて、決めるといいと思います。

> (<br>タグは、むやみに使わないほうがよいと聞きますので・・・)
確かに論理構造を考えるとbrじゃなくてpを使った方がいいということはあります。

考え方としては、「コンテンツの論理構造を考えてから見た目を整える」という順序に気をつけるということでしょうか。
(意外と逆に考えがちなんですよね…。)

** 段落で区切る

<p>....文章...</p>
<p>....文章...</p>
<p>....文章...</p>

** CSSで見た目を整える

p{
margin: 1em 0px;
}


** 章の節目を空行2つ分にしてみる

.chapter{
...続きを読む

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の方も修正する方法でもよけ...続きを読む

QCSSでh1とその下の文字との行間を詰めたい

h1~h6を指定した場合、そのすぐ下の文字との行間が1文字分空きますよね。
見栄えが良いように、h*のすぐ下の文字との行間を調整したい場合、CSSでは、どのように指定すれば良いでしょうか?
よろしくお願いします。

Aベストアンサー

 おそらく,h1,h2,……,h6,p の前後には,既定で 1 行分程度の空きができているはずです。そこで,それらの間の空きをすべて詰めてしまう記述を考えます。
 次の記述を <head>...</head> に加えてみてください。

<style type="text/css">
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0 }
p { margin-top: 0; margin-bottom: 0 }
</style>

これでこれらの要素が隣接しても,ぴったりくっついて出てきます(<!-- ... --> でくくる場合もありますが,XHTML を使わなければどちらでもかまいません)。
 詰めすぎ,と思われるなら,上記の数値をいじります。およそ 1 行分を「1em」として,数値を書き換えてください(「em」をつけることが必要です)。これで,間隔を好きなように調整できます。ほかの要素でも同様ですので,例にならって書いてみてください。

 具体的には,たとえば見出しの直後に p が来る場合,その間にできる空きだけをつぶしたい場合は,hn の下マージンと p の上マージンを狭めます。

<style type="text/css">
h1, h2, h3, h4, h5, h6 { margin-bottom: 0 }
p { margin-top: 0 }
</style>

このときは,hn の上マージンと p の下マージンはそのままです。ご質問の最低限のご要望を満たすのは上記の記述になります(ぴったりくっつくのがお嫌ならば,適切な間隔を指定してください)。
 hn の直後に来る要素に応じて,上マージンができる場合はそれを詰めてください。

 あとは,ご自分で応用なされるとよいでしょう。これを機にスタイルシート(CSS)をはじめてみたいと思われれば,参考 URL の「Let's begin CSS」あたりをおすすめしておきます。

参考URL:http://www.tg.rim.or.jp/~hexane/ach/

 おそらく,h1,h2,……,h6,p の前後には,既定で 1 行分程度の空きができているはずです。そこで,それらの間の空きをすべて詰めてしまう記述を考えます。
 次の記述を <head>...</head> に加えてみてください。

<style type="text/css">
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0 }
p { margin-top: 0; margin-bottom: 0 }
</style>

これでこれらの要素が隣接しても,ぴったりくっついて出てきます(<!-- ... --> でくくる場合もありますが,XHTML を使わなければどちらでもかま...続きを読む

Qお手配?ご手配?

「手配」の丁寧語は「お手配」?それとも「ご手配」?
社外文書作成途中で悩んでいます。
私が『“ご手配”いただけますよう…』としたところ、上司に「“お手配”が正しい。」と訂正されました。
通常の文章ではどちらも使われているようですが、どういった場合にどちらが使われるといったような法則があるのでしょうか?

Aベストアンサー

こんにちは。

<確か、漢字の前の尊敬語は“ご”で、平仮名の前の尊敬語は“お”だったよなー。とすぐに答えは見つかってはいたのですが、何せ“記憶”なもので、「ウラ」を取るのに手間取りました。

見つけました見つけました。ウィキペディアなら「証拠」になるとおもいますが。「尊敬語」の段落を見ていったら、やはり「通常大和言葉には「お」を、漢語には「ご」を付けることが多い」とありました。ホッ。↓
http://ja.wikipedia.org/wiki/%E6%95%AC%E8%AA%9E

★結論
ご質問は「手配」という漢語(漢字)の前につけるので「ご」が正しい。→ご手配。です。

ご参考まで。

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のように、はみ出ません

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

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報