これからの季節に親子でハイキング! >>

<LI>を使ってリストを作ると、その前後に行間ができてしまいます。この空白を狭くしたり、なくしたりする方法があれば教えていただきたいのです。よろしくお願いします。

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

A 回答 (5件)

 既定では,多くのブラウザで,li 要素の前後には空きはできないはずですが……。


 おそらく,ul,ol,dl 要素の前後にできる空きを詰めたいのであれば,スタイルシートをお使いください。
 具体的には,ヘッダ(<head>...</head>)に次のように記述します。

<style type="text/css">
ul, ol, dl { margin-top: 0; margin-bottom: 0; }
</style>

数値「0」が前後にできる空きの量の指定です。これを,1em にすると(単位をつけてください)1 行分,0.5em にすると 0.5 行分,のように空きます。
 また,ものによっては,

<style type="text/css">
<!--
ul, ol, dl { margin-top: 0; margin-bottom: 0; }
-->
</style>

と書いてありますが,今となってはたいした違いではありません(むしろ,前の書き方が今後主流になります)。

 スタイルシートについてもっとお知りになりたければ,参考 URL の「Let's begin CSS」あたりが参考になるでしょうか。

参考URL:http://www.tg.rim.or.jp/~hexane/ach/
    • good
    • 1
この回答へのお礼

そうです、olの前後にできる空きを埋めたかったんです。
教えていただいたとおりにやってみたらできました。ありがとうございました。

お礼日時:2005/07/15 15:27

> 上記の意味がよくわからないのですが、倍率指定だと文字の大きさも変わってくるということですか?(きっと違いますよね・・)



倍率指定なら文字の大きさが変わっても対応した高さになる、ということです。
すみません確かに説明不足でした。
以下、順に説明します。

まずは、そもそもline-heightは何か?ですが、名前のとおり「行の高さ」であって「行間」ではないことに注意しておいてください。つまり、「ある文字と、次の行にある文字との“すき間”の距離」ではなく、「文字の高さ + その上下の余白」です。

で、その指定の方法について、高さを直接 20pt だとか書く方法はご理解いただけると思います。
倍率(1.2など)を指定する場合、割合(120%など)を指定する場合は、「何に対する倍率または割合なのか?」が重要です。それは「フォントサイズに対する倍率または割合」なのです。「元の“行の高さ”に対して○倍」ではありませんので、ご注意。
たとえば font-size:10pt の要素に対して line-height:1.5 や line-height:150% と指定すると、行の高さは 10pt X 1.5 = 15pt になります。
quadsさんには大変失礼なのですが、おそらくquadsさんは「デフォルトの行の高さに対する倍率または割合」だと勘違いなさっているかと…。それが指摘させていただいた2つのうちの1つ目です。
「100%が規定値です」と書かれていて、それなら「line-height:100%」って無意味ですよね…。100% では「元のまま」なわけです。「行を低くする方法」として紹介されているわけですし、実際に line-height:100% を付ける前(既定値)よりも低くなりますから、100% が既定値ではないことと、掛け算の対象が「元の行の高さ」ではないことが、お解りいただけるかと思います。

既定値は「normal」で、これはブラウザが適当に読みやすいよう調整します(私の経験では、文字の高さの1.2倍ぐらいが多い)。印刷業やDTPなどの世界では、文字の高さの1.5倍ぐらいが読みやすいとされています。
印刷物もWebページも、多くの、特に「読ませる」主旨のページでは1.5倍ぐらいにしてあって、詰まっているとやはり読みにくいです。
以下を表示させてみてください。
---------------
<html>
<body>

<p>┏┓国♪薔薇|jy<br>┗┛国♪薔薇|II</p>
<hr>
<p style="line-height:100%;">┏┓国♪薔薇|jy<br>┗┛国♪薔薇|II</p>

</body>
</html>
---------------
指定しない=デフォルトの normal(上)と line-height:100% (下)の違いがわかると思います。下は文字と文字が、くっ付きすぎています。これがページいっぱいにギッチリ詰まっていたら、かなり読みにくいです。

ここまでを踏まえた上で、次に、倍率(1.2など)と割合(120%など)の違いについて。
上のサンプルなど、あえて割合で指定しましたが、割合での指定方法は、実はあまり利用価値がないのです。
これは具体例を見たほうが早いと思います。

<p style="font-size:12pt;line-height:150%;">ABC<br>DEF<br>GHI</p>
<hr>
<p style="font-size:12pt;line-height:18pt;">ABC<br>DEF<br>GHI</p>

上の2つはまったく同じ意味になります(もちろん表示結果も)。
フォントサイズ 12pt の 150% = 18pt ですよね。その計算を「人間がする」か「機械がする」かの違いでしかありません。むしろ、150% と書くと表示のたびに毎回計算をさせるわけで(負荷はわずかだとしても)やらせる意味も無いですし、逆に 18pt のほうがソースを見たときの明確さが、どちらかといえば高いでしょう。

で、ここからが重要。
line-height にパーセント指定をしてしまう人は、そうすればブラウザが“動的に”調整してくれる、と勘違いしている場合が多いですが、実はそうではなく“固定”です。上の例のように、18pt と書いたのと同じ、つまり 18pt で固定されます。文字の大きさが途中で変化しても、「18pt」という値が継承されてしまいます。
これに対して 1.5 のように倍率で指定すると、計算後の「18pt」ではなく「1.5」が継承されるので、文字の大きさにあわせて“動的に”調整してくれます。
以下を表示させて見れば一目瞭然です。

<p style="line-height:1.5;fontsize:12pt;">むかしむかしのお話です。<br>ある日おばあさんが、<br>川で洗濯をしていると、<br>川上から<span style="font-size:36pt;">大きな桃</span>が、<br>どんぶらこ、どんぶらこ</p>
<hr>
<p style="line-height:150%;fontsize:12pt;">むかしむかしのお話です。<br>ある日おばあさんが、<br>川で洗濯をしていると、<br>川上から<span style="font-size:36pt;">大きな桃</span>が、<br>どんぶらこ、どんぶらこ</p>

途中でフォントサイズが 36pt に変われば、その 1.5倍の 54pt に“動的に”調整してくれます。
もちろん上は極端な例ですが、他の要素(画像など)の影響もあることと、意外に勘違いしている人が多いことで、重なって読めないページが、結構多いです…。

一般的に、line-height は倍率指定が推奨されていて、いわゆる「行送り」と呼ばれます。
たいていのページでは line-height:1.5 が良いでしょう。
    • good
    • 0
この回答へのお礼

お礼が遅くなって申し訳ありません。
taseki様、実例比較までつけていただいた詳しい解説をありがとうございました。良く理解できました。

>倍率指定なら文字の大きさが変わっても対応した高さになる、ということです。

確かに、たまに文字が重なっているページを見かけることがありますが、倍率とパーセント指定の違いが原因だったんですね。

私の質問に対してご丁寧な回答をいただいたことに感謝いたします。

お礼日時:2005/07/19 18:51

line-heightについて、恐縮ですがquadsさんにちょっと捕捉させていただきます。



●line-heightの既定値は 100% ではなく「normal」です。多くのブラウザはfont-sizeの100%より少し余裕を持たせています。
●また、指定できるのは、倍率(1.2など)、長さ(15ptなど)、割合(120%など)、などですが、推奨されるのは基本的に「倍率」指定です。
line-height:120%;

line-height:1.2;
はよく似ていますが、1.2と指定すると含まれる要素も「1.2倍」となりますが、120%と指定してしまうと計算後の数値が継承されてしまうので注意が必要です。
よく文字と文字が詰まりすぎたり重なってしまっている見苦しいページを見かけますが…、たいていこれが原因です。

参考URL:http://www.w3.org/TR/REC-CSS2/visudet.html#propd …
    • good
    • 0
この回答へのお礼

補足をありがとうございます。

>1.2と指定すると含まれる要素も「1.2倍」となります>が、120%と指定してしまうと計算後の数値が継承され>てしまうので注意が必要です

申し訳ありません、上記の意味がよくわからないのですが、倍率指定だと文字の大きさも変わってくるということですか?(きっと違いますよね・・)

お礼日時:2005/07/16 08:51

marginとline-heightでの指定が考えられます。



line-heightを指定するタグはliだけで良いのですが、ブラウザ(NC4.6など)によっては認識が異なるのでul,olも同時に指定した方がよいと思われます。

ということで、同一HTMLソース内に記述する場合は、

<head></head>内に
<style type="text/css">
<!--
ul,ol,li{
line-height:100%
}
-->
</style>

の指定でよいかと思います。
無論、100%が規定値です。パーセント指定でなくとも適用されます。
個人的に、特に理由がない限りパーセント指定が好ましいと思います。

li内で改行が行われている場合は、その行間にも適用されます。
なので、li自体の間隔のみを指定したい場合は、margin等で調整してください。

※外部ファイル参照での指定が推奨されますが。
※ドキュメントタイプにより厳密には推奨指定方法が異なります。
※また、metaタグの記述も必要です。(文字セットや使用属性のスクリプト言語指定)



追記。
スタイルシートの基礎を理解されていないようであれば、少しでも学ばれることをお勧めします。
    • good
    • 0
この回答へのお礼

行の高さをパーセントで指定することもできるんですね。
教えていただきありがとうございました。
スタイルシートについては、さわりの部分を理解している程度です。今までは、必要に迫られてやってみたら何となくできていたというものなので、ちゃんと理解していません。これをきっかけに勉強したいと思います。

お礼日時:2005/07/15 15:40

以下のように書くと、liの上下が少し詰まります。


-----------------
<html>
<head>
<style TYPE="text/css">
li {line-height:1;}
</style>
</head>
<body>
<ul>
<li>あいうえお
<li>かきくけこ
<li>さしすせそ
<li>たちつてと
</ul>
</body>
</html>
-----------------
ただし line-height は li 自体の間隔ではなく「行の高さ」です。なので、li と li の間隔も狭くなったように見えますが、1つの li の中の行間も狭くなります。
「ul や ol 全体を詰める」、と考えたほうがいいかもしれません。
    • good
    • 0
この回答へのお礼

行間の高さを設定するという方法もあるんですね。
参考になりました。ありがとうございます。

お礼日時:2005/07/15 15:35

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

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

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

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

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

Q

お世話になります。
ホームページを作成する場合、見出し<h1>または<h2>の下に<p><div>で本文を記述すると、見出しと本文の間が空いてしまいます。
この間を狭く調整する方法を探しています。
よろしくお願いします。

Aベストアンサー

 No. 1 のご回答のように,これはスタイルシートの範疇ですが,もう少し根本的な方法で考えてみましょう。

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

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

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

 具体的には,h1 と p,h2 と p の間にできる空きだけをつぶしたい場合は,h1,h2 の下マージンと p の上マージンを狭めます。

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

このときは,h1,h2 の上マージンと p の下マージンはそのままです。ご質問の最低限のご要望を満たすのは上記の記述になります(ぴったりくっつくのがお嫌ならば,適切な間隔を指定してください)。

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

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

 No. 1 のご回答のように,これはスタイルシートの範疇ですが,もう少し根本的な方法で考えてみましょう。

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

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

これでこれらの要素が...続きを読む

Q改行したときの幅を狭くする方法

HTMLで文章を打っていると、改行なしの単純な折り返しの場合に比べて、改行したときに行間があいてしまいます。表を作成しても、表の中で改行すると同じことが起こります。
これを防ぐにはどうしたらよいでしょうか。
編集ソフトにファイルメーカーのHomepage Pro3.0 v1を使用していますが、HTMLを直接修正する方法でも結構です。

Aベストアンサー

たぶん、タグが<P>となっていると思われますので、
これを<BR>に変更すれば、行間の空かない改行になります。

また、ファイルメーカーのHomepage の場合の方法はわかりませんが、
DreamWeaverでは、Shiftを押しながら、改行すると、<BR>となります。
もしかしたら、同じ操作ができるかもしれません。

Qpタグによる段落間のアキ調整について

こんにちは。
HTMLのpタグでくくった段落が連続すると、
多くのブラウザでは段落間に1行程度のアキが生じると思います。

このアキをCSSによってなくしたいのですが
どう指定すればいいのでしょうか?

たとえば段落の「margin-bottom」に0ではなく
マイナス値を入れればなくせるようですが、
「pによる1行アキ」というのがすべてのブラウザでの
共通仕様なのか分からず、マイナス値使用に怖さを覚えます。

どういうやり方がすべてのブラウザに通用する
正しいやり方なのでしょうか?

Aベストアンサー

> > まあ、0などにすれば空きは見えなくはなりますが…
> え? できますか?
 できますよ。
ただ、pが上部にマージンをもうけるか下部にマージンをもうけるかは分からないので、
下部マージンは元々0だった(空白に見えていたのは上部マージンだった)と言う可能性があると思いますよ。

margin:0;などとして上下左右をいっぺんに指定すれば、ブラウザのデフォルトスタイルの介入がなくなるので、良いのではないかと思います。

このようにして略記した場合は、四辺を一度に指定することが出来、
しらべてみたところ、Operaでは
margin:0; ← 上下左右0に指定
margin:0 1px; ← 上下0, 左右1pxに指定
margin:0 1px 2px; ← 上0, 左右1px, 下2pxに指定
margin:0 1px 2px 3px;上右下左という順番で、0, 1, 2, 3pxに指定
 という風になっているようです。
まあ、使いうるのは全方向指定と上下左右指定ぐらいなものかもしれませんが(^_^;

Q

CSSの質問です。

<ul>と<li>でリストマークを消すために
list-style-type:noneとするのは<ul>と<li>のどちらに設定するのが正しいですか?

どちらに設定してもリストマーク消えますけど。
どちらに設定したら規格上違反とかありますか?

Aベストアンサー

整理すると
<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Generated content, automatic numbering, and lists( http://www.w3.org/TR/CSS2/generate.html#propdef-list-style )]より

 OLとUL要素からLI要素に "のlist-style 'の値を転送し継承します。これは、リストのスタイル情報を指定するための推奨方法です

 このことから、ulないし、olに指定すると、その子孫のliに引き継がれるようですし、それが推奨されていて、どのブラウザもそれに従うようです。実際、最初にも書きましたようにブラウザのデフォルトの捨て要るシートもulに対して指定しているようです。

 listのスタイルシートは他にも問題があって、liを字下げして表示するブラウザが多いのですが、その字下げをmarginを使うか、paddingを使うか、それをul,olに対してか、liに対してかもブラウザによって差があります。
 そこで、私は、
div.nav ul,div.nav ul,div.nav li{display:block;list-style:none;margin:0;padding:0;}
といったんリセットしてから、様々な指定を付け加えていくことにしています。

 文法的にも正しいし、かつブラウザ間の実装の差も吸収できますから・・

整理すると
<div class="nav">
 <ul>
  <li>
において、
div.nav{list-style-type:none;}
 では、リストマークは消えない。
 しかし、
<div class="nav">
 <ul>
  <li>
   <div>
    <ul>
     <li>
では、
div.nav ul{list-style-type:none;}
で、途中にdivがあっても、リストマークは消えます。

 仕様書には、liではな【くulやolにlist-styleを指定することを推奨する。】と書かれている
【引用】____________ここから
Inheritance will transfer the 'list-style' values fr...続きを読む

Qリストで行間を指定したい

リストで「情報」のテキストとリスト1行目「その1」の行間だけを指定したいのですが、可能でしょうか。

ul
{
list-style-image: url('image/arrow.gif');
}
li
{ margin-bottom: 0.2em;}

-----

<p>情報</p>
<ul>
<li>その1</li>
<li>その2</li>
</ul>

Aベストアンサー

#1の方の回答と重なりますが、単純に両者のマージンを調整すればいいのでは?(無指定の状態でPもULも上下に1em程度のマージンがあるので。)
p{ margin-bottom:0; }
ul{ margin-top:0; }

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

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スペースを使わず文字位置を揃える方法

素人な者で大変申し訳ありません
以下のように、複数行の文字位置を揃えるタグはどうなるのでしょうか?
(下の例は揃っていませんが・・・)

1.あ        :ABC
2.abc       :ABC
3.あいう      :ABC
4、えお       :ABC

のように、空白部にスペースを使わずに文字位置を揃える方法です
ワードなどの「tabキー」の役割をするタグなんてありますか?

ご教示の程、宜しくお願い致します

以上

Aベストアンサー

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(Li)、原子量6.941、リチウムイオン電池</dd>
</dl>

<h3>元素</h3>
<ol class="periodic table">
<li><span class="element">水素</span>元素記号(H)、原子量1.008、酸素と共に水をくつる。</li>
<li><span class="element">ヘリウム</span>元素記号(He)、原子量4.003、不活性ガス</li>
<li><span class="element">リチウム</span>元素記号(Li)、原子量6.941、リチウムイオン電池</li>
</ol>

これに対して、スタイルシートを次のように書いたりします。
dl.periodic.table{counter-reset: atomicNum 0;padding-left:2em;}
dl.periodic.table dt{float:left;font-weight:bold;}
dl.periodic.table dt:before{
content: counter(atomicNum) ". ";
counter-increment: atomicNum;
}
dl.periodic.table dd{margin-left:7em;}
dl.periodic.table dd:before{content:": ";}

ol.periodic.table span.element{float:left;width:7em;position:relative;font-weight:bold;}
ol.periodic.table span.element:before{content:": ";position:absolute;right:0.5em;}

★他にどのようにマークアップされていても、用語とその説明がが区別できるようにマークアップされていれば、デザインはできます。
★デザインのためにDIVやSAPNを追加しているわけではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ものです。デザインのために書いてしまうと、デザインのためにtableを使ったのと大差ありません。
 HTML5では、
※DIVやSPANは他に適した要素がないときのための最後の手段
※文書構造を示すため
 となります。

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(L...続きを読む

Qリストの数字のフォントサイズを変えたい

リストを使ったときに頭につく数字のフォントサイズを小さくすることは
できるのでしょうか?
文章のフォントは<li>の後にフォントタグをつければ小さくなるのですが
リストの数字が小さく出来ません。
これを小さくすることは可能でしょうか?
<ol>
<li>
<li>
</ol>

Aベストアンサー

スタイルシートを使えばできます。
たとえば、

<ol style="font-size:80%;">
<li>サンプル</li>
</ol>

のように記述すると元のサイズの 80% になります。

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&Aランキング