- ベストアンサー
list-style-type部分だけ大きくしたい
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
他に1台あるパソコンのブラウザも最新版に近いので、試す環境がないのですが… こちらに対応ブラウザ・バージョンがずらっと並んでいるので、 list-style-image は、結構使えるように思います。 （参考URLとおなじものです） http://www.htmq.com/style/list-style-image.shtml
その他の回答 (1)
- sa2874
- ベストアンサー率48% (18/37)
windows vistaで、google Chrome、IE、Firefoxのうち、 google Chromeだけなら、これでできました。 <ul style="list-style-type:disc;"> <li style="font-size:xx-large;"><span style="font-size:medium;">リストの中身</span></li> </ul> IE、Firefoxでは変わらなかったので、画像を用意して使うしかないかもしれません。 画像はこのように指定します。 <ul style="list-style-image: url('画像へのパス');"> <li>リストの中身</li> </ul>
お礼
ありがとうございます。 せっかくChromeで表示できる方策を試していただいたのですが、おっしゃる通りで、なるｖべくクロスプラットフォームで表示させねばいけないのです。 ただ、list-style-imaageに画像を指定する方策でも、今回のChromeだけなど、ブラウザによって表示されないことはないでしょうか？ 古いバージョンは無視すればいいですが、モダンブラウザは対応しないといけないです。 せめてIE7以降、Firefox3以降など。
補足
IE8とFirefox8で黒丸（disc）を比較すると、Firefoxでは若干黒丸と文字との隙間が広い感じしてこれでも直したいのですが、IE8ですと隙間がさらに広く辟易しております。 隙間の調整はどのようにしたらできるでしょうか。
関連するQ&A
- list-styleの指定方法
<li>の記述方法で、 １、素のまま＞＞大きめの黒丸 ２、一旦list-style:none;をかけた後に別CSSでlist-style:disc;と上書きした場合＞＞少し小さめの黒丸 となるのですが、これはどういう違いでしょうか？
- 締切済み
- CSS
- list-styleでの画像CSS設定について
list-styleのをCSS設定で画像を指定しています。 文字サイズより大きい画像の場合に、うまく位置を調整できないのですが、どのように設定すればよいでしょうか？ 現在のCSSはこのように設定しています。 .style_1 { list-style-image: url(画像url.gif); } フォントサイズ14ピクセルではピッタリはまるのですが、12ピクセルにするとリスト画像が上部に浮いたような形になってしまっています。 また、リスト画像とli要素(文章)までの間隔も離したいです。 CSSに詳しい方がいましたら、ご教授下さいませ。
- 締切済み
- ブログ
- スタイルシートで作成したリスト
スタイルシートで作成したリストが含まれるwebページを印刷したいのですが、 リストの数字の部分が、文字化けしてしまいます。 （●に置き換わってしまう） どのようにすれば、数字をきちんと表示させたまま印刷することができるのでしょうか？ リスト部分は .LI { list-style-type: decimal; list-style-position: outside; margin-top: 0px } としています。
- ベストアンサー
- HTML
- html リストのマークについて
リストのマークについて質問です。 １、ulとolがありますがlist-style-typeを指定すると、この二つのタグに機能的違いは無くなるのでしょうか。 ２、list-style-typeで指定すると、リストを増やせば自動で記号がつきますが、この自動的につく記号は決められたもの以外の、自由な文字や記号を指定することはできないでしょうか。
- ベストアンサー
- HTML
- メニューと本文でリストのスタイルを変えたい
HTML５とＣＳＳの本を買ってきて、エディターでヘッター、メニュー、本文のレイアウトを作り、中身を作っているところです。メニューのスタイルをＣＳＳで指定したのですが、本文のリストも当然同じになります。本文のスタイルを（できたらarticleなどごとに）別に指定しようと思いましたが本にはそこまで書いてありません。ネットで調べると、ul,liをclass,idで区分するようにという記述がありましたが、navのリストはこのスタイル、このarticleはこのと指定できないのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- 携帯でスタイルシートが利用できますか？
携帯電話で見れるホームページで文字サイズの指定をしたいと思っております html言語で<font size="7">フォントサイズを指定したい</font>とすれば文字サイズが変更できるのですが スタイルシートを利用して下記のように記述すると フォントサイズが変更されません。携帯ではスタイルシート利用できないのでしょうか？詳しい方お教えください。 <style type="text/css"> .large {font-size:large} .small {font-size:small} </style> <body> スタイルシートで<span class="large">フォントサイズを指定したい</span> </body>
- ベストアンサー
- HTML
- ＣＳＳのリストスタイルについて
別の人が作成したホームページの更新をしています。 そのホームページ全体に ul と li に list-style-noneのスタイルシートがかかっています。 新規に作成するページで 数字のリスト １．目次 ２．手引きについて ３．今後の流れについて というような数字のリストを作成したいのですが <ol> <li>目次</li> <li>手引きについて</li> <li>今後の流れについて</li> </ol> とすると通常目次についての前に数字の１が 手引きについての前に数字の２が表示されるかと思うのですが 表示されません。 ulとｌｉのlist-style-noneになってるからなのですが これは他のページがくずれるので解除できません。 どのような記述をすれば表示されるでしょうか？ 初歩的な質問で申し訳ありませんが ご回答よろしくお願いいたします。
- ベストアンサー
- CSS
- リストで間が開いてしまう・・・
xhtml&cssでサイト作成を行っているのですが、 リストをインラインでならべて、 list-style-type: none; でリストの黒丸を消して、 そこに画像を入れてならべようと思ったのですが、 画像と画像の間に隙間が開いてしまいます。 ソースはこちらです。 ---XHTML------------------------- <div id="@"> <ul> <li> <img src="@" /> </li> <li> <img src="@" /> </li> <li> <img src="@" /> </li> </ul> </div> ----XHTML---------------------------------- ----CSS------------------------------------ div#@@@@ ul{ display: inline; list-style-type: none; margin: 0px; padding: 0px; } div#@@@@ li{ display: inline; list-style-type: none; margin: 0px; padding: 0px; } ----CSS------------------------------------ 念のために、ulとliの両方を指定しておきました。 (通常は、liだけでよいです。） このとおりになるのですが、 これで、隙間をなくす方法を知っていたら教えてください！ お願いします！
- 締切済み
- HTML
- HTML list-styleに見出し
HTMLで、ブラウザ上での表示が 以下の様になるよう組んでいます。 ----------------------------------- コンテンツ大見出し （←大見出しはh3を使用予定） 1．見出し見出し見出し見出し 内容テキスト内容テキスト内容テキスト内容テキスト 内容テキスト内容テキスト内容テキスト内容テキスト 2．見出し見出し見出し見出し 内容テキスト内容テキスト内容テキスト内容テキスト 内容テキスト内容テキスト内容テキスト内容テキスト ～以下同様7、8項目くらい下に続く ----------------------------------- この場合、1～7項目まで続く、いわゆるリストなので list-styleを使った方がいいかな、と思い、当初 ↓ ----------------------------------- <ul> <li> <h4>見出し見出し見出し</h4> テキスト内容テキスト内容テキスト内容テキスト内容 </li> <li> <h4>見出し見出し見出し</h4> テキスト内容テキスト内容テキスト内容テキスト内容 </li> ～ </ul> ----------------------------------- と書いてみましたが、 <li>の中には<h>タグを入れるべきではないと拝見し、 では<dl>を使って ↓ ----------------------------------- <dl> <dt>見出し見出し見出し</dt> <dd>テキスト内容テキスト内容テキスト内容テキスト内容 </dd> <dt>見出し見出し見出し</dt> <dd>テキスト内容テキスト内容テキスト内容テキスト内容 </dd> ～ </dl> ----------------------------------- と組んでみました。 が、そうすると<dt>に番号がふれないのです。 どこかのサイトで、以下の様にスタイルシートに記述すればOKとありましたが dt { display: list-item; list-style: disc outside; … } 上記を記述しても実現できませんでした。 勿論「disc」の部分を「decimal」にしました。 実現方法だけで考えれば、 ・<dl>を使用して、見出し文の頭に自分で数字をつける ・<ul><li>を使用して、見出しの部分だけ<p>か何かで囲み、 スタイルシートで文字の大きさ太さを調整する ・list-styleではなく、各項目<div>で囲み、見出しは<h>タグを使う など、方法はあるのですが、 ・番号がふられている見出しはそれなりに重要視しているので できればhタグか、見出しだと分かるタグを使用したい。 ・番号がふられているリスト（のようなもの）なのでlist-styleが適当のような気がする。 このような場合、皆さんはどう記述されていますか？ どのような記述が正しいのでしょうか。 宜しくお願いします。
- ベストアンサー
- CSS
- スタイルシートでの文字サイズ指定について
ホームページの文字表示サイズについての質問です。 私は全てWindows Vistaのメモ帳で作っているのですが、文字サイズを <Font Size="サイズ"> で指定するやり方では、ＭＡＣで有効ではないと分かり、スタイルシートの外部から引き出すやり方で、まずs.cssに、 BODY { font-size: 13px } と書き、index.htmlに <head> <style Type="text/css"> <!-- body,td {line-height:15pt;} --> </style> <link href="s.css" rel="stylesheet" type="text/css"> </head> と打ち込んでみました。 しかし、こうするとMacX10.5では文字化けを起こしてしまいました。 <link href="s.css" rel="stylesheet" type="text/css"> を挿入するやり方がどこかおかしいのでしょうか。 または、文字サイズの指定のやり方が、他にもあるのでしょうか。お手数かと思いますが、どうかお助けください。
- 締切済み
- HTML
お礼
対応ブラウザ表URL、誠にありがとうございました！ とても役に立ちます