お世話になります。
サイト模写をしています。cssにて教えてください。
前提・実現したいこと
4つの要素を、縦横2列に配置したいのですが、
display: flex;を入れて、横並びが効きません。
どういった原因が考えられますでしょうか。。
###元のサイトのコード
css
1#about ul { 2 display: flex; 3 justify-content: space-between; 4 flex-wrap: wrap; 5 margin-bottom: 40px; 6}
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="jp" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title>coffee shop</title> 6 <meta name="description" content="coffee shop"> 7 8 <!---レスポン---> 9 <meta name="viewport" content="width=device-width,initial-scale=1"> 10 11 <link rel ="preconnect" href = "https://fonts.gstatic.com" crossorigin> 12 <link href ="https://fonts.googleapis.com/css2?family = M + PLUS + Rounded + 1c:wght @ 700& display = swap "rel =" stylesheet "> 13 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> 14 <link rel="stylesheet" href="css/style.css" > 15 <link rel="stylesheet" href="css/responsive.css" > 16 <link rel="icon" type="image/png" href="img/favicon.ico"> 17 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 18 <script src="js/main.js"></script> 19</head> 20 21 22 23 24 <body> 25 <header id ="header" class="big-bg"> 26 27 <nav> 28 <ul class="header-menu"> 29 <li> 30 <a href="#">MENU</a> 31 </li> 32 <li> 33 <a href="#">ABOUT</a> 34 </li> 35 <li> 36 <a href="#">LOCATION</a> 37 </li> 38 </ul> 39 </nav> 40 41 42 <h1 class="title"> 43 <img src="img/logo.svg" alt="coffee"> 44 </h1> 45</header> 46 47<main> 48 49 <section id="menu"> 50 51 <div class="menu-img fixed-bg"> 52 <h2 class="sectiontitle">MENU</h2> 53 </div> 54 <div class="content wrapper"> 55 <div class="content1"> 56 <div class="coffee"> 57 <h3>COFFEE</h3> 58 <dl class="menu-list"> 59 <dt>××××××××××××</dt> 60 <dd>¥500</dd> 61 <dt>××××××××××××</dt> 62 <dd>¥500</dd> 63 <dt>××××××××××××</dt> 64 <dd>¥500</dd> 65 <dt>××××××××××××</dt> 66 <dd>¥500</dd> 67 <dt>××××××××××××</dt> 68 <dd>¥500</dd> 69 <dt>××××××××××××</dt> 70 <dd>¥500</dd> 71 <dt>××××××××××××</dt> 72 <dd>¥500</dd> 73 <dt>××××××××××××</dt> 74 <dd>¥500</dd> 75 <dt>××××××××××××</dt> 76 <dd>¥500</dd> 77 <dt>××××××××××××</dt> 78 <dd>¥500</dd> 79 </dl> 80 81 </div> 82 83 </div> 84 <div class="content2"> 85 <div class="food"> 86 <h3>FOOD</h3> 87 <dl class="menu-list"> 88 <dt>××××××××××××</dt> 89 <dd>¥500</dd> 90 <dt>××××××××××××</dt> 91 <dd>¥500</dd> 92 <dt>××××××××××××</dt> 93 <dd>¥500</dd> 94 </dl> 95 96 <h3>OTHER</h3> 97 <dl class="menu-list"> 98 <dt>××××××××××××</dt> 99 <dd>¥500</dd> 100 <dt>××××××××××××</dt> 101 <dd>¥500</dd> 102 <dt>××××××××××××</dt> 103 <dd>¥500</dd> 104 </dl> 105 </div> 106 107 </div> 108 </div> 109</section> 110 111<section id="about"> 112 <div class="about-img fixed-bg"> 113 <h2 class="sectiontitle">ABOUT</h2> 114 </div> 115 116 <div class="content3 wrapper"> 117 <div class="about-item"> 118 <h3>COFFEE</h3> 119 <ul> 120 <li> 121 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 122 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 123 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 124 テキストテキストテキストテキストテキストテキスト</li> 125 <li> 126 TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT 127 TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT 128 TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT 129 TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT 130 </li> 131 <li> 132 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 133 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 134 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 135 テキストテキストテキストテキストテキストテキスト 136 </li> 137 <li> 138 TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT 139 TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT 140 TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT 141 TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT 142 </li> 143 </ul> 144 145 <div class="readmore"> 146 <a href="#">Read More</a> 147 </div> 148 149 </div> 150 151 </div> 152 153</section> 154 155 156 157 158</main> 159 160 </body> 161</html> 162
CSS
1@charset "UTF-8"; 2 3html { 4 font-size: 100%; 5} 6 7body { 8 font-family: "Helvetica Neue", "Arial", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; 9 font-size: 0.9rem; 10 line-height: 1.7; 11} 12 13 14a { 15 text-decoration: none; 16} 17 18 19img { 20 max-width: 100%; 21} 22 23 24li { 25 list-style: none; 26} 27 28.wrapper { 29 max-width: 1000px; 30 padding: 90px 16px 150px 16px; 31 margin: 0 auto; 32 text-align: center; 33} 34 35/* ↑↑↑コンテンツ幅を設定するための共通クラス*/ 36.big-bg { 37 background-size: cover; 38 background-position: center top; 39 background-repeat: no-repeat; 40 41} 42 43 44#header { 45 background-image: url(../img/cafe.jpg); 46 min-height: 100vh; 47 background-size: cover; 48 background-position: center top; 49 background-repeat: no-repeat; 50 padding: 20px 40px; 51 position: relative; 52} 53 54.header-menu { 55 display: flex; 56 justify-content: flex-end; 57} 58 59h1 { 60 text-align: center; 61 padding-top: 200px; 62} 63 64.header-menu a { 65 color: #fff; 66 font-size: 20px; 67 filter: drop-shadow(1px 1px 2px #121212); 68 padding-right: 30px; 69 font-weight: bold; 70} 71 72.header-menu li { 73 margin-top: 20px; 74} 75 76.header-menu a:hover { 77 color: #e03131; 78} 79 80.content { 81 display: flex; 82 justify-content: center; 83} 84 85.sectiontitle { 86 width: 100%; 87 font-size: 4.5rem; 88 color: #fff; 89 text-align: center; 90 filter: drop-shadow(1px 1px 10px #c0c0c0); 91 position: absolute; 92 top: 30%; 93 94 95} 96 97.content1 { 98 width: 50%; 99 margin: 0 45px; 100 border-right: solid 1px #000; 101 102} 103 104 105 106 107.content2 { 108padding-left: 10px; 109width: 50%; 110} 111 112h3 { 113 font-size: 2.5rem; 114 border-bottom: solid 6px #e03131; 115 margin-bottom: 70px; 116 display: inline-block; 117} 118 119#menu .menu-list { 120 display: flex; 121 flex-wrap: wrap; 122} 123 124 125 126#menu dt { 127 width: 87%; 128 font-size: 14.4px; 129 border-bottom: 1px dotted #000 ; 130 text-align: left; 131 margin-bottom: 25px; 132 133} 134 135 136#menu dd { 137 width: 13%; 138 font-size: 14.4px; 139 text-align: right; 140 padding-right: 50px; 141} 142 143.fixed-bg { 144 height: 300px; 145 background-attachment: fixed; 146 background-size: cover; 147 background-position: center; 148 background-image: url(../img/menu.jpg); 149 position: relative; 150 151} 152 153 154 155#menu { 156 margin-top: 20px; 157} 158 159#about ul { 160 display: flex; 161 justify-content: space-between; 162 flex-wrap: wrap; 163} 164
補足情報(FW/ツールのバージョンなど)
#
↑元のサイトのコード?とやら全角ですがこれは?
ご連絡ありがとうございます。
元のサイトのコードは、参考として載せてみました。
(模写練習用のサイトなので、ソースコードが掲載されています)
このコードは、stylesheetへは貼り付けしていませんが、同じように実際入力を行っています。
すみません、、頂いた質問を理解していませんでした。
「#
↑元のサイトのコード?とやら全角ですがこれは?」
「#」は半角入力すると、質問入力画面で、マークアップ機能で大文字になってしまうので、全角で記入しています。「id」だから「#」の入力のようです。
liの大きさを固定していないためではないでしょうか?意図を汲み取れているか自信はないですが。。。
> 「#」は半角入力すると、質問入力画面で、マークアップ機能で大文字になってしまう
CSSも、HTML同様、コードブロックを使えば解決します。
質問は修正可能なので、
お願いします。
コードブロックも、複数配置可能です。
ご連絡ありがとうございます。
元のコード欄、追加と訂正しました。
li にwidth50%入れても、横並びになりませんでした。。。
マークダウンのcodeを使えば他のマークダウンの機能は無視できます。
赤の他人ゆえ、提示されたものが全てなので、半端な加工は見ている人を混乱させます。
せめて直しておいてほしい
大変失礼いたしました。
恐れ入ります、マークダウンのコードブロックはどのように入力するのでしょうか。
https://teratail.com/help#about-markdown
ヘルプ確認しましたが、該当のコードが探せませんでしたので教えていただけますと幸いです。
コードはご自身のものです。
投稿の際に考慮するもの。
すでにご自身の質問に「該当のソースコード」としてHTMLとCSSに対し適応されています。同じようにしてください。
質問訂正いたしました。たいへん失礼いたしました。次回より気をつけます。
失礼…というより配慮の問題と思います。見るのは例外なく赤の他人ですから。
本当にそう書いてあるのか、間違えたのか、加工したのか 誰にもわかりません
回答2件
あなたの回答
tips
プレビュー