• 締切済み

ｃｓｓについて質問です。

ホームページ作成の勉強をしている者です。 分からないことがあるので質問させてもらいます。 http://www.htmq.com/csskihon/401.shtmlこのサイトのｃｓｓのソースに float:left; /*リスト項目を横に並べる*/ display:inline; 　　　/*リスト項目をインライン表示にする*/ こう書かれていました。 display:inline;ですでにリストが横になるので、float：ｌｅｆｔ；で横に並べる必要があるのですか？ 調べてもいまいち納得いく答えが見つからないので分かる人教えてください。

  • CSS
  • 回答数1
  • ありがとう数0

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

単純に float:left;でfloatさせられますが、そのとき自動的にブロック(display:block;)にもなっています。 display:inline;とすることで、ブロックは解除されて行内要素に再指定されます。 　display:inline;はCSS2から導入されたプロパティで、古いブラウザには認識されません。その場合、この設定は無視されますから、古いブラウザはfloatで並びます。サイズによって少し左による。 　なお、参考にされているサイトは、idを使用すべきでないところに、idを使用しています。 id="header",if="footer" 　また、文書構造ではなくデザインのためのid名になっています。 id="submenue",id="menu01",id="submenu_header",id="submenu_body",id="content"のように 　仕様書には、明確に『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』と書かれています。これは、明らかに誤用です。HTML5では、この誤用の反省から、『文書をよりよく構造化するために、(header,section,footer,aside,figure,navなど)の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』 　headerはsectionなどと組み合わせて一塊の記事集合のheaderを示しますから、文書内に何度も登場する可能性がありますから、くかもり4.01でしたら<div class="header">とclass名でしょう。 id="submenu_body" id="content" 　これらは<div class="section">でしょうね。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • CSSレイアウトについて

    cssによる3カラムを作っているのですがie6で見ると右のカラムが 落ちしてしまいます。 ie6のバグのようでdisplay: inline;を使うなどいろいろと試して みたのですがwidthとmarginの合計で1000px以内にしなければ ならないようなのですがその場合firefoxなどのブラウザで確認 すると若干ではありますが微妙に違いがでてきます。 下記のソースのように特に画像をいれなくてもbackgroundを設定 することによりカラム落ちはしなくなったのですがこの他に解決 方法はあるのでしょうか？ また、なぜbackgroundを設定することにより解決したのかも 全く意味不明なのでご存知の方がおりましたら教えてください。 #contents { width: 1000px; } #left { display: inline; float: left; width: 180px; text-align: left; background: url(); } #center { display: inline; float: left; width: 600px; margin: 0 20px; text-align: left; background: url(); } #right { display: inline; float: left; width: 180px; text-align: left; background: url(); } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ～略～ <div id="contents"> <div id="left">レフト</div> <div id="center">センター</div> <div id="right">ライト</div> </div> ～略～

    • ベストアンサー
    • CSS
  • CSSの優先順位について

    うまく説明できるかわかりませんが・・・ XHTMLとCSSでページを作成しています。 デザインは全て外部CSSを参照しているのですが、 トップページだけ、一部個別設定したいと思っています。 リストメニューのデザインを現在このようにしています。（外部CSS） ul{ list-style-type:none; margin-left:0; padding-left:0; padding:0; margin-top:30px; width:120px; float:left } li{ padding-right:10px; font-size:0.75em; margin-bottom:10px; border-bottom:solid 1px #66aa66 } --------------------------------------- トップページだけ、 ul{ list-style-type:none; margin-left:0; padding-left:0; background-color:#efef77; padding:3px 20px; margin-top:0 } li{ display:inline; padding-right:10px; font-size:0.75em } ----------------------------------- この設定にしたいので、トップページヘッダーにこちらを入力しました。（外部CSSよりヘッダーを優先するとテキストに書いてありました） しかし、 li{ display:inline; } だけは、外部CSSを参照してしまいます。 なぜでしょうか？？ 優先させる為に li display:inline !important; } としてみましたが、ダメでした。 どなたかご教授願いますm(__)m

  • どう変更してもＩＥ６だけＣＳＳレイアウトが崩れてしまいます。

    ＣＳＳレイアウトで、サイトを作成していたのですが、 最近になってＩＥ６で確認してみると、レイアウトが崩れまくっていました。。。 ３カラムレイアウトなのですが、Ｆｉｒｅｆｏｘ等他のブラウザではきちんと表示されるので、なぜかＩＥ６だけ縦１列になってしまいます。。 こちらのサイトでもＩＥ６はレイアウトが崩れやすいという情報がたくさんあり、そちらのアドバイスを参考にしながら１日かけてがんばってのですが、できませんでした。もう限界です（涙） 現在のＣＳＳは、 * { margin:0; padding:0; } .wrapper { width: 740px; margin: 0 auto; } .header { width: 740px; } .main { width: 740 px; /* 両端ブロックとコンテンツを囲んでいるクラスです。 */ } .menu {display: inline; float: left; width: 205px; } .contents {display: inline; float: left; width: 385px; } .affiliate {display: inline; float: left; width: 150px; } .footer { clear: both; width: 740px; } というような状態です。 どなたかアドバイスいただけますと大変幸いです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • IE6のみレイアウトがずれる。

    IE6のみレイアウトがずれる。 CSSで下記のように指定しています。 現状のブラウザであればレイアウトが崩れないのですが IE6で見るとレイアウトが崩れるのです。 #my_navi　#my_contentsL #my_contentsR の三つが横一列に並ばせたいのですが ●　　　　　←#my_navi 　●　　　　←#my_contentsL 　　●　　　←#my_contentsR の様にレイアウトが崩れてしまいます。 何か解決方法が有りますでしょうか? 宜しくお願い致します。 ↓CSSの記述 body { width : 100% ; float: center; display: inline; } #my_body { margin: 0 auto; width : 950px ; } #my_main { width : 950px ; } #my_header { width : 950px ; height: 100%; } #my_headerT { float : left ; width : 950px ; } #my_headerL { float : left ; width : 750px ; height: 260px; } #my_headerR { float : right ; width : 200px ; height: 260px; } #my_navi { float : left ; width : 190px ; display: inline; } #my_contents { float : right ; width : 750px ; display: inline; } #my_contentsL { float : left ; width : 550px ; display: inline; } #my_contentsR { float : left ; width : 190px ; display: inline; } #my_contentsF { float : left ; width : 750px ; display: inline; }

  • CSS 横並びリストの書き方はどちらがよいでしょうか

    スタイルシートで横並びリストを作成するとき、li { display: inline; } を使う方法と、li { display: block; float:left; } を使う方法がありますよね。皆さんは、意識して、使い分けられていますか？ どちらで表現しようか、よく迷います。どちらの方法でも同じレイアウトにできるように思ってしまっていて。。でも自分の気付いていないデメリットがあるのかな？と気になります。「こうしたい場合、こちらのレイアウトだと無理」とか、「これではこのブラウザで表示が崩れる」など、お気づきのことがあれば、教えていただけないでしょうか。 下に、自分で確認用に作ったhtmlがあるので、そのままブラウザで見ていただければと思います。お手数ですが、よろしくお願いします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>横並びサンプル</title> <style type="text/css"> <!-- /* リスト：インライン ------------------------------------------------------------ */ #yoko1 li { display: inline; } #yoko1 a { display: block; float:left; } #yoko1 li { list-style-type: none; margin:0 5px; } #yoko1 a { padding: 5px 10px; margin: 5px; text-decoration:none; border:1px solid #CCFF33; } #yoko1 a:hover { background-color:#CCCCFF; } #yoko2 { clear:left; } /* リスト：ブロック ------------------------------------------------------------ */ #yoko2 li { display: block; float:left; } #yoko2 a { display:block; } #yoko2 li { list-style-type:none; margin:0 5px; } #yoko2 a { padding: 5px 10px; text-decoration:none; border:1px solid #CCFF33; } #yoko2 a:hover { background-color:#CCCCFF; } --> </style> </head> <body> <div id="yoko1"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> <div id="yoko2"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> </body> </html>

    • ベストアンサー
    • HTML
  • CSSでメニューボタンを横一列にしたかったのですが、一ヶ所に固まります。

    CSSでメニューをつくろうとおもい、画像で作ったのですが、、それをul　li　でリスト化し、 div#nav ul { list-style-type: none; } div#nav ul li{ display: inline; left: 10px; top: 50px; width: 710px; } といったかんじで　横一列のメニューを作ったのですが、 left: 10px; top: 50px;　の設定がいけないのか、全部の画像が左　10px　上から50pxのところにあつまってしまい、横一列に並んでくれません。 どうすればよこいちれつにならんでくれるようになりますか？もしくは、もっとよい画像を用いたメニューのつくりかたはありますでしょうか、お願いいたします。

    • ベストアンサー
    • CSS
  • CSSの記法

    インターネット上のサンプルを参考に下記ソース(画像が横一列に並ぶ)を試してみたのですが CSSファイルの　「#list li」の部分の意味がいまいちよくわからないので教えてください。 下記の1又は2の解釈のどちらが正しいのでしょうか。 １．「id="list"」 又は 「li」タグに対して適用する(下記リンクの質問の回答に従えばこちらの解釈？) http://okwave.jp/qa/q8040531.html ２．「id="list"」の要素の配下の「li」タグに適用する 【サンプルのCSS】 　　#list li { 　　　　margin:20px; 　　　　height:140px; 　　　　list-style-type:none; 　　　　float:left; 　　} 【サンプルのHTML】 　　　<ul id="list"> <li><img src="./img/Desert.jpg"></li> <li><img src="./img/Koala.jpg"></li> <li><img src="./img/Tulips.jpg"></li> <li><img src="./img/Penguins.jpg"></li> 　　　</ul> 1．の解釈で正しければ 　　#list { 　　　　margin:20px; 　　　　height:140px; 　　　　list-style-type:none; 　　　　float:left; 　　} 「#list li」　→　「#list」 と変更してもレイアウトに変更はないと思いましたがこれでは横に並んでいた画像が 縦に並ぶようになってしまいました。 2．の解釈が正しければ下記のようCSSファイル内に「#list」を追加して記述しても 「#list li 」が適用されて追加前と比べてもレイアウトに変更はないと思ったのですが 微妙に「#list」の影響を受け（float:right;としているせいか画像が少し右寄りに表示された）ました。 「#list li 」という記述は１と２のどちらの意味になるのでしょうか。 　　#list { 　　　　margin:20px; 　　　　height:140px; 　　　　list-style-type:none; 　　　　float:right; 　　} 　　#list li { margin:20px; height:140px; list-style-type:none; float:left; 　　}

    • ベストアンサー
    • CSS
  • CSSでのマウスオーバーの画像切り替えについて

    現在横型のメニューをCSSで作成しています。 配置はうまく出来たのですが、ロールオーバーがうまくいきません。 マウスオーバーしても画像が切り替わりません。 CSSの記述をどのようにすればいいでしょうか？ 以下ソース ◇HTML <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <ul id="hnavi"> <li id="hnavili1"><a href="#"><img src="img/top-menu-1.gif" width="149" height="60"></a></li> <li id="hnavili2"><img src="img/top-menu-2.gif" width="150" height="60"></li> <li id="hnavili3"><img src="img/top-menu-3.gif" width="151" height="60"></li> <li id="hnavili4"><img src="img/top-menu-4.gif" width="149" height="60"></li> <li id="hnavili5"><img src="img/top-menu-5.gif" width="150" height="60"></li> <li id="hnavili6"><img src="img/top-menu-6.gif" width="151" height="60"></li> </ul> </div> </div><!-- /header --> <div class = "topwrap"> topimg </div><!-- /topwrap --> <div id = "inner"> <div = "mainwrap"> mainwrap </div><!-- /mainwrap --> <div = "sidewrap"> sidewrap </div><!-- /sidewrap --> <div class = "clear"><hr /></div> </div><!-- /inner --> <div id = "footer"> footer </div><!-- /footer --> </div><!-- /wrap --> </body> ◇CSS body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } #hnavi { margin: 0; padding: 0; } #hnavili1 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili1 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili2 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili2 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili3 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili3 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili4 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili4 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili5 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili5 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili6 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili6 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } 宜しくお願いします。

  • CSSで横の段組-センタリングするには？

    CSSで横の段組をし、センタリングしたいのですが、 横の段組のために「float: left;」を使うと、 「margin:0px auto;」と指定しても左寄りになってしまいます。 「float: left;」を消せばセンタリングできるのですが、 そうすると横の段組ができなくなって困っています。 何か単純な間違いをしているのだと思うのですが、ご助言ください。

    • ベストアンサー
    • HTML
  • CSSのdisplayプロパティについて

    スタイルシートのdisplayについてなのですが、ブロックレベル要素をインラインで表示したり、インライン要素をブロックレベルで表示するものですよね？ ブロックレベル要素をインラインで表示する、というのはわかる気がするのですが、インライン要素をブロックレベル要素で表示する、というのはどういった時に、どういう理由で使用するのでしょうか？ 同じくリスト項目として表示する（list-item）、などもリスト項目として表示するなら、はじめからhtmlでリストを作っておけばよいのでは？と思うのですが・・・。 初歩的な疑問かもしれませんが、どう使うものなのかよくわからないので、教えていただけるでしょうか？ よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する