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」
よろしくお願いいたします。
あなたの回答
tips
プレビュー