ベストアンサー list-styleはolでもulでも使うのですか 2018/12/20 11:30 CSSのlist-styleプロパティは、<ol>でも<ul>でも変わりなく使うのですか？ 宜しくお願いします。 みんなの回答 （1） 専門家の回答 質問者が選んだベストアンサー ベストアンサー t_ohta ベストアンサー率38% (5320/13881) 2018/12/20 12:31 回答No.1 どちらでも使えますし、「display: list-item;」と指定した要素ならなんでも適用されます。 質問者 お礼 2018/12/20 13:00 ありがとうございます 広告を見て全文表示する ログインすると、全ての回答が全文表示されます。 通報する ありがとう 0 カテゴリ [技術者向] コンピュータープログラミング・開発CSS 関連するQ&A ulとol http://www.tagindex.com/stylesheet/list/list_style_type.html を見てもよくわからないのですが ulとolは何が違うのでしょうか？ 数字を使って 1.リスト項目 2.リスト項目 3.リスト項目 としたい場合、 ulとolのどちらを使えばいいですか？ UL OL タグの使い方 「以下」もわからずに <BR>以下としていますが、 以下と1.順序付きリスト...の間が開かないようにしたいのですが 良い方法はありますか？ --------以下見え方 ----- ・順不同リストULタグ 以下 <-------------- ここに隙間をなくしたい。 1.順序付きリストolタグ 2.同じく --------ソース---------- <UL> <LI>順不同リストULタグ <BR>以下 <OL> <LI>順序付きリストolタグ <LI>同じく </OL> </UL> <ul>と<li>リストマークを消すのはどちら？ CSSの質問です。 <ul>と<li>でリストマークを消すために list-style-type:noneとするのは<ul>と<li>のどちらに設定するのが正しいですか？ どちらに設定してもリストマーク消えますけど。 どちらに設定したら規格上違反とかありますか？ ネットワークエンジニアとは？技術職の未来を考える OKWAVE コラム ul,olの画像の位置 下のように書いたときに画像とaaaaの高さの位置関係を調整する方法を教えてください。 画像サイズは20px×20pxです。 <style type="text/css"> <!-- body { font-size:medium; line-height:120%; } ul { list-style-image:url("gazou.jpg"); } //--> </style> </head> <body> <ul> <li>aaaa</li> </ul> </body> ulやol、どの階層に居てもOKなcss記述方法 例えば、こんな場合でも <ol> <li> <ul> <li></li> <li></li> <li> <ol> <li></li> <li></li> <li> <ul> <li></li> <li></li> <li></li> </ul> </li> </ol> </li> <li></li> <li> <ol> <li></li> <li></li> </ol> </li> </ul> </li> <li></li> <li></li> </ol> こんな場合でも <ul> <li> <ul> <li></li> <li></li> <li> <ul> <li></li> <li></li> <li> <ul> <li></li> <li></li> <li> <ul> <li></li> <li></li> <li></li> </ul> </li> </ul> </li> </ul> </li> <li></li> <li> <ol> <li></li> <li></li> </ol> </li> </ul> </li> <li></li> <li></li> </ul> どの階層上のol、ulでも ulのliには、list-style-typeのdisc(・)が付き、 olのliには、list-style-typeのdecimal(1、2、3…)が付く cssのシンプルな記述方法を教えて下さい。 何も設定しないと、ulのliが階層によってcircle(○)だったりsquare(■)だったり。 ul liで設定すると、ul内にあるol liが意図しないマークになる。 liのみ設定すると、ulかolのどちらかで意図しないマークになる。 ひょっとしたら、いろんな階層に居る場合を想定した記述方法(ul ol liとか ol ol liとか) をするしかやり方はないのでしょうか？ ＣＳＳのリストスタイルについて 別の人が作成したホームページの更新をしています。 そのホームページ全体に ul と li に list-style-noneのスタイルシートがかかっています。 新規に作成するページで 数字のリスト １．目次 ２．手引きについて ３．今後の流れについて というような数字のリストを作成したいのですが <ol> <li>目次</li> <li>手引きについて</li> <li>今後の流れについて</li> </ol> とすると通常目次についての前に数字の１が 手引きについての前に数字の２が表示されるかと思うのですが 表示されません。 ulとｌｉのlist-style-noneになってるからなのですが これは他のページがくずれるので解除できません。 どのような記述をすれば表示されるでしょうか？ 初歩的な質問で申し訳ありませんが ご回答よろしくお願いいたします。 メニューと本文でリストのスタイルを変えたい HTML５とＣＳＳの本を買ってきて、エディターでヘッター、メニュー、本文のレイアウトを作り、中身を作っているところです。メニューのスタイルをＣＳＳで指定したのですが、本文のリストも当然同じになります。本文のスタイルを（できたらarticleなどごとに）別に指定しようと思いましたが本にはそこまで書いてありません。ネットで調べると、ul,liをclass,idで区分するようにという記述がありましたが、navのリストはこのスタイル、このarticleはこのと指定できないのでしょうか？ UL OL タグのインデントについて UL OLタグでリストを作った時、通常下記のように表示ますが、 リスト ・項目１ ・項目２ ・項目３ これを リスト ・項目１ ・項目２ ・項目３ のように<li>でくくったものをインデントさせないで表示することは可能でしょうか？ リスト（ul / li）タグの左インデントの解除 HTML、CSSの初心者です。 リスト（ul / li）タグの左インデントの解除の仕方がわかりません。 IE系とMozila系でインデント解除の方法を教えていただけないでしょうか。 ◆現在の書き方 ----------------- ・HTML <ul id="navi"> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> </ul> ----- ・CSS #navi ul {list-style: none; margin: 0; padding: 0;} #navi li {list-style: none; float: left; margin: 0; padding: 0;} ----------------- よろしくお願いいたします。 CSSIE7でレイアウトが崩れます（リストスタイル..) はじめまして ノブタです TAGの掲示板でもご質問いたしています。 急いでいますのでなりふり構わずすみません。 ２コラム型（入れ子）のHP作成で 左側にメニュー項目を作成しました。 あらかじめCSSでlist-styleはnoneを指定いたしています。 作成過程で（Dreamweaver）上でもリストスタイルは表示されませんでした。 もちろんIE6でもレイアウトのズレも無くリストスタイルも無い状態で表示されていました。 しかし、IE７では（Dreamweaver）上でも作成過程からリストスタイルが表示されレイアウトが右に膨らみ崩れます。 初期化する意味でimportで読み込ませてみたり、*:first-child+html { }や アンダーバー＿ を子セレクターを使用したり トライしてみるのですが上手く反映されません。 リストマークがIE7で現れ本当に困っていいます。 助けてください お願いいたします。 （基本的なCSSができていようで勘違いしています） ソースは以下のような感じですが..... 教えて頂けたら嬉しいのですが 宜しくお願いいたします。 /!------CSS------/ #menus{ float:left; margin-left:1px; margin-top:10px; margin-bottom:25px; margin-right:3px; width:162px; background-color: #FFFFFF; clear: both; list-style:none; display:block; } *:first-child+html #menus{ list-style:none; } /!--こんな感じで試しています。--/ UL#menus{ margin:35px 5px 0px 0px; width:162px; height:400px; background-color:#FFFFFF; clear:left; display:inline; list-style:none; _list-style:none;/!--こんな感じで試しています。--/ } ul menus { /* for IE7 */ list-style: none; }/!--こんな感じで試しています。--/ *:first-child+html ul#menus{ list-style:none; }/!--こんな感じで試しています。--/ UL#menus LI { clear: both; hight: 162px; list-style:none; list-style-position:inside; } ul menus li{ /* for IE7 */ list-style: none; }/!--こんな感じで試しています。--/ *:first-child+html ul#menus li{ list-style:none; } /!--こんな感じで試しています。--/ /!--*一回一回記述してみたり削除してみたり試しています。--/ /!-----以上がCSSです----/ ｈｔｍｌは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <link rel="stylesheet" href="reset.css" type="text/css" media="all"> <link rel="stylesheet" type="text/css" HREF="CSS/details3000.css"> <!------//////// 省略 ////////////---> <div id="left"> <div id="menus"> <ul> <li id="menus01"> <li id="menus02"><a href=""></a></li> <li id="menus03"><a href=""></a></li> <li id="menus04"><a href=""></a></li> <li id="menus05"><a href=""></a></li> <li id="menus06"><a href=""></a></li> <li id="menus07"><a href=""></a></li> <li id="menus08"><a href=""></a></li> </ul> </div> <ul id="menus" > <LI> <img src="imges/leftmenus/sp002.gif" onmouseover="setRollOverImg(0, this)" onmouseout="setRollOverImg(1, this)" /></LI> <LI> <img src="imges/leftmenus/sp003.gif" width="162" height="30" onmouseover="setRollOverImg(2, this)" onmouseout="setRollOverImg(3, this)" /></LI> <!-----以上がソースです。------> リストマークが消えません 教えてください 宜しくお願いいたします。 ulとulの間が空いてしまう http://www.ana.co.jp/asw/index.jsp こういったメニューが作りたいのですが <ul class="menu"> <li> <li> ... <ul> <ul class="menu"> <li> <li> ... <ul> こうやってやるとulとulの間に隙間が出来ます。 marginもpaddingも0です。 どうやったらいいでしょうか？ ＣＳＳは下記です。 ul.menu { width: 750px; margin: 0px; padding: 0px; list-style-type: none; line-height:normal; } ul.menu li { line-height:normal; margin: 0px; padding: 0px; float:left; } 宜しくお願いします！ ul li を使ったリストを作りたいんですけど。。。 CSS初心者です。 ul liを使ってこんな感じのリストを作りたいんですけど うまくいきません。 ↓ ------------------------------------ ああああ いいいい うううう ええええ おおおお かかかか きききき くくくく けけけけ ここここ ささささ しししし すすすす せせせせ そそそそ ------------------------------------ なんとか作ってはみたんですが、IE7ではなんとかそれらしく 表示されますが、Opera9で確認すると うまく表示されません。 （「あ」の後に改行されずに「い」がきてしまったり・・・） すいません。 どなたか分かる方がいれば教えてください。 よろしくお願いします。 AIは使う人の年齢や市場にも影響する？人工知能の可能性 OKWAVE コラム list-style-imageがきかない。 下記のようにリストの中黒を画像にしたいのですが、Chromeでは画像が表示されず、中黒のままです。原因が分る方教えてください。 SafariとFireFoxでは表示されます。 [html] <ul> <li><a href="concept.html">コンセプト</a></li> <li><a href="gallery.html">ギャラリー</a> </li> </ul> [CSS] li { margin-bottom:15px; margin-left:50px; list-style-image:url("../img/xxx.png"); } <ul>タグでのリストの使い方 こんばんわ。 すみません。リストをCSSで体裁を整え、ここまでできましたが、各リストの下に、ラインの画像を入れたいのですが、うまくいきません。。 画像を入れるやり方を教えてください～ <tr> <td> <div class="abc"> <ul> <li><a href="#">2004/--/--<br> ○○○○</a></li> <li><a href="#">2004/--/--<br> ○○○○</a></li> <li><a href="#">2004/08/10<br> ○○○○</a></li> </ul> </div> </td> </tr> <ul>は必要ですか？ CSSを使ってなるべくHTMLのソースを減らそうと思い悪戦苦闘中です。 ■が画像だと仮定して書きます。 ■項目１ ■項目２ ■項目４ ■項目５ ■項目６ ■項目７ というような表示ができるようにしたいのですが、 CSSファイルに ul { list-style-image: url(img/mark.gif); vertical-align: middle; } と指定してHTMLには <ul> <li>項目１</li> <li>項目２</li> <li>項目４</li> <li>項目５</li> <li>項目６</li> <li>項目７</li> </ul> と書きました。そうすると表示が ■項目１ ■項目２ ■項目４ ■項目５ ■項目６ ■項目７ と頭にスペースが入ってしまいます。（リスト項目なので当たり前なのかも知れないですが…） これをスペースをなくしたいのです。 そこで、<li>だけならどうだろうと思い、CSSを下記のように書き直し試したところスペースがなく表示出来ました。 li { list-style-image: url(img/mark.gif); vertical-align: middle; } <ul></ul>は必要でしょうか？ それとも他に方法があればご教授下さい。私には上の方法しか思いつきませんでした。 よろしくお願いします。 リストで間が開いてしまう・・・ 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だけでよいです。） このとおりになるのですが、 これで、隙間をなくす方法を知っていたら教えてください！ お願いします！ ｊQueryでulを動かしたい。 javascript初心者です。 jQueryを使ってみようとしています。 ページを開くと、リストが左にゆっくり動くようにしたいのです。 cssは ul { position: absolute; margin-top: 0; margin-left: 490px; padding-left: 15px; height: 40px; list-style-type: none; } でページを開くとmargin-leftを460pxにゆっくり動かしたいのです。 調べてみるとanimateが使えそうなので、 window.onload = function(){ $("#contents ul").animate("marginLeft","460px"); } にしてみましたが、動きません・・・。 教えていただけるとありがたいです。 お願いしますm(__)m html リストのマークについて リストのマークについて質問です。 １、ulとolがありますがlist-style-typeを指定すると、この二つのタグに機能的違いは無くなるのでしょうか。 ２、list-style-typeで指定すると、リストを増やせば自動で記号がつきますが、この自動的につく記号は決められたもの以外の、自由な文字や記号を指定することはできないでしょうか。 UL、LIタグの黒丸なしのリスト お世話になります。 以下のソースを IEで見ると黒丸なしリストと黒丸ありリストになるのですが FireFoxですと、どちらのリストも黒丸ありのリストになります。 ・これはIEのバグになるのでしょうか？ ・IE・FireFoxともに黒丸なしのリストにしたい場合UL、LIタグで出来ますでしょうか？ ご存知でしたら、申し訳ありませんがご教授よろしくお願いいたします。 <html> <title>ULタグテスト</title> <body> 黒丸なしリスト <ul style="width:150px;"> <li>list1</li> <li>list2</li> <li>list3</li> </ul> 黒丸ありリスト <ul> <li>list4</li> <li>list5</li> <li>list6</li> </ul> </body> </html> <ul><ol>箇条書き内容のリンク化は出来ますか htmlの箇条書き<ul><ol>の<li>の各項目に、別のページへのリンクをつける事は出来るでしょうか。 いくつかリンクを並べる際にも、ulやolは使う物なのでしょうか。 馬鹿な事を言ってましたら済みません、 宜しくお願いします。 注目のQ&A 「You」や「I」が入った曲といえば？ Part2 結婚について考えていない大学生の彼氏について 関東の方に聞きたいです 大阪万博について 駅の清涼飲料水自販機 不倫の慰謝料の請求について 新型コロナウイルスがもたらした功績について教えて 旧姓を使う理由。 回復メディアの保存方法 好きな人を諦める方法 小諸市（長野県）在住でスキーやスノボをする方の用具 カテゴリ [技術者向] コンピューター プログラミング・開発 Microsoft ASPC・C++・C#CGIJavaJavaScriptPerlPHPVisual BasicHTMLXMLCSSFlashAJAXRubySwiftPythonパフォーマンス・チューニングオープンソース開発SEOスマートフォンアプリ開発その他（プログラミング・開発） カテゴリ一覧を見る OKWAVE コラム 突然のトラブル？プリンター・メール・LINE編 携帯料金を賢く見直す！格安SIMと端末選びのポイントは？ 友達って必要？友情って何だろう 大震災時の現実とは？私たちができる備え 「結婚相談所は恥ずかしい」は時代遅れ！負け組の誤解と出会いの掴み方 あなたにピッタリな商品が見つかる！ OKWAVE セレクト コスメ化粧品 化粧水・クレンジングなど 健康食品・サプリ コンブチャなど バス用品 入浴剤・アミノ酸シャンプーなど スマホアプリ マッチングアプリなど ヘアケア 白髪染めヘアカラーなど インターネット回線 プロバイダ、光回線など
お礼
ありがとうございます