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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

Q&A

0回答

1812閲覧

flexbox使用で、画面を縮めるとデザインが崩れる。

sugawa

総合スコア24

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

0グッド

0クリップ

投稿2019/05/12 07:22

編集2022/01/12 10:55

flexboxを適用して、画面を縮めるとデザインが壊れます。
1、ナビバーの文字が壊れる
2、メインの写真がそのままの大きさで縮まって壊れる。
3、<div class="container"><p class="item-p">の文字を改行せずに
ブレークポイントがきたら囲みごと中央にもっと寄せて、もっと画面が小さくなったら縦方向の表示にしていく感じにしたい。

HTML

1<!doctype html> 2<html> 3<head> 4 5<meta charset="UTF-8"> 6<title>無題ドキュメント</title> 7<link href="style.css" rel="stylesheet" type="text/css"> 8</head> 9 10<body> 11 <nav> 12 <ul class="main-nav"> 13 <li class="logo-1"><img src="スクリーンショット 2019-05-11 12.37.11.png" width="38" height="36" alt=""/></li> 14 <li class="kennsaku"><img src="スクリーンショット 2019-05-11 12.04.20.png" width="460" height="50" alt="kennsaku"/></li> 15 <li class="navi-moji"><a href="#">ホストを始める</a></li> 16 <li class="navi-moji"><a href="#">ヘルプ</a></li> 17 <li class="navi-moji"><a href="#">登録する</a></li> 18 <li class="navi-moji"><a href="#">ログイン</a></li> 19 </ul> 20</nav> 21 22 23 24 25 26 27 <div class="box"  style="position: relative;"> <!--画面フルサイズの要素--> 28 <img class="main-img" src="BackgroundHomeSummer.jpg" width="100%" height="100%" alt="main-img"/> 29 <div class="gazou-monngon" style="position:absolute; top:50px; left:30px; width: 430px;"> 30            <h1 class="tabiwo">旅を贈ろう。</h1> 31 <p class="Air">Airbnbギフトカードで、世界をぐんと身近に</p> 32 <a href="#" class="btn-flat-simple"> 33 <i class="fa fa-caret-right"></i> ギフトカードを登録 34 </a> 35 </div> 36 </div> 37 38 39 40 41 <div class="itumo"><h2>いつも完璧な贈りもの</h2></div> 42 43 44 45 46 <div class="container"> 47 <div class="item"><img src="メールの無料アイコンその8.png" width="60" height="45" alt=""/> <h3 class="item-h3">簡単に使える</h3> 48 <p class="item-p">ギフトカードはメールで届きます。Airbnbアカウントへのギフト登録も超かんたん。</p></div> 49 50 <div class="item"><img src="目覚まし時計のフリーアイコン.png" width="60" height="45" alt=""/> <h3 class="item-h3">有効期限なし</h3> 51 <p class="item-p">Airbnbギフトカードは無期限。だから友達も時間をかけて旅をプランできます。</p></div> 52 53 <div class="item"> <img src="地球儀の無料アイコンその3.png" width="60" height="45" alt=""/> <h3 class="item-h3">忘れられない旅</h3> 54 <p class="item-p">お家は100万件以上あるので、ずっと住みたいと憧れていた街の暮らしも叶います。</p></div> 55 </div> 56 57 58 59 60 61 62 63</body> 64</html> 65

CSS

1/*フォントファミリー */ 2body { 3font-family: Circular, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS Pゴシック", "MS PGothic", "MS Gothic", "MS ゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif; 4} 5/*横幅が1190px以下になったらnaviを横並びから縦並びに変更する*/ 6@media screen and (max-width: 1190px) { 7 .main-nav { 8 flex-direction: column; 9 } 10} 11/*メインナビの文字*/ 12.main-nav a { 13 margin: 10px; 14 border-radius: 5px; 15 background: #fff; 16 color: black; 17 display: block; 18 padding: 15px; 19 text-decoration: none; 20} 21 22/*メインナビをフレックスに*/ 23.main-nav { 24 display: flex; 25} 26/*検索窓の調整*/ 27.kennsaku { 28 margin-top: 10px; 29 margin-right: 390px; 30} 31/*ulの黒丸を消す*/ 32ul { 33 list-style: none; 34} 35/*logo位置調整*/ 36li.logo-1 { 37 margin-top: 18px; 38} 39/*ナビ文字調整*/ 40li.navi-moji { 41 font-size: 14px; 42} 43/*写真を入れる横幅いっぱいのBOX*/ 44.box { 45 width: 100%; 46 height: 600px; 47 background-size: cover; 48 background-position: center; 49} 50/*一番外のブラウザー指定のマージンを全削除*/ 51body { 52 margin: 0px; 53} 54/*画像中の文言群の位置調整*/ 55.gazou-monngon { 56 margin-left: 200px; 57 margin-top: 170px; 58 color: white; 59} 60/*画像中の文言「旅を贈ろう」の文字調整*/ 61.tabiwo { 62 font-size: 50px; 63 margin-bottom: 20px; 64} 65/*画像中の文言「Airbnbギフトカードで、世界をぐんと身近に」の文字調整*/ 66.Air { 67 font-size: 20px; 68 margin-bottom: 30px; 69} 70/*トップ画像中の「ギフトカードを登録」ボタンの各種調整*/ 71.btn-flat-simple { 72 position: relative; 73 display: inline-block; 74 font-weight: bold; 75 padding: 0.25em 0.5em; 76 text-decoration: none; 77 color: #00BCD4; 78 background: #ECECEC; 79 transition: .4s; 80 border-radius: 10px; 81} 82/*マウスが「ギフトカードを登録」ボタンの上にきた時にどうするかの調節*/ 83.btn-flat-simple:hover { 84 background: #00bcd4; 85 color: white; 86} 87/*「いつも完璧な贈りもの」の文言調整*/ 88.itumo { 89 text-align: center; 90} 91/*containerをフレックス対応にしている*/ 92.container { display: flex; } 93/*フレックスの中でもセンターにしている*/ 94.container { justify-content: center; } 95/*containerの中身の文字は中央揃え*/ 96.container {text-align: center;} 97/*containerの中身が縮められて縦表示になった後でも中央に表示できる*/ 98.container { align-items: center;} 99/*itemボックス3つの幅調整をしている*/ 100.item { 101 width: 350px; 102 margin: 0px 10px 0px 10px; 103} 104/*横幅が700px以下になったらcontainerを横並びから縦並びに変更する*/ 105@media screen and (max-width: 700px) { 106 .container { 107 flex-direction: column; 108 } 109} 110 111 112 113 114 115 116 117 118 119 120 121 122 123

環境は、MacBook Pro、Googlechrome、ドリームウェーバー 参考サイト「https://www.airbnb.jp/gift」
よろしくお願いいたします。

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

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

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

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

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

yasutomi

2019/05/12 10:24

表示が崩れる原因(displayの指定がおかしいなど)は コピー元のAirbnbのページを見て理解しましたが、 実際に完成しているページを見て原因を特定できないのであれば 基礎スキルが十分に足りていないためCSSプロパティなどの 基礎について学習してから制作に挑まれることをオススメします。 あとドリームウェーバーではなくドリームウィーバーです。
sugawa

2019/05/12 13:45

わかりました!ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問