ベストアンサー

CSS　フォントサイズの違うリストの横並び

2008/12/03 11:14

http://www.muji.net/ie/ 上記のサイトのようにグローバルメニューのフォントサイズの違うものを横並びにし、さらにはフォントの変わるところで縦線も入れたいです。リストスタイルには任意の画像を使いたいと思って試行錯誤していますが、どうしてもフォントサイズを変えるとずれてしまいます。特にIE6で見ると何を直して良いのか分からないくらいです。わかりづらい文章で申し訳ないですが教えてください。よろしくお願いします。

onyan
お礼率93% (62/66)

HTML
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2008/12/03 16:53 回答No.3

<!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>Untitled</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css">  </style> </head> <body> <h1>title</h1> <h2>subTitle</h2> <div class="abstract"> <p> 要約 </p> </div> <div class="Text"> <h2>ArticleTitle</h2> <p> 記事 </p> </div>  <ol id="SiteMap"> <li><a href="#">リンク(1)</a></li> <li><a href="#">リンク(2)</a></li> <li><a href="#">リンク(3)</a></li> <li class="sub"><a href="#">リンク(4)</a></li> <li class="sub"><a href="#">リンク(5)</a></li> <li><a href="#">リンク(6)</a></li> </ol> </body> </html>

質問者

お礼 2008/12/05 14:13

ORUKA1951さんありがとうございます！お礼が遅くなって申し訳ありません。なかなかうまく行かず色々試してやっとできました。 CSSって本当に難しいですね。。。頑張って勉強します。ありがとうございました。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2008/12/03 11:55 回答No.2

たとえば <ol id="siteMap"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href="" class="sub"></a></li> <li><a href="" class="sub"></a></li> <li><a href=""></a></li> </ol> というHTMLだと <ol></ol>を絶対配置、blockにしてpaddingを0pxにする。 <li></li>をblockにして、その幅を%で指定してfloatで並べる。隣接セレクタを使って、classセレクタが変わる所でborder: solid 1px blackを指定する。・・・というところでしょうか。背景画像は<ol>で、各リンクの背景は<a>に対して行う。

質問者

お礼 2008/12/03 15:09

ご回答ありがとうございます。＞<ol></ol>を絶対配置、blockにしてpaddingを0pxにする。これは #test{ display:block; padding:0; } ＞<li></li>をblockにして、その幅を%で指定してfloatで並べる #test2 {display:block; padding:●●%; float:left; } ということですか？初心者の質問で申し訳ないのですが教えていただけると嬉しいです。よろしくお願いいたします。

lesstia
ベストアンサー率45% (44/96)

2008/12/03 11:18 回答No.1

この文字はテキストではなく画像ですね。普通に大きさの違う文字が描かれている画像を並べてアンカーにしているだけかと。

質問者

お礼 2008/12/03 11:35

早速ありがとうございます。画像ではなくテキストで作りたいと思っています。説明不足で申し訳ありませんでした。それでも方法としては同じなのでしょうか？面倒でなかったらコードも教えていただけるとありがたいです。よろしくお願いいたします。

関連するQ&A

CSS・フォントサイズ変更はどこをいじれば？
ホームページビルダー17で、以下のサイトのテンプレートをダウンロードして編集中です。 http://nikukyu-punch.com/template/giin1_pink/index.html 本文部分の文字が小さいのでもう少し大きくしたいのです。これまではテーブルタグで作っており、CSSは初心者です。文字部分を右クリックしてスタイルの設定を見ると本文や見出し部分などのfont-sizeが100％だったり75％だったりします。たぶんCSSのfont設定が細かく分かれているのでしょうが… あまり細かく分類せず、右のサイドメニューと本文の文字の大きさを font-size : 14px line-height : 150% にしたいというのが希望です。このようなスタイルの設定の変更はどうすればいいのでしょうか。スタイルシートマネージャーから変更すればいいのでしょうか？一度スタイルを削除すると戻せないようなので、なかなか試行錯誤に踏み出せません。画像などは変更できたのですが。ご教授願えませんでしょうか？
- ベストアンサー
- ホームページ作成ソフト
li ul横並びについて
横並びのメニューを表示させるところまでは出来たのですが、ウィンドウを縮小させると画像の通りリストが画面に合わせてズレてしまいます。 CSSはこのように書いています。 ul.menu{ list-style:none; width:100%; font-size:25px; //margin-left:0px; //margin-top: 642px; position: relative; top: 642px; right: 27px; padding:3px 0px; text-align:center; font-family: 'Gorditas', cursive; } ul.menu li{ list-style:none; display:inline; margin:0px 15px; } ウィンドウを縮小しても横並びのままにはならないのでしょうか？まだまだ勉強途中なのでわかりやすく教えて頂けるとありがたいです。
- ベストアンサー
- CSS
CSSでリストを横並びにし、行頭画像を表示させたい
XHTMLとCSSでのWebページを作成しています。リストを横並びに表示、行頭画像も表示させ、さらにポイントした時に画像が変わるようにしたいのですが、下記の記述では横並びにはできても画像が表示されず困っています。おかしい部分や足りない部分がありましたら、ご指摘お願い致します。 ≪CSS≫ #menu li{ display:inline; list-style-image:url(画像のパス); } #menu li a:hover{ list-style-image:url(画像のパス); } ≪ｈｔｍｌ≫ <div id="menu" name="menu"> <ul> <li><a href="ファイルのパス">文字列</a></li> <li><a href="ファイルのパス">文字列</a></li> <li><a href="ファイルのパス">文字列</a></li> </ul> </div> 試しにdisplayを削除すると、画像はちゃんと表示されるので、画像のパスは間違っていないはずです。何卒、宜しくお願い致します。
- ベストアンサー
- CSS
テーブルの横並び
HTMLで、各テーブルを横並びにする方法を探しています。 <table><tr> <td>【画像】</td> <td>【画像】</td> <td>【画像】</td> 上記で横並びにはなるのですが、一つの枠に仕切りが入っている状態です。これを ------------------- □□□　←横並びになった枠の間にはスペースが空いてます。 ------------------- 上記のように、それぞれがテーブルで区切られ横並びにするようにはできないでしょうか。もしくは枠の表示を消したりして、そういう風に見せられるように出来ないでしょうか。あるブログで見てから、色々と試行錯誤をしたものの自己解決には至りませんでした。
- ベストアンサー
- ブログ
フォントサイズの変更(CSS、Javascript)
いつもお世話になっております。スタイルシートで設定しているフォントサイズを、 <select>タグによるメニューにて、任意のサイズに変更させる機能をつけたいと考えています。 (メニューからフォントサイズを指定する) IEは問題ないのですが、NNだと、まったくだめです。 NNで同じようにフォントサイズを変更するには、どうすればよろしいのでしょうか？問題点*********************************** IE5.01、5.5だと、問題なく変更できました。 NN4.75で行うと、だめでした。 OSはWindows(98、2000、Me)です。記述:*********************************** <head>タグ内 <script language = "javascript">  </script> <body>タグ内 <select name="OP1" onChange="changeFontSize(this);"> <OPTION value="10">10pt</option> <OPTION value="20">20pt</option> <OPTION value="20">30pt</option> </select> ****************************************** 補足：メニューで選択されたフォントサイズを取得して、ページをreloadします。親フレームにフォントサイズを一度格納するのは、他の子フレームすべてにフォントサイズを対応させるためです。
- 締切済み
- JavaScript
list-styleでの画像CSS設定について
list-styleのをCSS設定で画像を指定しています。文字サイズより大きい画像の場合に、うまく位置を調整できないのですが、どのように設定すればよいでしょうか？現在のCSSはこのように設定しています。 .style_1 { list-style-image: url(画像url.gif); } フォントサイズ14ピクセルではピッタリはまるのですが、12ピクセルにするとリスト画像が上部に浮いたような形になってしまっています。また、リスト画像とli要素(文章)までの間隔も離したいです。 CSSに詳しい方がいましたら、ご教授下さいませ。
- 締切済み
- ブログ
CSSで横並び→HTMLの記述は？
最近、独学でプログラミングを学び始めた初心者です。で、HTML&CSSで「メニューリストを横並びにする」にする方法がわかりません。どうしたら良いでしょうか？ CSSでは、 /* すべてのページに適用 - navまわり - */ #nav li { display: inline; list-style-type: none; padding-right: 30px; } で合っていると思いますが、HTMLでは何が間違ってますか？知識が浅くざっくりとした質問で申し訳ありません。これだけの情報だと回答が難しいかもしれませんが、非常に困っております。よろしくお願いします。
- 締切済み
- HTML
リストの数字のフォントサイズを変えたい
リストを使ったときに頭につく数字のフォントサイズを小さくすることはできるのでしょうか？文章のフォントは<li>の後にフォントタグをつければ小さくなるのですがリストの数字が小さく出来ません。これを小さくすることは可能でしょうか？ <ol> <li> <li> </ol>
- ベストアンサー
- HTML
CSSを用いてリストを横並びにして、それを2行にまたがせる方法
CSS を用いて、リストを横並びにしたのはいいのですが、そのリストの数が多く、2行にまたがらざるを得ません。 Firefox ですと枠内に入りきらないリストは自動的に改行して表示してくれるのですが、IE ですと入りきらないリストを右端に無理矢理表示（縦に伸びていきます）し、そのリストの次から2行目と移り変わります。 -- HTML -- <div id=content> <ul> <li><a href="">AAA</a></li> <li><a href="">BBB</a></li> <li><a href="">CCC</a></li> <li><a href="">DDD</a></li> <li><a href="">EEE</a></li> <li><a href="">FFF</a></li> </ul> </div> -- CSS -- #content ul　{ padding: 0; margin: 0; list-style-type: none; } #content li　{ float: left; display: block; padding: 2px 10px 0 5px; margin: 0; list-style-type: none; } 上記の例ですとEEEが1行目に入りきらない場合、Firefox では、EEEが2行目へとなって後が続きます。 IEですと EEE のうち E 1文字だけでも入ると残りの2文字は下方へずれて行きます。そして、FFFから2行目となります。このIEでの不具合で良い解決法があれば、ご教授願います。よろしくお願い致します。
- ベストアンサー
- HTML
横並びのリストが・・・
リストでテキストを横並びにしたいのですが、IEの表示の場合のみ一番右端のテキストが縦書きになってしまいます。解消するにはどうすれば良いでしょうか？ ※IEの文字サイズを小にした場合のみ、他の文字サイズの場合はきちんと端で改行し正しくおさまります。 <STYLE type="text/css">  </STYLE> <div> <p> <ul> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> <li>あああああ</li> </ul> </p> </div>
- ベストアンサー
- HTML

CSS　フォントサイズの違うリストの横並び