こんにちは。
以下サイト

http://www.mirabella.jp/MiraTop.do

のブランドリストのソースを見ると、

<div id="list_en4" class="clearfix"><!-- #list_en -->
<ul>

<li class="initial">A</li>
<li><a href="/ItemPrdList.do?brandId=01394&crumbType=0:brands">ACCESSORIES &amp; BEYOND</a></li>
<li><a href="/ItemPrdList.do?brandId=01376&crumbType=0:brands">ADIDAS BY STELLA McCARTNEY</a></li>
<li><a href="/ItemPrdList.do?brandId=01381&crumbType=0:brands">ALTEA</a></li>
<li><a href="/ItemPrdList.do?brandId=01382&crumbType=0:brands">ALPO</a></li>

<li><a href="/ItemPrdList.do?brandId=01661&crumbType=0:brands">AMERICAN RAG CIE</a></li>
<li><a href="/ItemPrdList.do?brandId=01405&crumbType=0:brands">AMET &amp; LADOUE</a></li>
<li><a href="/ItemPrdList.do?brandId=01406&crumbType=0:brands">ANGLO LEATHER</a></li>
<li><a href="/ItemPrdList.do?brandId=01677&crumbType=0:brands">ANYA HINDMARCH</a>
<li><a href="/ItemPrdList.do?brandId=01355&crumbType=0:brands">A.T</a></li>


<li class="initial">B</li>
<li><a href="/ItemPrdList.do?brandId=01508&crumbType=0:brands">BALMUIR</a></li>
<li><a href="/ItemPrdList.do?brandId=01365&crumbType=0:brands">BRUNO CARLO</a></li>

<li class="initial">C</li>
<li><a href="/ItemPrdList.do?brandId=01513&crumbType=0:brands">CACHAREL</a></li>
<li><a href="/ItemPrdList.do?brandId=01675&crumbType=0:brands">CALLEEN CORDERO</a>

<li><a href="/ItemPrdList.do?brandId=01402&crumbType=0:brands">CHAN LUU</a></li>
<li><a href="/ItemPrdList.do?brandId=01407&crumbType=0:brands">CITRUS</a></li>
<li><a href="/ItemPrdList.do?brandId=01388&crumbType=0:brands">COLETTE MALOUF</a></li>

<li class="initial">D</li>
<li><a href="/ItemPrdList.do?brandId=01478&crumbType=0:brands">DEMI</a></li>
<li><a href="/ItemPrdList.do?brandId=01524&crumbType=0:brands">DELICIOUS FREAKS</a></li>


<li class="initial">E</li>
<li><a href="/ItemPrdList.do?brandId=01369&crumbType=0:brands">ELEY KISHIMOTO</a></li>
<li><a href="/ItemPrdList.do?brandId=01522&crumbType=0:brands">ERIBE</a>
</ul>
</div>

この表示のみでリストが3列で表示されているのですが、
このように3列で表示させるCSSの設定方法をご存知でしたら
教えていただけますでしょうか?

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

A 回答 (2件)

CSSもソースを確認すればよいでしょう。


firefox + Firebug が便利です。
なお、示された部分は、javascriptでdisplay:none;に通常はなっていて、普通は表示されない。アルファベットをクリックすると表示される。
 詳しくは、Firebugで確認してください。

 基本的には、ulをブロックに変換(display:block)して、内部のliもブロックにして、それを親のコンテナブロック内でfloatさせているだけのようです。
「<ul>タグと<li>タグで列表示」の回答画像2
    • good
    • 0
この回答へのお礼

回答ありがとうございます!
最初、Htmlを完全で保存していたんですが、対象のcssファイルが見つからなかったので、インポートで設定しているファイルは見れないのかと思っていました。FireBugはインポートされているcssも参照することができるんですね。まずはこちらでも設定してみて、できるかどうかを
確認してみたいと思います。
ありがとうございました!!

お礼日時:2009/12/31 21:28

私には4列で表示されますが・・・


例があるのでしたら、その例を見るのが手っ取り早いでしょう。

ソースを見ると、A-E, F-L, M-R, S-Z がそれぞれ異なったul要素の子要素になっています。それぞれのul要素にはfloat: left;が指定されています。基本的には、これによって、4つのul要素が左から順に並び、リストが4列で表示されるように見えます。

しかし、これだけでは、ul要素の幅と親要素の幅の関係によっては、ul要素が横に4つ並ばず、3つが並んで残り1つは(改行されたように)下に表示されることもありえます。

実際にはそうなっていないのは、ul要素の親要素の幅(*1)が、各ul要素の幅(*2)、に対して大きく、ul要素を4つ並べることができるように設定されているからです。

*1 正確には親の親の親である<div id="brandlist">が決定している
*2 子要素の<li class="initial">が決定している
    • good
    • 0
この回答へのお礼

回答遅くなり申し訳ありません。
kaorine様が指摘された、Divタグとliタグのbrandlistとinitialを
設定に反映してみたところ設定することができました。
Firebugでここまで見れるとは知らなかったものですから
大変参考になりました。

こちらで解決です。

ありがとうございました!

お礼日時:2010/01/02 12:43

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

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

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

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

QTARGET=_blankと、

リンクに触れただけで、別ウインドウを開くには、どうしたら良いんでしょうか?
<a TARGET=_blank href=""onMouseOver="location.href='リンク先'"></a>
上は、どこが間違っているのでしょうか?
        

Aベストアンサー

<a href="" onMouseOver="window.open('リンク先')">ccc</a>
とかで良いのでは?

window.openについての詳細は書籍ネット等々で調べてください。

Q戻る

戻る機能を実現するのに
?に実際のURLを入れないでできるでしょうか?

Aベストアンサー

戻るはjavascriptを利用すると便利です。

<a href="javascript:history.back();">1つ前のページ</a>

Qで表示されない。

パソコンやりはじめてちょっとの初心者です。
日記とかにリンクを上の通りやって,この<a href=100q-a.htm>こちら</a>
のようにリンクしてるのに,表示されません。
けど,ファイルとして開くとちゃんと文字が移るんですけど…。
これって、100q-a.htmというのがまずいんでしょうか?
できれば20日までに教えてくださるととても嬉しいです。
よろしくお願いします。

Aベストアンサー

 補足を拝見いたしました。回答としては#7、#8の方と同じになりますが、以下のことをご確認下さい。

・ファイル名が完全に同一である。すでの他の方がおっしゃっていますが、大文字小文字、htmとhtml、日本語と英語の違いです。簡単なのは、リンク先のページのファイル名をそのままコピーしてソースに貼り付けるのが良いかと思います。
 もしアップロードした先でリンクがうまくいっていないと、もともとのページのファイル名に日本語(全角)が含まれている可能性があります。インターネット上では、ファイル名に全角は使えないからです。パソコンでは問題なく使えるので、パソコンで見ているときには気がつきません。

・問題のファイルが、リンク元(<a href="~のあるページ)と同じディレクトリ内にある。
 つまり同一フォルダ内にあり、そのフォルダの中でさらに小分けにされた別のフォルダや、その上のフォルダではないということです。
 Aフォルダの中にBフォルダ、Cフォルダ、Dフォルダがあるとすると、そのリンク元とリンク先が同じフォルダ内にあり、AフォルダとCフォルダに別々の保存されていない、ということです。これは、ページを保存してあるパソコン内ではなく、アップロードした先のディレクトリを見てください。
 アップロードはFTPソフトなどお使いでしょうか?そうだと見分けやすいのですが・・。当該サイトに接続すると、アップロード先が表示されると思います。
 前回と同じ回答になりますが、ファイル名自体が受けつけられないということはないと思います。実は同じファイル名でアップしている方はたくさんいらっしゃるようです。(察するに、最近はやりの「○○へ100の質問」ではないでしょうか?)
 また、表示されない、ということも先に確認するべきでした。これは、「そのようなファイルは存在しないか、または削除されました」という、レンタルした先からのメッセージが表示される、ということですよね?
 もし、ページが真っ白なまま、というのであればその真っ白なページのままソースを開いてみてください。

 補足を拝見いたしました。回答としては#7、#8の方と同じになりますが、以下のことをご確認下さい。

・ファイル名が完全に同一である。すでの他の方がおっしゃっていますが、大文字小文字、htmとhtml、日本語と英語の違いです。簡単なのは、リンク先のページのファイル名をそのままコピーしてソースに貼り付けるのが良いかと思います。
 もしアップロードした先でリンクがうまくいっていないと、もともとのページのファイル名に日本語(全角)が含まれている可能性があります。インターネット上では、フ...続きを読む

Q
  • カテゴリ名

  • でh2の文字を小さくしたい

    H2の文字を小さくしたいと考えていますが、
    スタイルシートでなかなか再現できません。
    下記のように設定していますが間違いがありますでしょうか?

    xxx.html
    <div id="box-cat">
    <ul>
    <li><h2>カテゴリ名<h2></li>
    <li><h2>カテゴリ名<h2></li>
    </ul>
    </div>

    xxx.css
    #box-cat {
    width:200px;
    }

    #box-cat h2 {
    font-size:11px;
    font-weight:normal;
    }


    お力をお貸し下さい。

    Aベストアンサー

    ★そもそも<LI>タグで<H2>タグを使っているのが間違いかもね。
    ・どうして<H2>タグなの?→<LI>タグにいろいろと記述すればよいのでは?
     下に2つの解決策を載せます。どうぞ。

    解決策1:
    #box-cat H2{
     MARGIN:0em 0em 0em 2em; ←ここがポイント!
     FONT-SIZE:11px;
     FONT-WEIGHT:normal;
    }
    ※『#box-cat』と『xxx.html』はそのままで良い。

    解決策2:
    #box-cat2 LI{
     FONT-SIZE:11px;
     FONT-WEIGHT:normal;
    }
    ※『#box-cat』はそのままで良い。

    ●xxx.html
    <UL id="box-cat">
    <LI>カテゴリ名
    <LI>カテゴリ名
    </UL>

    ・以上です。これで一様、文字は小さくなりました。→私の環境での結果論!

    Qトップへ これ良いですか?

    3階層のリンクでどこからでも一番上のトップindexに戻る場合は、
    <a href="/">トップへ戻る</a>
    これで、文法上とか回線上とかSEO的に問題ないですか? それとも
    <a href="index.html">トップへ戻る</a>
    <a href="../index.html">トップへ戻る</a>
    <a href="../../index.html">トップへ戻る</a>
    とかの方がいいですか?
    あと
    2階層目imageフォルダ内の画像は、
    どこからでも指定する場合は、これも
    /image/aa.png これで、どこからでも表示出来るみたいですが
    image/aa.png とか ../image/aa.png とか ../../image/aa.png
    上と下は、どちらがいいでしょうか? <(_ _)>

    Aベストアンサー

    <a href="/">これで問題ありません。(絶対パス指定です)
    通常サーバのでは、ファイル名の指定が無い場合、index.htmlなどにアクセスするように設定を行います。
    逆に言えば、この設定の無いサーバでは、<a href="/index.html">としなければなりません。
    <a href="../index.html">のような相対パスは、ローカルPCでの作成時の絶対パスが異なるような環境の場合には良いと思います。

    絶対パスも、相対パスも問題はありませんので、作成する環境などで使い分けられると良いと思います。


    人気Q&Aランキング

    おすすめ情報