Q&A
前提
display: flex;を活用して、ヘッダーを作成しています。
ですが、うまく配置されません。
自分なりに原因を見つけましたが、それを解消することができずに困っています。
実現したいこと
以下の画像のヘッダー、ナビゲーション部分を
このように、右端に表示したいです。
参考：https://code-step.com/demo/html/profile/index.html
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>模写コーディング２</title> 8 <meta name="description" content="text text text text text text text text"> 9 <link rel="stylesheet" href="./assets/css/style.css"> 10</head> 11<body> 12 <header> 13 <div class="top-wrapper"> 14 <!-- <h1 class="site-title"> --> 15 <a href="index.html" class="wrapper-left"></a> 16 17 <img src="./assets/img/logo.svg" class="logo" alt="logo"> </a> 18 <!-- </h1> --> 19 <nav> 20 <ul> 21 <li><a href="#toabout">About</a></li> 22 <li><a href="#tobicycle">Bicycle</a></li> 23 </ul> 24 </nav> 25 26 </div> 27 </header> 28 <main> 29 <div> 30 <img class="visual" src="./assets/img/mainvisual.jpg" alt="mainvisual"> 31 </div> 32 33 <section class="wrapper"> 34 <h2 class="title">About</h2> 35 <div id="toabout" class="about"> 36 <div class="about-img"> 37 <img class="icon" src="./assets/img/about.jpg" alt="about.jpg" width="100px" height="100px 38 "> 39 </div> 40 41 <div class="about-direction"> 42 <p class="introdaction">KIYORI HIRASAWA</p> 43 <p class="text"> 44 テキストテキストテキストテキストテキストテキストテキスト<br> 45 テキストテキストテキストテキストテキストテキストテキスト<br> 46 テキストテキストテキストテキストテキストテキストテキスト 47 </p> 48 49 </div> 50 </div> 51 </section> 52 53 <section class="wrapper"> 54 </section> 55 56 <section class="wrapper"> 57 <h3 id="tobicycle" class="title">Bicycle</h3> 58 59 <div class="bicycle"> 60 61 <div class="works"> 62 <figure class="work"> 63 <img src="./assets/img/bicycle1.jpg" alt="bicycle images" class="work-img" width="300px" height="250px"> 64 <p class="work-title">タイトルタイトル</p> 65 <figcaption class="work-text"> 66 テキストテキストテキスト 67 </figcaption> 68 </figure> 69 </div> 70 71 <div class="works"> 72 <figure class="work"> 73 <img src="./assets/img/bicycle2.jpg" alt="bicycle images" class="work-img" width="300px" height="250px"> 74 <p class="work-title">タイトルタイトル</p> 75 <figcaption class="work-text"> 76 テキストテキストテキスト 77 </figcaption> 78 </figure> 79 </div> 80 81 <div class="works"> 82 <figure class="work"> 83 <img src="./assets/img/bicycle3.jpg" alt="bicycle images" class="work-img" width="300px" height="250px"> 84 <p class="work-title">タイトルタイトル</p> 85 <figcaption class="work-text"> 86 テキストテキストテキスト 87 </figcaption> 88 </figure> 89 </div> 90 91 </div> 92 </section> 93 </main> 94 95 <footer> 96 <p class="footer">© 2020 Profile</p> 97 </footer> 98</body> 99</html>
css
1@charset "UTF-8"; 2 3/*-----全体-------*/ 4* { 5 margin: 0; 6 } 7 8li { 9 list-style: none; 10} 11 12a { 13 text-decoration: none; 14 color: black; 15} 16/*------header------*/ 17 18.top-wrapper { 19 width: 960px; 20 height: 100px; 21 margin: 0 auto; 22 padding: 0 4%; 23 box-sizing: border-box; 24 display: flex; 25 align-items: center; 26 justify-content: space-between; 27 28} 29 30.logo { 31 width: 150px; 32 height: 200px; 33} 34 35/* .wrapper-left { 36 display: flex; 37 justify-content: space-between; 38 39} */ 40 41ul { 42 display: flex; 43 /* justify-content: space-between; */ 44} 45 46li { 47 padding-left: 25px; 48} 49/*------mainvisual--------*/ 50 51.visual { 52 height: 600px; 53 min-width: 100vw; 54 padding-bottom: 100px; 55} 56 57 58/*-----about-------*/ 59 60.wrapper { 61 width: 960px; 62 margin: 0 auto; 63 text-align: center; 64 padding: 0 4%; 65 box-sizing: border-box; 66} 67 68.title { 69 display: inline; 70 border-bottom: 1px solid; 71 padding-bottom: 5px; 72 font-size: 24px; 73} 74 75.about { 76 display: flex; 77 justify-content: center; 78 padding: 50px; 79} 80 81/* .about-img {} */ 82 83.icon { 84 border-radius: 50%; 85} 86 87.about-direction { 88text-align: left; 89padding-left: 50px; 90} 91 92/* .introdaction { 93 94} 95 96.text { 97 98} */ 99 100/*------bicycle-------*/ 101 102.bicycle { 103 display: flex; 104 justify-content: center; 105 padding: 50px; 106 107} 108 109.works { 110 margin-right: 10px 111} 112 113.work-title { 114 font-weight: bold; 115} 116 117.work-text{ 118 padding-top: 0px; 119} 120 121 122/*------footer------*/ 123 124.footer { 125 display: block; 126 text-align: center; 127 font-size: 12px; 128 padding-top: 100px 129}
試したこと
・.top-wrapper {
width: 960px;
height: 100px;
margin: 0 auto;
padding: 0 4%;
box-sizing: border-box;
display: flex;
justify-content: space-between; /追加/
align-items: center;
以下のようにアイコンの位置がズレてしまいました。
・デベロッパーツールで要素に紫の斜線が表示されていることを確認しました。
どうやら、display: flex;が影響しているようです。
余白を埋めるために、flex-growを追加してみましたが、うまくいきません。
・.top-wrapper {
width: 960px;
height: 100px;
/* margin: 0 auto;*/
margin: 0; /追加/
padding: 0 4%;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
display: flex がうまく効かない原因の１つに、「他のmarginの影響を受けている」ことがあるらしいので、margin: 0; を追加してみました。一見すると解決したかのような表示になりましたが、デベロッパーツールを確認すると中心がズレてしまいます・・・。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
justify-content: space-betweenで左右に分けて配置できます。
css
1.top-wrapper { 2 width: 960px; 3 height: 100px; 4 margin: 0 auto; 5 padding: 0 4%; 6 box-sizing: border-box; 7 display: flex; 8 justify-content: space-between; /* 追加 */ 9 align-items: center; 10} 11 12.logo { 13 weight: 15px; /* widthの間違い？ */ 14 height: 30px; 15}
あと、かわいらしいミスで…幅（width）が重さ（weight）になってます…！
投稿2022/12/13 13:40
総合スコア2316
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/12/13 15:08
2022/12/13 16:44
2022/12/13 16:46
2022/12/14 14:17
2022/12/14 16:19
2022/12/14 16:26
2022/12/16 00:55