- ベストアンサー
CSSだけで添付図のように整形できますか?
t_ohtaの回答
- t_ohta
- ベストアンサー率38% (5141/13422)
近い所まではいけるけど、売値部分がタグで囲まれていないため個別のスタイル定義が出来ないので文字の右揃えや背景の塗りつぶし範囲を指定できないですね。 <style> body {counter-reset: number 0;} ul{ padding-left: 0; } li{ list-style: none; border-bottom: 1px dotted black; width: fit-content; } li:before { counter-increment: number 1; content: "[" counter(number) "] "; } li > p { display: inline-block; margin: 0 0 0 2em; color: red; background-color: #fdff00; } li > p > del { display: inline-block; color: blue; background-color: #ffe3e1; width: 5em; text-align: right; margin-right: 2em; } </style>
関連するQ&A
- CSSだけで添付図のように表示できますか?
[Q] CSSだけで添付図のように表示できますか? CSSのスキルアップのための問題を作りました。 [仕様] ・CSSだけで整形のこと ・タグは変更、追加、削除ができない ・画像やリンクによる表示は無効 ・配色、配置はピッタリでなくてもよい ・一辺が200pxの正方形内にあるもの 青い四角形、薄茶色の円、赤系のボール状のもの CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="shape"></div>
- 締切済み
- CSS
- CSS 添付したような作図ができますか?
[Q] CSSで添付したような作図ができますか? CSSのスキルアップのための問題を作りました。 一辺が200pxの青い正方形があります。 1.青い正方形に内接する黄色い円を描きます。 2.黄色い円に内接する赤い正三角形を描きます。 3.赤い正三角形に内接する水色の円を描きます。 [仕様] 1.CSSだけで整形のこと 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.配色はつぎのとおり blue, yellow, red, skyblue CSSだけでこのような作図できますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="square"></div>
- 締切済み
- CSS
- CSSだけで添付図のように表示できますか?
CSSのスキルアップのための問題を作りました。 ・フランス国旗にホバーするとベルギー国旗に変わります。 ・ベルギー国旗からマウスアウトするとフランス国旗に戻ります。 ・国旗の下にある国名のためのタグは不要です。 (JS無用) [仕様] 1.2とおりの国旗を切り替え表示します。 2.CSSだけで整形のこと 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
- CSSで作図とアニメーション (6)
[Q] CSSで作図とアニメーションができますか? CSSのスキルアップのための問題を作りました。 [課題] CSSで、下辺が水平で頂点が上にある正三角形を作ります。 一辺が100pxで緑色の正三角形、頂点に「A」と表示させておきます。 その外接円を灰色で、その中心を赤色で描きます。 (添付図参照) [動作] 1.円にホバーした時、 ・正三角形が青色に変わる ・3秒後、右回りにアニメーションで一回転する 2.マウスアウトすると、アニメーションで元の状態に戻る [仕様] 1.CSSだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.チェックボックスを使わずに実現させる CSSだけでこのような作図と動作ができますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="sankaku"></div>
- 締切済み
- CSS
- CSSで作図とアニメーションができますか?
[Q] CSSで作図とアニメーションができますか? CSSのスキルアップのための問題を作りました。 CSSでツートーンの六角形を作ります。 1.六角形にマウスダウンすると、右回りに一回転します。 2.マウスアップすると、六角形が元の位置に戻ります。 3.アニメーションで回転します。 [仕様] 1.CSSだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.チェックボックスを使わずに実現させる 5.配色はつぎのとおり gray, black CSSだけでこのような作図できますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="rokkaku"></div>
- 締切済み
- CSS
- CSSで正六角形の作図その2 (9)
[Q] CSSで正六角形の作図ができますか? CSSのスキルアップのための問題を作りました。 [課題] CSSで、正六角形を作ります。 前回の「作図 (8)」では6つのDIV要素それぞれに正三角形のCSSを適用しました。 今回は、DIV要素3つで同等の表示を実現させよう、というものです。 (添付図参照) [仕様] 1.CSSだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない CSSだけでこのような作図とアニメーションができますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 <style> /* 6つの色 red, blue, orange, green, violet,chocolate */ .container { position: relative; width: 120px; height: 120px; border: solid 1px red; } /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="container"> <div class="rokkaku"> <div></div> <div></div> <div></div> </div> </div>
- 締切済み
- CSS
- cssで、入れ子になったリストに別のデザインを適用したくてつまづいてい
cssで、入れ子になったリストに別のデザインを適用したくてつまづいています。 ■ソース <ul id="column-topmenu"> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a> <ul class="sub"> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a></li> </ul> </li> <li><a href="#">●●●</a> </li> </ul> ■CSS(親リストの指定) ul#column-topmenu li { padding: 15px 20px 15px 25px; list-style:none; background: url(../img/title2_bg.gif) no-repeat; font-size: 17px; line-height: 1.1; } 親要素のリストには、背景画像をつけるのですが、 入れ子のほうには背景画像なしで、テキストを整形して並べるだけです。 システムで生成する関係上、<li>にはIDを振ることができません。 <ul>は可能です。 入れ子のulには、subとつけて、試行錯誤しているのですが、 どうしても背景画像が反映してしまって・・・。 ご教示ください。 よろしくお願いします。
- 締切済み
- HTML
- CSSで正六角形の作図 (8)
[Q] CSSで正六角形の作図ができますか? CSSのスキルアップのための問題を作りました。 [課題] CSSで、正六角形を作ります。 正六角形を正三角形の集合体とみれば、CSSで正三角形の基本形を1つ作り、 それを利用して、表示位置・向き・配色を決めれば正六角形が作れます。 (添付図参照) [参考] 下辺が水平で頂点が上にある正三角形において、 頂点からの垂線で2分された直角三角形の3辺の比は、 1:2:√3 となる。 したがって、一辺が 100(px)の三角形を作る時、 高さ=100/2 ⅹ √3= 50√3 ≒ 86.60(px) [仕様] 1.CSSだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない CSSだけでこのような作図ができますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 <style> /* 6つの色 */ red, blue, orange, green, violet,chocolate /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="container"> <div class="rokkaku"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div>
- 締切済み
- CSS
- cssのclassについて
よろしくお願いします。 文字の背景に画像を入れて、更には文字の左側にチェックマークを入れるようにしたいため、cssやhtmlに下記の記述をしました。 【css】 div#test {list-style-position: outside; list-style-image: url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight: bolder; width: 800px; font-size: 1.0em; line-height: 2.0; } 【html】 <div id="test"> <ul> <li>テキスト、テキスト000テキスト</li> </ul> </div> 上記ですと、確かに背景画像も文字の左側にもチェックマークが入るのですが、下記のようにclass指定すると表示されなくなってしまいます きっとclassの表記が間違っているのだと思いますが困っております ご指導の程よろしくお願いします。 【css】 .test {list-style-position: outside; list-style-image: url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight: bolder; width: 800px; font-size: 1.0em; line-height: 2.0; } 【html】 <ul class="test"> <ul> <li>テキスト、テキスト000テキスト</li> </ul> また、id名は一つしか使えないがclass名は同じものを複数使えるとお聞きしますが、上記で言うと"test"を複数使えると言う事でしょうか? きっと私は<p>は</p>で閉めるように、そのあたりが良く分かっていないのかも知れません。 よろしくお願いします。
- ベストアンサー
- その他(プログラミング・開発)
- menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。 メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか? 以下がHTMLタグとCSSになります。 アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
お礼
補足
>売値部分がタグで囲まれていない そこに着目されたのは素晴らしいです。 >文字の右揃えや背景の塗りつぶし範囲を指定できない そんなことはありません。 このあたりこそ、腕の見せ所ですね。