CSS
- htmlで画面外に伸びた際も親の横幅が広がる方法
報酬付き
htmlで画面外に伸びた際も親の横幅が広がって欲しいのですが やり方わかりますでしょうか？ 添付画像のように、長い文字やwidthで子供の要素が画面を超え、横スクロールさせると親の背景が画面幅で切れてしまいます。 そうではなく、親も子供の横幅に合わせて広がって欲しいと思います。 こちら方法はありませんか？(親の要素にmin-widthをつけるなどはNGでお願いいたします)
- 受付中
- again5651h2
- CSS
- 回答数1
- CSSで作図とアニメーションができますか？
報酬付き
[Q] CSSで作図とアニメーションができますか？ CSSのスキルアップのための問題を作りました。 CSSでツートーンの六角形を作ります。 1.六角形にマウスダウンすると、右回りに一回転します。 2.マウスアップすると、六角形が元の位置に戻ります。 3.アニメーションで回転します。 [仕様] 1.ＣＳＳだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.チェックボックスを使わずに実現させる 5.配色はつぎのとおり gray, black CSSだけでこのような作図できますか？ CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="rokkaku"></div>
- CSS 添付したような作図ができますか？
報酬付き
[Q] CSSで添付したような作図ができますか？ CSSのスキルアップのための問題を作りました。 一辺が200pxの青い正方形があります。 1.青い正方形に内接する黄色い円を描きます。 2.黄色い円に内接する赤い正三角形を描きます。 3.赤い正三角形に内接する水色の円を描きます。 [仕様] 1.ＣＳＳだけで整形のこと 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.配色はつぎのとおり blue, yellow, red, skyblue CSSだけでこのような作図できますか？ CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="square"></div>
- CSSだけで添付図のように表示できますか？
CSSのスキルアップのための問題を作りました。 ・フランス国旗にホバーするとベルギー国旗に変わります。 ・ベルギー国旗からマウスアウトするとフランス国旗に戻ります。 ・国旗の下にある国名のためのタグは不要です。 (ＪＳ無用) [仕様] 1.２とおりの国旗を切り替え表示します。 2.ＣＳＳだけで整形のこと 3.ベンダープレフィックスも追記のこと 4.タグは変更、追加、削除ができない 5.画像やリンクによる表示は無効 6.配色はつぎのとおり ・フランス：青、白、赤 ・ベルギー：黒、黄、赤 CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> body { background-color: skyblue; } .flag { width: 150px; height: 75px; border: solid 1px gray; } /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="flag"></div>
- CSSだけで添付図のように表示できますか？
報酬付き
[Q] CSSだけで添付図のように表示できますか？ CSSのスキルアップのための問題を作りました。 [仕様] ・ＣＳＳだけで整形のこと ・タグは変更、追加、削除ができない ・画像やリンクによる表示は無効 ・配色、配置はピッタリでなくてもよい ・一辺が200pxの正方形内にあるもの 青い四角形、薄茶色の円、赤系のボール状のもの CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="shape"></div>
- CSSだけで添付図のように整形できますか？
CSSだけで添付図のように整形できますか？ CSSのスキルアップのための問題を作りました。 [仕様] ・商品には 括弧付き番号が振ってある ・点線の下線が引いてある ・元値は 青色文字で 薄い桃色の背景色になっている ・売値は 赤色文字で 黄色の背景色になっている ・タグは変更、追加、削除ができない ・ＣＳＳだけで整形のこと [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <ul id="Product_List"> <li>商品A<p><del>345円</del> 234円</p></li> <li>商品B<p><del>2,000円</del> 1,234円</p></li> <li>商品C<p><del>1260円</del> 850円</p></li> <li>商品D<p><del>100円</del> 80円</p></li> <li>商品E<p><del>150円</del> 120円</p></li> <li>商品F<p><del>500円</del> 450円</p></li> </ul> CSSのスキルアップに励んでいる方の回答をお待ちしております。
- CSS見出し 文字大きさ
CSSまったくの素人です。 こちらのサイトからコピペした https://jajaaan.co.jp/css/css-headline/ 上下線グラデーションの見出しの文字の大きさを変更したいのですが 方法がわかりません。 HTML <h3>CSS見出しデザイン</h3> CSS h3 { position: relative; padding: 1.5rem 2rem; color: #000000; text-shadow: 0px 15px 10px #ff8c04; -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, .1); box-shadow: 0 2px 14px rgba(0, 0, 0, .1); } h3:before, h3:after { position: absolute; left: 0; width: 100%; height: 4px; content: ''; background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); } h3:before { top: 0; } h3:after { bottom: 0; } font-size:をどこへ記載すれば良いのでしょうか？ よろしくお願いいたします。
- フレーム中プルダウンJumpボタン別ページの箇所に
お世話になります 5年前まで有効だった作用が放置したためか、このたび作用しなくなり、調べてみたのですが、Javaに頼らずにはいられないのか、 わからず困っております 左側サブhidariと右側メインmigiと名前をつけたフレームを未だに 設定しておりますが、ともあれ、CSS（のみではありませんでした）で動いていたので、、、 右migiページに作ったプルダウン一覧（リンクなし）に 新たにリンクボタン（Ｊｕｍｐ！と反映はできています）を表示し、別ページの「特定箇所」にリンクし、 migiページに反映させたいのです ジャンプボタンを出現させ、リンクも飛ばしも特定箇所ジャンプも 可能だったのに、なぜなのでしょう 元ページ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <～～～～ <select name="プルダウンメニュー" size="1"> <option style="font-family:MS UI Gothic;background-color:#d3d3d3;color:#8b668b"align="center"> * ～～～～～～～～～～～～</option> <option style="background-color:#000044;color:#f0fff0"> ～～～～～～～～～～～～～～ </option> <option style="background-color:#000044;color:#f0fff0"> ～～～～～～～～～～～～～～ </option> <option value="#"> <option value="000_new2018diary.html#diary_0043"> ～～～～～～～～～～～～～～ </option> ジャンプ先ページ <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01Frameset//EN"> <HTML> <HTML lang="ja"> <HEAD> <TITLE>diary_title~2018</TITLE> <meta name="robots" content="index"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=euc-jp"> <META http-equiv="Content-style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <META NAME="auther" content=""> <META NAME="copyright" content="c2018 ."> <Style Type="text/css"> <!-- /*style*/ body {line-height:130%; font-family:MS UI Gothic; /*background-image:url(n_kabe.png);*/ background-image:url(film.jpg); background-repeat:no-repeat; background-position:right top; background-attachment:fixed; scrollbar-face-color:#000033; background-color:#000022; } A{text-decoration:none; cursor:w-resize; } A:HOVER{ text-decoration:none; border-width:1px 1px 1px 1px; border-style:solid solid solid solid; border-color:#7868ee; } --> </Style> </HEAD> <BODY onContextmenu="return false" text="#b0e0e6" Link="#f5fffa" ALink="#EE82EE" VLink="#d8bfd8" basefontsize="2"> <table width="700"border="0"cellpadding="0"cellspacing="0"align="center"valign="top"> <tbody> <br> <br> <div align="left"><small><font color="#6090ef"> <address> </address> <font color="#ffffff"> ～～～ <br> ～～～～～～</small></font></div><br> <br><br> <tr<td>width="500"height="3"border="0"cellpadding="0"cellspacing="0"align="left"bgcolor="#191970"valign="top"> <font color="#c0c0c0"> ～～～～～～～～～～～～ </td></tr> <div align="left"> <br> <a name="4top"><br><br> <a href="#diary_0043"> ～～ </a><br> <a href="#diary_0042"> ～～ </a><br> <a href="#diary_0041"> ～～ </a><br> </div><br><br> </font> </tbody></table> <span align="left"> <img src="ico_bulb.gif"border="0"> ～～～～～ <a name="diary_0043"></a> </span> <table width="85%"border="1"cellpadding="5"cellspacing="3"align="center"fontcolor="#ffffff"> <tr><td class=a> <b> ～～～～～～～～ </b></td> <td style="background:url(～～.jpg) no-repeat center top" rowspan="3"></td> </tr> <tr><td> ～～～～～～～ <td></tr> <tr><td> <pre> ～～～～～～～～ </pre> </td></tr> <tr> <td class=a> <pre> ～～～～～～～ </pre> </td> <td><div align="center"><small>～～～～</small></div></td></tr> <tr><td colspan="2"class=a> <p onclick="document.all.nodiary_0043.style.visibility=document.all.nodiary_0043.style.visibility=='hidden' ? 'visible' : 'hidden' " style="cursor : pointer;"> click on</p> <p id="nodiary_0043" style="visibility:hidden"align="left"> <!--ここに書き込む--> <font color="#c0c0c0"> ～～～～～～～～～ </p> </td></tr> <tbody> </table> <br><br> <a href="#4top">↑リストに戻る</a><br><br> <br><div align="center"> <a href="new_home.html"target="migi"style="cursor:e-resize;"> <img src="ico_bird_r.gif"border="0"title=" ホーム表紙 まで戻ります "> HOME </a></div> <br> </body> </html> 何ゆえ、統一性のないタグだと承知しておりますが、 不能になったタグなどあるか、 何か書き落としがあるか、設定が間違っているのか？ 教えてください よろしくお願いいたします
- HTML・CSS ボタンの表示
<div class="item"> <tr> <td><input type="button" value="サンドウィッチ" onclick="get_calc(this)"></td> <td><input type="button" value="おにぎり" onclick="get_calc(this)"></td> <td><input type="button" value="お茶" onclick="get_calc(this)"></td> <td><input type="button" value="お弁当" onclick="get_calc(this)"></td> </tr> </div> ボタンを画面の50％の幅に均一の大きさで表示したです． CSSわかる方，教えてください！お願いします！
- css、スタイルシートの読み込み順について
head内に<link type="text/css……>でスタイルシートを3つ読み込んでいて ①reset.css ②style.css ③content.css の順で上から下に並べてるのですが②が後で読み込まれます。 !importantはどのスタイルシート内にもついてませんし、リンクの指定ミス等もありませんでした、メディアクエリのミスもありません。 一体なにが原因として考えられるでしょうか…お知恵を貸していただけますと嬉しいです。
- VS codeにおけるユーザースニペットの初期設定
１．背景 HTML、CSS、Java Script学習のため、VS codeでユーザースニペットを作成しようとし、試しにCSSでテスト登録し、うまくいかず、試行錯誤しています。登録方法はネット記事やYou tubeで解説があるので、それらを参照し、「ファイル」->「ユーザー設定」->「ユーザースニペットの構成」から。Jason形式での登録も留意しました。ところが登録しても反映されません。最初はVS codeが最新でないのが原因と思い、インストールし直しました。VS versionは昨日インストールし直したので最新（1.85.1)です。VScodeの再インストールだけではダメという結論です。 2. settings.jasonの変更 (1) settings.jasonの変更（一回目） webで調べるとVS codeで「setthings.jason」から設定する必要があるとのことです。この「setthings.jason」は変更していなかったので、そのことが原因と思い、変更を試しました。左下の歯車→右上から検索。「settings.jason」にいき、編集可能なのは分かりました。下記は修正前のデフォルト。 { "python.linting.flake8Enabled": true, "editor.formatOnSave": true, "workbench.statusBar.visible": false, "editor.unicodeHighlight.nonBasicASCII": false, "settingsSync.ignoredExtensions": [], "settingsSync.ignoredSettings": [ "workbench.settings.openDefaultSettings" ], "workbench.settings.openDefaultSettings": true } となっていました。どのように記載すれば良いか調べたWEBは下記です。「VSCodeでPythonのユーザースニペット設定」 [ [https://qiita.com/tachiyu/items/27931cda3658e216133c](https://okwave.jp/jump?url=https%3A%2F%2Fqiita.com%2Ftachiyu%2Fitems%2F27931cda3658e216133c) ]( https://okwave.jp/jump?url=https%3A%2F%2Fqiita.com%2Ftachiyu%2Fitems%2F27931cda3658e216133c ) となります。ここでの例は言語はpythonです。これに従うとcssの場合は "[css]": { "editor.suggest.showSnippets": true, "editor.snippetSuggestions": "top" }, となりますが、結果はダメでした。[css]の方は下に赤い波線が出ていました。 (2) settings.jasonの変更（二回目） ChatGPTによると、アドバイスは "editor.snippetSources": の箇所でパスを入力しなければいけないこと。そして、このパスの下にはcssであれば、css.jasonがあることでした。そこで、下記のように入力。しかし、それでも結果はダメでした。 "[css]": { "editor.suggest.showSnippets": true, "editor.snippetSuggestions": "top", "editor.snippetSources": [ "｛C:$hoge/hoge/省略｝/User/snippets" ] }, （注1）explorerで｛C:$hoge/hoge/省略｝/User/snippetsの箇所を打ち込むと、その下にcss.jasonが出てくるのは確認済み。 3．質問 ここにどのように打ち込めばユーザースニペットが有効になるかご教示ください。またはこの方法でも根本的な間違いあり、ダメという場合であれば、他の解決策をご教示ください。 4．補足（css.jasonへの登録内容） css.jasonへの入力内容。あくまでユーザースニペットが反応すれば良いので試しです。style.cssにおいてデタラメ要素の下にtestxxと入力してもダメでした。 候補も全く出てきません。 "display inline-flex":{ "prefix": "testxx", "body": [ "display:inline-flex;" ], "description": "display inline-flex" },
- 締切済み
- masamu1029
- CSS
- 回答数1
- codePenでメディアクエリーは対応していますか
cssの初心者です。ここ一週間位前からcodePenでHTML、CSS、Java Scriptの学習を開始したのですが、codePenはメディアクエリーに対応しているのか教えていただけますか。デスクトップファーストでコードを記載しており、class="gallery"はdisplay:flex; flex-direction:row;をしており、CSSコードの後半で @media(max-width:800px){ .gallery{ flex-direction: column-reverse; }} と記載してcodePenの画面を小さくしたら、その画面が小さくなるだけで、メディアクエリーは効かなそうでしたので質問しました。コーディングの学習はVS Codeで行っていますが、codePenに記載する場合にはgoogleフォント設定や、共有画像の読み込みの様に何か特別な記載の方法があれば、ご教示くださるようお願いします。
- ベストアンサー
- masamu1029
- CSS
- 回答数1
- CSS iphone時うまく機能しない
cssでpotionプロパティを使用して要素の位置をしているのですが、iphoneで見た時どのブラウザもposition:relative, absoluteの時に不適切な位置にいます。reset.css等の設定はしています。このようなiphoneではうまくいかないということは初めてであったためとても困惑しています。わかる方がいらっしゃいましたら、ぜひ教えていただきたいです。よろしくお願い致します。
- cssのcalcについて教えてください
cssの初心者です。html、cssにおいて、メディアクエリを用いて、画面横サイズで600pxではfont size:1.0rem、1000pxでは1.5rem、中間の画素横サイズは比例計算として、calc関数を用いて実装したいと思っていますが、戸惑っています。 ① font-size: calc(1rem + 0.5rem * ((100vw - 600px) /400px)); では機能しません。 1rem=18pxとして、 ➁font-size: calc(18px + 9 * (100vw - 600px) /400); では機能します。①の（100vw-600px)/400pxの箇所は例えば、画面横幅が800pxの際は値と単位が約分されて単位無の1/2となり、括弧の前の0.5remと掛け合わされ0.25rem。＋記号の前の1remと足し算され、結果1.25remとの理解ですが、結果として適用されていません。①がなぜ機能しないのか、remを基本で書き表すとどのように数式を作った方がよいのか教えてください。一応、➁でうまくいっていますので、calcを理解するための質問です。
- ベストアンサー
- masamu1029
- CSS
- 回答数2
- スクロール状態で高さが保たれない
<html class="h-full"> <head> <script src="https://cdn.tailwindcss.com"></script> <script> const maxItems = 10; </script> </head> <body class="flex h-full"> <div class="flex flex-col flex-grow"> <div class="bg-blue-200">header</div> <div class="h-full max-h-full bg-red-500"> <div class="container mx-auto flex flex-col h-full max-h-full bg-orange-300" > <h1 class="text-4xl">title</h1> <div id="contentsItems" class="max-h-full overflow-y-auto bg-green-300"> <script> for (let i = 0; i < maxItems; i++) { document.write('<div>item</div>'); } </script> </div> </div> </div> <div class="bg-blue-200">footer</div> </div> </body> </html> maxItems の値を増やすと footer が画面外へ行ってしまうのですが、id=contentsItems に height固定値を与える以外の方法で改善する方法はありましたらご教授頂けたらと思います。よろしくお願いします。
- 締切済み
- nagisa0518
- CSS
- 回答数1
- 次のhtml・cssでspan内の文字を点滅させる
次のhtml・cssでspan内の文字を点滅させるには、どのようにしたらよいのでしょうか。 但し、テスト1が表示されている間は、テスト2と3は消えており、 テスト2、3が表示されている間はテスト1が消えている状態にしたいです。 なぜか、反復の意味を持つdurationタグの後ろに連結して、duration:blinkはできませんでした。 <div class="test"> <span class="brinking1">テスト1</span> <span class="brinking2">テスト2</span> <span class="brinking3">テスト3</span> </div> <style> .test { margin: auto; background-color: white; position: relative; } .test blinking { width: 50%; animation-name: test; -webkit-animation-name: test; animation-duration:blink 10s; -webkit-animation-duration: 10s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; opacity: 0;} .test .brinking1 { display: block; margin: 0 auto; } .test .brinking2,.test .brinking3 { animation-delay:5s; -webkit-animation-delay:5s; position: absolute; top: 0; left: 25%; } @keyframes test { 0% { opacity: 0; } 50% { opacity: 1; } } @-webkit-keyframes test { 0% { opacity: 0; } 50% { opacity: 1; } } </style>
- 締切済み
- semboku_love
- CSS
- 回答数1
- CSS目次開閉でチェックボックスが現れる
CSSで目次開閉を作成したのですが、左上に四角いチェックボックスが現れてしまいます。 このチェックボックスを消す方法はありますでしょうか。 HTML <div class="open-menu"> <input id="open-1" type="checkbox"> <label for="open-1">≡目次</label> <div class="open-menu-inside"> <ol class="numbering"> <li><a href="#1"> </a></li> <li><a href="#2"></a></li> <li><a href="#3"></a></li> </ol> </div> </div> CSS .open-menu input { display: none; } .open-menu label { width: 180px; color: #000000; font-size: 20px; line-height: 2; font-weight: bold; text-align: left; margin: 20px; box-shadow: 5px 5px 5px #aaa; padding: 20px; cursor: pointer; position: relative; display: block; } /* ここから追加 */ .open-menu label { border: 2px solid #ff0000; border-radius: 20px; } .open-menu label:hover { background: #ffb8b3; opacity: 0.5; } .open-menu label:after { position: absolute; right: 10px; top: 50%; -webkit-transform : translateY(-50%); transform : translateY(-50%); content: "［開く］"; } .open-menu input:checked ~ label::after { content: "［閉じる］"; } .open-menu div { height: 0; overflow: hidden; opacity: 0; transition: 0.3s; } .open-menu input:checked ~ div { height: auto; max-width: 80%; opacity: 1; padding: 20px; background: #ffeff9; border: 2px solid #ff95d5; box-shadow: 5px 5px 5px #aaa; border-radius: 20px; overflow: hidden; } .open-menu-inside { color: #333333; font-size: 15px; line-height: 2; } チェックボックスを消す方法があれば、教えていただきたいです。 よろしくお願いいたします。
- 階層番号について(CSS、html)
ブログの目次を作成しています。 1. 見出し1 2. 見出し2 2.1 見出し2-1 2.2 見出し2-2 3. 見出し3 このようにしたいのですが、上手くいきません。 修正箇所を教えて頂けると助かります。 【html】 <div class="toc-001"> <div> 目次 </div> <ol> <li><a href="#">見出し1</a></li> <li> <a href="#">見出し2</a> <ol> <li><a href="#">見出し2-1</a></li> <li><a href="#">見出し2-2</a></li> </ol> </li> <li><a href="#">見出し3</a></li> </ol> </div> 【css】 .toc-001 { margin-bottom: 30px; padding: 1em 1em 1em 2em; border: 1px solid #999; background-color: #f7f7f7; } .toc-001 div { display: flex; align-items: center; margin: 0; padding: 5px 0; } .toc-001 div::before { display: inline-block; width: 1em; height: 1em; margin-right: 5px; background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23333%22%3E%3Cpath%20d%3D%22M3.8%2017.2h-3c-.5%200-.8.4-.8.8v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8v-3c-.1-.4-.4-.8-.8-.8zm0-15h-3c-.5%200-.8.4-.8.8v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8V3c-.1-.4-.4-.8-.8-.8zm0%207.6h-3c-.5%200-.8.3-.8.7v3c0%20.4.3.8.8.8h3c.4%200%20.8-.3.8-.8v-3c-.1-.4-.4-.7-.8-.7zM23.2%2018h-15c-.4%200-.8.3-.8.8v1.5c0%20.4.3.8.8.8h15c.4%200%20.8-.3.8-.8v-1.5c0-.5-.3-.8-.8-.8zm0-15h-15c-.4%200-.7.3-.7.8v1.5c0%20.4.3.7.7.7h15c.5%200%20.8-.3.8-.8V3.8c0-.5-.3-.8-.8-.8zm0%207.5h-15c-.4%200-.8.3-.8.8v1.5c0%20.4.3.8.8.8h15c.4%200%20.8-.3.8-.8v-1.5c0-.5-.3-.8-.8-.8z%22%2F%3E%3C%2Fsvg%3E'); content: ''; } .toc-001 ol { list-style-type: decimal; margin: 0; padding: 0 1.2em; overflow: hidden; } .toc-001 ol ol { margin-top: 5px; } .toc-001 li { padding: 5px 0; } .toc-001 a { color: #166c9d; } どうぞ、よろしくお願い致します。
- ベストアンサー
- syusyu1008
- CSS
- 回答数1
- CSS入れ子リストを作成したい
CSS初心者です。 1,リスト 1-1,○○○○○ 1-2,○○○○○ 2,モデル 2-1,○○○○○ 2-2,○○○○○ 3,まとめ のような入れ子リストを作成したいのですが 現在の ■HTML <ol class="sample1"> <li>リスト</li> <li>○○○○○</li> <li>○○○○○</li> <li>モデル</li> <li>○○○○○</li> <li>○○○○○</li> <li>まとめ</li> </ol> ■CSS ol.sample1{ counter-reset:list; list-style-type:none; font: 14px/1.6 'arial narrow', sans-serif; padding:0; } ol.sample1 li{ position:relative; margin: 7px 0 7px 0px; padding-left:40px; font-weight: bold; font-size:14px; line-height: 30px; border: solid 1px #F6A38B; border-radius:20px; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } ol.sample1 li:before{ counter-increment: list; content: counter(list); position: absolute; left: 0px; width: 30px; height: 30px; text-align: center; color: #fff; line-height:30px; background: #F6A38B; border-radius: 50%; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } ol.sample1 li:hover{ background: #F6A38B; color: #fff; } ol.sample1 li:hover:before{ background: #fff; color: #F6A38B; } をHTMLを下記に変更して上の例のような入れ子にするには 上記のCSSをどのように変更すればいいのでしょか？ ■HTML <ol class="sample1"> <li><a href="">リスト</a></li> <ol> <li><a href="">○○○○○</a></li> <li><a href="">○○○○○</a></li> </ol> </li> <li><a href="">モデル</a></li> <ol> <li><a href="">○○○○○</a></li> <li><a href="">○○○○○</a></li> </ol> </li> <li><a href="">まとめ</a></li> </ol> よろしくお願いいたします。