- ベストアンサー
ｃｓｓでｌｉの書き方
Mee-meの回答
- Mee-me
- ベストアンサー率27% (5/18)
両方正解です。が、私は前者をお奨めします。 前者なら liに効かせたいとき li{～} liの中のstyle3に効かせたいとき li.style3{～} li.style3の中のaに効かせたい時 li.style3 a{～} と応用範囲が広くなるのがその理由。本当はulかolに付けたい所かも。 何をされたいのかわからないので、もう少し情報を出されると、的確な答えが戻るかもしれません。
関連するQ&A
- CSS で li を float させる方法
リスト項目を横並びにfloatさせたいいんですが、 li {list-style:none url(../image/icon/article.png) inside;} と指定すると、floatできないようです。 どうすればlist-styleを指定したliをfloatさせることできますか？ コートは以下のようにしています。 よろしくお願いします。 【HTML】 <div class="YYY"> <ul> <li class="movie"><a href="">MOVIE</a></li> <li class="photo"><a href="">PHOTO</a></li> </ul> </div> 【CSS】 .YYY {margin:10px 0;} .YYY ul {margin:0px;padding:0px;} .YYY li.photo {float:left;list-style:none url(photo.png) inside;} .YYY li.movie {float:left;list-style:none url(article.png) inside;}
- ベストアンサー
- HTML
- CSSでリスト[li]の表示がズレる
HTMLの無料テンプレートを使おうとこちら http://simple.sub.jp/temp.htm からEタイプ（サイズ固定）をダウンロードしたのですが ローカルで見てみるとfirefoxでヘッダー下のリンク（liで記述）がずれます。 添付画像：firefoxでのスクリーンショット 修正しようと見てみましたがどこが悪いのか分かりません。 「.topnavi li」だと思うのですが、どこが悪いのでしょうか？ ご指摘お願いいたします。 HTMLの該当部分 <div id="banner"> <h1><a name="TopofPage">ここにサイトのタイトル</a></h1> </div> <div class="topnavi"> <ul> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> <li><a href="#">リンク</a></li> </ul> </div> cssの該当部分 .topnavi{ float:left; width:100%; background:#99ccff; border-width:1px 0 1px 0; border-style:solid #999; height:20px; } .topnavi li{ display:block; float:left; width:125px; text-align:center; font-size:1.2em%; list-style-type:none; }
- ベストアンサー
- HTML
- olタグ・liタグで一部のリストを横並びにした
olタグ・liタグで一部のリストを横並びにしたい場合 olタグに display: inline; list-style-type: none; としても意味がないのでしょうか? <style type="text/css"> ol.test1{ display: inline; list-style-type: none; }</style> <ol class="test1"> <li><a href="#">階層1</a></li> <li><a href="#">階層2</a></li> <li><a href="#">階層3</a></li> </ol> としても横にはならずに番号が消えました。 なので li.test2{ display: inline; list-style-type: none; } として <ol> <li class="test2"><a href="#">階層1</a></li> <li class="test2"><a href="#">階層2</a></li> <li class="test2"><a href="#">階層3</a></li> </ol> としたのですが liの数だけスタイルシートを指定しないとダメなのでしょうか? <ol> <li class="test2"><a href="#">階層1</a></li> <li><a href="#">階層2</a></li> <li><a href="#">階層3</a></li> </ol> のように一つだけクラスに入れたら そこだけ番号が消えた上 横並びにはなりませんでした。
- ベストアンサー
- CSS
- wordpress でのhtml 記述とCSS
wordpressのテーマを作成しているのですが、 PHP内のhtml記述で、メニューリストを横並びに表示させたくて 投稿ページと固定ページをリストメニューにしています。 が、投稿ページのli要素が横並びになってくれません。 どこが間違っているのでしょうか。 【html】 <ul> <span class="menu"><?php wp_list_categories('title_li='); ?></span> <li class="menu"><a href=#" target="_self">Stance</a></li> <li class="menu"><a href="#" target="_self">Artists</a></li> <li class="menu"><a href="#" target="_self">Disc</a></li> <li class="menu"><a href="#" target="_self">Video</a></li> <li class="menu"><a href="#" target="_self">Contact</a></li> <li class="menu"><a href="#" target="_blank">teitter</a></li> </ul> 【css】 .menu{ display:inline; margin-right:85px; text-decoration:none; list-style-type: none; }
- 締切済み
- ブログ
- CSSでロールオーバーのやり方を教えてください。
はじめまして。 現在CSS勉強中の者です。 初心者サイトには2つ分画像一枚にして移動させるようなことが書いてありましたが、これ以外に方法はありますでしょうか？ なければこの方法で作ろうと思うのですが、すでにオンマウス時とオフマウスの時の画像を別々に作っていますので、こちらでマウスオーバーさせる方法があればうれしいです。 htmlは以下のように記述しています。 <ul> <li><a class="home" href="index.html">home</a></li> <li><a class="menu" href="menu/index.html">menu</a></li> <li><a class="access" href="access/index.html">access</a></li> <li><a class="coupon" href="coupon/index.html">coupon</a></li> <li><a class="rec" href="menu/index.html#recom_item">rec</a></li> <li><a class="qa" href="qanda/index.html">qa</a></li> <li><a class="contact" href="contact/index.html">contact</a></li> <li><a class="recruit" href="recruit/index.html">recruit</a></li> <li><a class="company" href="company/index.html">company</a></li> <li><a class="school" href="school/index.html">school</a></li> </ul> これはとあるサイトを参考にしたのですが、なぜか<a>○○○</>の中の文字が表示されていません・・・これもわからずじまいでした。 基本的なCSSは理解しているような気がしてたんですが・・・ どうかご教授よろしくお願いいたします。
- ベストアンサー
- HTML
- IE7で <li> の一部が消える
IE7で横並びの<li>の一部が消えます。（Firefoxでは大丈夫） パソコンのフォントや大きさにもよると思うのですが 2列目の右側の「けけけ・・・」が消えます！ 「くくく」や「けけけ」に半角でも足したり削除すれば現れたり 右側に「けけけ」がギリギリにハマるかハマらない様な微妙な場合に出る現象です。 HTMLの書き方等が間違っているのでしょうか？ <html> <head> <style type="text/css"> <!-- .xxx{ margin: 0 auto; width: 797px; background: #000;} .xxx ul{ margin: 0 0 0 12px; padding:0; list-style: none; font-weight: bold; line-height: 2;} .xxx li{ float: left; margin: 5px; text-align: center; white-space: nowrap;} .xxx a{ color: #FFF; text-decoration: none; border:1px solid #999; padding: 4px 5px 1px; } --> </style> </head> <body> <div class="xxx"> <ul> <li><img src="http://www.okweb.ne.jp/images/logo_top.gif" width="200" height="125" alt="OK"></li> <li><a href="index.html">ああああああ ああ</a></li> <li><a href="index.html">いいいいいい</a></li> <li><a href="index.html">ううううう</a></li> <li><a href="index.html">えええええ</a></li> <li><a href="index.html">おおおおおお</a></li> <li><a href="index.html">かかかかかかかか</a></li> <li><a href="index.html">きききききききき</a></li> <li><a href="index.html">くくくくくくくくくくくくく</a></li> <li><a href="index.html">けけけけけけ</a></li> <li><a href="index.html">ここここここ</a></li> <li><a href="index.html">さささささ</a></li> </ul> <br style="clear:both"> </div> </body></html>
- ベストアンサー
- HTML
- CSS スタイルシートについて教えてください
下記ページのブラウザの幅を縮めていっても、 <div class="quarter">と<div class="threequarter">は、 横並びで固定されています。 http://imperavi.com/kube/typo/ 一方、フレームワークをダウンロードし、 同様のコードを記述し、ブラウザの幅を縮めると、 <div class="threequarter">が<div class="quarter">の 下部に落っこちてしまいます。 記述したコード（抜粋） <div class="wrapper"> <div class="row"> <div class="quarter"> <ul class="list-toc"> <li><a href="#toc-inline">Inline elements</a></li> <li><a href="#toc-preformatted">Preformatted text</a></li> <li><a href="#toc-blockquotes">Blockquotes</a></li> </ul> </div> <div class="threequarter"> <h1>hello,world</h1> </div> </div> </div> レスポンシブなフレームワークなので、当然の動きだと思われますが、 上記URLの様にブラウザの幅を縮めても、左右の幅を最低限確保するには、 CSSにどのような記述を追記すればよいか教えてください。
- ベストアンサー
- CSS
- CSSの添削をお願いします。リンク色が反映しません
閲覧ありがとうございます。下記CSSの 「.CLASS li a:link,a:visited{ color:red; text-decoration:none;」 の部分が反映されず、ブラウザの標準設定のままになってしまいます。 本来のstyleの全文はbodyや他のクラスの記述もしているのですが、それらが影響しているわけではないことを確認してあります。 <style> .CLASS ul{ padding:0; } .CLASS li{ border-top: solid pink 1px; list-style-type: none; } .CLASS li a:link,a:visited{ color:red; text-decoration:none; background-color:lightgray; display: block; } .CLASS li a:hover { background-color:gray; } </style> <div class="CLASS"> <ul> <li> <a href=""> 反映されてない…リンク文字色red、デコレーションnone</a> </li> <li> <a href="">反映されてる…リンク背景色lightgray、ホバー背景色gray</a> </li> </ul> </div> 宜しくお願いします
- 締切済み
- CSS
- inline-blockでliが横並びになりません
inline-blockを使って<li>を横並びにしようとした所、IE、chrome、fox(最新版)で 確認すれば横並びにはなっていますが、Dreamweaver cs4で見ると縦並びのままで、 使用する予定のブログで確認しても縦並びのままです。 ブログのテンプレCSSも見直しましたが原因になりそうなのが見つからず、 Dreamweaverでも横にならないので何か間違っているのかなと思いますが、 何を間違えているのかがわかりません。。。 なお、liは入り子で使用するつもりなのですが、該当するliだけ横にするのは問題ありでしょうか? また、画像サイズは縦長・横長サイズが混在するので下記のようにしてますが、関係してるのでしょうか? イメージ的には添付画像のようなのを希望してます。 すいませんが、ご教授お願いします。 <style type="text/css"> li.e { display:inline-block; vertical-align:top; text-align: center; overflow:visible; width:150px; } li.e img { max-height:100px; width:150px; } </style> <ul> <li class= "h">あいうえお</li> <li class= "w"> <ul> <li class= "e"><a href="./a.jpg" ><img src="./a.jpg"><br> あああああああああああああああああ</a></li> <li class= "e"><a href="./a.jpg" ><img src="./a.jpg"><br> いいいいいいいいいいいいいいいいいい</a></li> <li class= "e"><a href="./a.jpg" ><img src="./a.jpg"><br> うううううううううううううううううう</a></li> <li class= "e"><a href="./a.jpg" ><img src="./a.jpg"><br> ええええええええええええええええええええ</a></li> </ul> </li> </ul>
- ベストアンサー
- CSS
- <li>で並べたメニューのリンク色指定class
<li>で並べたメニューのリンク色指定をクラスごとにする方法が分からず困っています。 図のような状態で、MENUは（赤）、TOPは（青）と２種類の色分けをしたメニューバーを作っています。 それぞれ、a:hoverのときに色が薄くなるよう指定したいのですが うまくいきません。 ●現在やっている方法 ・htmlでリストを組み、それぞれリンクタグにクラス指定 MENU（赤） … class="menu" TOP（青） … class="top" ・cssでclassのリンク色a、a:hoverを指定 【html】 <ul> <li><a href=～ class="menu">MENU</a></li> <li><a href=～ class="menu">MENU</a></li> <li><a href=～ class="menu">MENU</a></li> <li><a href=～ class="top">TOP</a></li> </ul> 【css】 a.menu:link { color: #000000; border-left-width: 5px; border-left-style: solid; border-left-color: #ff0000; padding-left: 5px; font-size: 10px; margin-right: 10px; } a.menu:hover { color: #cccccc; border-left-width: 5px; border-left-style: solid; border-left-color: #ffc5c5; padding-left: 5px; font-size: 10px; margin-right: 10px; } …class="top"（青）も同じ感じ ---------------------------- クラスごとのリンク色指定がうまく認識されていない気がします。 記述が間違っているのでしょうか？それともそもそもこの方法が間違っているのでしょうか？ お恥ずかしながらこの場を借りて質問させて頂きました。 色々調べてみたのですが、苦戦しています。お知恵を貸して頂けると助かります。
- 締切済み
- HTML