Q&A
ご覧の通り、マークダウンのcode内では他のマークダウン無効になるので外に出してください
前提・実現したいこと
HTMLとCSSを使って簡単なサイトを作っています。
olを使ってリストを作ったのですが、クラスの中に入れたはずが、
marginなどを親クラスで指定してもリストが親クラスの指定範囲に入りません。
指定範囲内に入れるにはどうしたらよいでしょうか？？
該当のソースコード
HTML,CSS
1```ここに言語を入力 HTML 2コード 3<!DOCTYPE html> 4<html> 5<head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <link rel="stylesheet" href="css/sanitize.css"> 9 <link rel="stylesheet" href="css/style.css"> 10 11 <title>イヤホンジャックの向こう側</title> 12</head> 13<body> 14 <div class="container"> 15 <header> 16 <h1>COCOA</h1> 17 </header> 18 <div class="main-container"> 19 <h1>イヤホンジャックの向こう側</h1> 20 <p class="album">Album</p> 21 <div class="about-contents"> 22 <img src="/Users//Downloads/Chapter02/img/jacket.png" alt="イヤホンジャックの向こう側"> 23 <p>COCOA ４枚目のアルバムとなる今作。ジャケットデザインに色鉛筆画家の「カタヒラ 24 シュンシ」氏を迎え、音楽と絵のコラボを実現させた一枚。</p> 25 <p>HONDA CARS 静岡CM タイアップの「キミのうた」をはじめ、完全書き下ろしの新曲３曲を含む全６曲を収録。<br> 26 イヤホンジャックの向こう側に広がる世界を、ぜひご堪能ください。</p> 27 </div> 28 <div class="music-list"> 29 <h2>収録曲</h2> 30 <ol class="songs"> 31 <li><a href="#">C#</a></li> 32 <li><a href="#">ルームファッションショー</a></li> 33 <li><a href="#">ハッピータイム</a></li> 34 <li><a href="#">シャンディガフ</a></li> 35 <li><a href="#">僕は知らない</a></li> 36 <li><a href="#">キミのうた</a></li> 37 </ol> 38 </div> 39 </div> 40 <footer> 41 ©2020 42 </footer> 43 </div> 44</body> 45</html> 46 47```ここに言語を入力 48コード
コード body { background-color:#ccc1c1; font-size: 14px; color: #666; } .container{ margin: 0 auto; background-color:white; width:780px; box-shadow: 0 0 8px rgba(0,0,0,.5); } header{ text-align: center; background-color:#330000; color: white; } header h1 { font-size: 15px; padding: 15px; } .main-container { padding: 15px; } .main-container h1 { float: left; margin: 0 10px 10px 0; font-size: 18px; } .album { background-color: #FF0461; color: white; display: inline; padding: 3px 5px; font-size: 13px; } .about-contents { clear: left; } .about-contents img { float: left; margin: 0 10px 10px 10px; } .music-list { margin-bottom: 15px; clear: left; } .music-list h2 { background-color: #ccc1c1; font-size: 16px; padding: 3px 10px; } .music-list li { float: left; width: 50%; padding: 0 5px 5px; border-bottom: 1px solid #ccc1c1; } footer { clear: left; }
試したこと
補足情報（FW/ツールのバージョンなど）
ソースコードを画像で貼り付けようとしないでください。回答する側の立場を考えると、画像だと調べるのが難しくなります。
あと画像が何か分かりませんが、もしコードなのであれば画像で提示されても再現確認できませんので、テキストにてマークダウンのcode機能にてご提示ください
申し訳ございません、初めての質問のため上手くできておりませんでした。
コードを貼り付け、画像も添付できましたのでご確認ください。
なんか前にも見たことあるコードだしどこかで学習教材として使われてるものなのかもしれません
UdemyのHTML入門コースだと思います。
@baitokunさん
なるほど、通りで。あの手のスクールとかは正直値段とやってることが見合ってない気はしますが、
無駄に上位には出てきますからね。
＠K_3578
＠baitokun
動画教材を一通り終えて、自力でもう一度やってみたところ分からなくなり、動画通りの手順でやっていないため、こちらのサイトで質問させていただきました。
まず、こちらのサイトで質問してしまいすみませんでした。
また、ボロい商売での商品を購入し、大変失礼いたしました。
>質問者さん
質問自体は別に悪くないですよ。ヘルプに則って質問してくれれば別に初心者の方でも
気にせず質問してください。
私が批判してるのは寧ろそのボロい商売してるUdemyの方ですね。
目的を学習にしないことです。
課題をこなすことが目的になってしまうと終わったあと何も残りません。
手元に残すなら書籍
ネット上に公式もしくは近しいドキュメントもあります。
回答1件
0
ベストアンサー
フロートさせているのが原因なので、ol にブロック整形コンテキストを持たせると解決します。
たとえば：
css
1.songs { 2 display: flow-root; 3}
なお、横並びにする目的でフロートを使うのはかなり時代遅れで、問題も多いためお勧めできませんので、フレックスレイアウトなどをご検討ください。
CSSレイアウトにfloatは古い! 初心者でも始められるFlexbox入門 - ICS MEDIA
投稿2021/06/03 06:29
編集2021/06/03 06:31
総合スコア36158
回答して頂いた内容で解決できました！
floatは時代遅れなのですね。追加でアドバイスいただきとても助かります。
勉強してみます。
ありがとうございました。
お役に立てたようで何よりです。
回り込みをするのであれば、フロートは必要になります。
使い分けの仕方については、以下の記事が参考になります。
https://ics.media/entry/15921/
あなたの回答
tips
プレビュー
