質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1684閲覧

flexを使った配置の仕方について

yurina_web

総合スコア7

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/08/17 11:21

いつも回答くださる方、ありがとうございます。

Flexを使った要素の並べ方がいまいちよくわかりません。

↓やりたいこと↓(灰色のところは画像です)
イメージ説明

↓現在↓
イメージ説明

メインコンテンツを左に自己紹介、自己紹介の下にSNSアイコン、右に画像を配置し、その下部にインスタグラムのリンクが貼ってあるデザインなのですが、なかなか綺麗に並べることができません。
左下のSNSのアイコンを入れずになら綺麗に左右・下部と並べることができたのですが、アイコンを入れた途端にこのようなかんじで崩れてしまいます。

flexを使うことはわかっているのですが、どう使えばいいのかがわかりません。
何卒よろしくお願い致します。

HTML

1 <div class="about-bottom"> 2 <div class="profile"> 3 <h2>自己紹介</h2> 4 <h3>自己紹介</h3> 5 <p>自己紹介ああああああああああ</p> 6 </div> 7 <ul class="snsbtniti"> 8 <div class="twitter-icon"> 9 <li> 10 <a href="https://twitter.com/" class="flowbtn7 fl_tw7"> 11 <i class="fab fa-twitter"> 12 </i> 13 </a> 14 </li> 15 </div> 16 17 <li> 18 <a href="https://www.instagram.com//" class="flowbtn7 insta_btn7"> 19 <i class="fab fa-instagram"> 20 </i> 21 </a> 22 </li> 23 </ul> 24 25 26 27 28 <img src="../IMG_prof.jpg" class="prof-pic" height="360px" width="380px"> 29 </div> 30 </div> 31 32 33 34 35 <!-- インスタグラム --> 36 <div class="instagram"> 37 <h2>instagram</h2> 38 <div class="instagram-contents"> 39 <!--     インスタ1つ目        --> 40 <div class="insta1"> 41 <div class="insta-tag"> 42 <p>#セブ島カフェ</p> 43 </div> 44 45 <div class="insta-pic"> 46 <a href="https://www.instagram.com/explore/tags/%E3%82%BB%E3%83%96%E5%B3%B6%E3%82%AB%E3%83%95%E3%82%A7/?hl=ja"> 47 <img src="../セブ島カフェ.jpg" height="194px" width="274px"> 48 </a> 49 </div> 50 </div> 51 52 <!--     インスタ2つ目        --> 53 <div class="insta2"> 54 <div class="insta-tag2"> 55 <p>#cebucafe</p> 56 </div> 57 58 <div class="insta-pic2"> 59 <a href="https://www.instagram.com/explore/tags/cebucafe/?hl=ja"> 60 <img src="../cebucafe.jpg" height="194px" width="274px"> 61 </a> 62 </div> 63 </div> 64 65 <!--     インスタ3つ目        --> 66 <div class="insta3"> 67 <div class="insta-tag3"> 68 <div class="tagname3"> 69 <p>#cebucoffee</p> 70 </div> 71 </div> 72 73 <div class="insta-pic3"> 74 <a href="https://www.instagram.com/explore/tags/cebucoffee/?hl=ja"> 75 <img src="../フィリピンカフェ.jpg" height="194px" width="274px"> 76 </a> 77 </div> 78 79 </div> 80 81 <!--▼ インスタコンテンツ閉じタグ ▼ --> 82 </div> 83 84 <!-- ▼  instagram 閉じタグ ▼ --> 85 </div>

CSS

1 2.about-bottom{ 3margin:75px 0; 4color:#373a36; 5 flex-wrap: wrap; 6 7 8/* position: absolute; */ 9 10} 11 12.profile{ 13 float:left; 14 width:540px; 15 height:340px; 16 margin-left:145px; 17 18} 19 20.about-bottom h2{ 21 font-family:"Raleway"; 22 font-weight: lighter; 23 font-size:40px; 24} 25.about-bottom h3{ 26 font-weight: lighter; 27 margin:0; 28} 29 30.about-bottom p{ 31 font-size:16px; 32 font-family:"Hiragino Kaku Gothic Pro"; 33 font-weight:lighter; 34} 35 36.prof-pic { 37 float:right; 38 margin-top:60px; 39 margin-right:145px; 40} 41 42 43 /* ボタン全体 */ 44 .flowbtn7{ 45 border-radius:50%; 46 position:relative; 47 display:inline-block; 48 width:62px; 49 height:62px; 50 font-size:30px; 51 color:#fff!important; 52 text-decoration:none; 53 transition:.5s; 54 } 55 56 /* ボタン全体の位置 */ 57 .snsbtniti{ 58 59 /* text-align: center; */ 60 /* flex-flow:row wrap; 61 justify-content:space-around; */ 62 margin:0 auto; 63 } 64 /* 65 .snsbtniti ul{ 66 text-align: center; 67 68 } */ 69 70 .twitter-icon{ 71 margin-right:14px; 72 } 73 74 75 76 /* ボタンにマウスを乗せた時 */ 77 .flowbtn7:hover{ 78 -webkit-transform:translateY(-5px); 79 -ms-transform:translateY(-5px); 80 transform:translateY(-5px); 81 } 82 83 /* アイコンをど真ん中に*/ 84 .flowbtn7 i{ 85 position:absolute; 86 top:50%; 87 left:50%; 88 -ms-transform:translate(-50%,-50%); 89 -webkit-transform:translate(-50%,-50%); 90 transform:translate(-50%,-50%); 91 } 92 93 94 /* Twitter */ 95 .fl_tw7{ 96 background:linear-gradient(135deg, #13f1fc 0%,#0470dc 100%); 97 } 98 99 /* Instagram紫グラデ背景 */ 100 .insta_btn7{ 101 background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; 102 background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; 103 overflow:hidden; 104 } 105 /* Instagramオレンジグラデ背景 */ 106 .insta_btn7:before{ 107 content: ''; 108 position:absolute; 109 top:27px; 110 left:-12px; 111 width:59px; 112 height:40px; 113 background:-webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); 114 background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); 115 } 116 117 /* ▼  ここからインスタコンテンツ   ▼  */ 118 119 .instagram{ 120 /* display: flex; */ 121 background-color:#d2e4ef; 122 height:598px; 123 124 125} 126/* .instagram p{ 127 margin-top:11px; 128} */ 129 130.instagram-contents{ 131 display: flex; 132 justify-content: space-around; 133 margin:0 100px; 134} 135 136.instagram p{ 137 margin:0; 138} 139 140 141 142 143.instagram h2{ 144 font-family:'Raleway'; 145 font-size:28px; 146 color:#6c6c6c; 147 text-align: center; 148 position: relative; 149 margin-bottom: 20px; 150 padding-top:80px; 151 margin-bottom:80px; 152 /* // 縦に積む */ 153 display: flex; 154 flex-direction: column; 155 flex-wrap: wrap; 156 /* // 中央寄せ */ 157 justify-content: center; 158 align-items: center; 159} 160 161/*以下で線を表示*/ 162.instagram h2:before { 163 content: ''; 164 position: absolute; 165 left: 50%; 166 bottom: -15px;/*線の上下位置*/ 167 168 width: 108px;/*線の長さ*/ 169 height: 1px;/*線の太さ*/ 170 -webkit-transform: translateX(-50%); 171 transform: translateX(-50%);/*位置調整*/ 172 background-color:#6c6c6c;/*線の色*/ 173 /* // 縦に積む */ 174 display: flex; 175 flex-direction:column; 176 flex-wrap:wrap; 177 /* // 中央寄せ */ 178 justify-content:center; 179 align-items: center 180 } 181 182 .instagram-contents a:hover { 183 position: relative; 184 top: 2px; 185 left: 2px; 186 opacity: .5; 187 } 188 .instagram-contents a{ 189 opacity: 1; 190 transition: 0.3s; 191 } 192 193 194 195 /* ▼ インスタ1つ目 ▼     */ 196 197.insta1{ 198 width:330px; 199 height:315px; 200 background-color: white; 201 /* margin-left:127px; */ 202 margin-right:15px; 203} 204 205.insta-tag{ 206 color: black; 207 font-size:14px; 208 background-color: #faf7d1; 209 width:fit-content; 210 height:fit-content; 211 border-radius: 20px; 212 margin-top:25px; 213 margin-bottom:22px; 214 margin-left:28px; 215 padding: 10px 60px; 216} 217 218.insta-pic{ 219 margin-top:14px; 220 margin-left:28px; 221 margin-right:28px; 222} 223 224 225 226 227 228/* ▼ インスタ2つ目 ▼     */ 229.insta2{ 230 width:330px; 231 height:315px; 232 background-color: white; 233 margin-right:15px; 234 } 235 236 .insta-tag2{ 237 color: black; 238 font-size:14px; 239 background-color: #faf7d1; 240 width:fit-content; 241 height:fit-content; 242 border-radius: 20px; 243 margin-top:25px; 244 margin-bottom:22px; 245 margin-left:28px; 246 padding: 10px 60px; 247 248} 249 250.insta-pic2{ 251 margin-top:14px; 252 margin-left:28px; 253 margin-right:28px; 254} 255 256 257 258 259 260 261/* ▼ インスタ3つ目 ▼     */ 262.insta3{ 263 width:330px; 264 height:315px; 265 background-color: white; 266 } 267 268 .insta-tag3{ 269 color: black; 270 font-size:14px; 271 background-color: #faf7d1; 272 width:fit-content; 273 height:fit-content; 274 border-radius: 20px; 275 margin-top:25px; 276 margin-bottom:22px; 277 margin-left:28px; 278 padding: 10px 60px; 279} 280 281 282 283 284.insta-pic3{ 285 margin-top:14px; 286 margin-left:28px; 287 margin-right:28px; 288} 289

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ざっくりとしたレイアウトは下記のような感じでできると思われます。

html

1 <div class="about-bottom"> 2 <div class="profile"> 3 <h2>自己紹介</h2> 4 <h3>自己紹介</h3> 5 <p>自己紹介ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> 6 <ul class="snsbtniti"> 7 <!-- <div class="twitter-icon"> --> 8 <li> 9 <a href="https://twitter.com/" class="flowbtn7 fl_tw7"> 10 <i class="fab fa-twitter"></i> 11 </a> 12 </li> 13 <!-- </div> --> 14 <li> 15 <a href="https://www.instagram.com//" class="flowbtn7 insta_btn7"> 16 <i class="fab fa-instagram"></i> 17 </a> 18 </li> 19 </ul> 20 </div> 21 <!-- 画面の幅が広い場合はprofileの右に, 狭い場合は下に配置されます --> 22 <img src="../IMG_prof.jpg" class="prof-pic" height="360px" width="380px"> 23 </div>

<div class="twitter-icon">はなくてもよいかなと思い、削りました。<div class="instagram-contents">と同じように、marginなくても親要素のulにdisplay: flex;justify-content: space-around;などを指定すれば適当に間隔を保って配置できると思います。

・profileと画像のレイアウトについては、まずdisplay: flex;は子要素を包む親要素に指定します。そうすると、それだけで子要素が横並びになります。今回は.about-bottomが親要素で.profile<img>が子要素です。大まかに見ると次のような構成になっています。SNSアイコンは.profile内に入れました。

html

1<div class="about-bottom"> 2 <div class="profile"></div> 3 <img> 4</div>

/* add */は追加したコード、/* remove */は削ったコードです。
.profilefloatがなくてもflexboxで横並びになるので削りました。もし、.profile内の子要素を横並びにしたい場合はそこをdivなどで囲ってdisplay: flex;を指定すればOKです。
.snsbtnitiはulなので、list-style: none;とすると箇条書きの中点記号(・)が消えます。こちらにもdisplay: flex;を指定することで、子要素のSNSアイコンが横並びになっています。

css

1.about-bottom{ 2 margin:75px 0; 3 color:#373a36; 4 /* add */ 5 display: flex; 6 flex-wrap: wrap; 7} 8 9.profile{ 10 /* remove */ 11 /* float:left; */ 12 width:540px; 13 height:340px; 14 margin-left:145px; 15} 16 17/* ボタン全体の位置 */ 18.snsbtniti{ 19 /* text-align: center; */ 20 /* flex-flow:row wrap; 21 justify-content:space-around; */ 22 margin:0 auto; 23 /* add */ 24 list-style: none; 25 display: flex; 26}

投稿2019/08/17 13:22

honyao

総合スコア40

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yurina_web

2019/08/17 14:58

とってもわかりやすく教えていただきありがとうございます! おかげさまでできました!flexもっと勉強します・・・
yurina_web

2019/08/17 15:08

こんな便利なものまであるんですね・・・!ありがとうございます、参考にさせていただきます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問