レスポンシブ化したときにh1タグがどうしても2列になってしまうので改行されずに一列にする方法をご教授ください![イメージ説明]
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <script src="https://kit.fontawesome.com/a66d2c1189.js" crossorigin="anonymous"></script> 8 <link rel="stylesheet" href="css/styles.css"> 9 <link rel="stylesheet" href="css/responsive.css"> 10 <title>misson1</title> 11</head> 12<body> 13 <div class="most"> 14 <div class="container"> 15 テキストテキストテキスト 16 </div> 17 </div> 18 <header> 19 <div class="container"> 20 <div class="header-logo"> 21 <h1>EDEN CORPORATION</h1> 22 </div> 23 <div class="header-list"> 24 <ul> 25 <a href="#"><li><span class="fas fa-caret-right"></span>会社概要</li></a> 26 <a href="#"><li><span class="fas fa-caret-right"></span>事業紹介</li></a> 27 <a href="#"><li><span class="fas fa-caret-right"></span>採用情報</li></a> 28 <a href="#"><li class="bb"><span class="fas fa-caret-right"></span>お問い合わせ</li></a> 29 </ul> 30 </div> 31 </div> 32 </header> 33 <div class="container"> 34 <div class="top"> 35 <p>EDEN</p> 36 </div> 37 </div> 38 <div class="info"> 39 <div class="container"> 40 <div class="cloumn"> 41 <h2>お知らせ</h2> 42 <div class="flex"> 43 <p class="data">2019年1月1日</p> 44 <p class="text">テキストテキストテキストテキストキストテテキストテキストテキストテキストテキストテキストテキストテキスト</p> 45 </p> 46 </div> 47 <hr> 48 <div class="flex"> 49 <p class="data">2019年1月1日</p> 50 <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスキストテキストテキスト</p> 51 </div> 52 <hr> 53 <div class="flex"> 54 <p class="data">2019年1月1日</p> 55 <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスキストテキストテキスト</p class="text"> 56 </div> 57 <hr> 58 </div> 59 <div class="mobileflex"> 60 <div class="banner banner1"> 61 <p>バナー</p> 62 </div> 63 <div class="banner"> 64 <p>バナー</p> 65 </div> 66 </div> 67 68 69 </div> 70 </div> 71 <div class="container"> 72 <footer> 73 <p>Copyright 2019 EDEN CORPORATION All Right Reserved</p> 74 </footer> 75 </div> 76 77</body> 78</html>
css
1body { 2 padding: 0; 3 margin: 0; 4} 5 .most { 6 color:white; 7 background-color: rgb(117, 68, 172); 8 height: 20px; 9 text-align: left; 10 } 11 .container { 12 max-width: 1000px; 13 margin: 0 auto; 14 padding: 0 30px; 15 } 16 header .container, .info .container { 17 display: flex; 18 } 19 .header-logo h1 { 20 font-weight: normal; 21 } 22 .header-list ul { 23 display: flex; 24 list-style-type: none; 25 } 26 .header-list ul li { 27 padding: 0 22px; 28 } 29 .header-list ul a { 30 text-decoration: none; 31 color: black; 32 line-height: 48px; 33 display: block; 34 } 35 .fas { 36 color: rgb(117, 68, 172); 37 } 38 .top { 39 width:100%; 40 height: 400px; 41 background-color: rgb(117, 68, 172); 42 position: relative; 43 } 44 .top p { 45 position: absolute; 46 bottom: 10px; 47 right: 10px; 48 color: white; 49 font-size: 30px; 50 margin: 0; 51 } 52 .info { 53 margin: 30px 0; 54 height: 30%; 55 } 56 .cloumn { 57 width: 80%; 58 } 59 .cloumn h2 { 60 border-bottom: rgb(117, 68, 172) 3px solid; 61 padding-bottom: 15px; 62 font-weight: normal; 63 } 64 .data { 65 flex: 0 0 130px; 66 } 67 .text { 68 margin-left: 20px; 69 } 70 hr { 71 border:none; 72 padding: 5px 0; 73 border-bottom: dotted; 74 width: 100%; 75 } 76 .banner { 77 width: 200px; 78 height: 100px; 79 margin: 20px 0; 80 background-color: rgb(117, 68, 172); 81 position: relative; 82 } 83 .banner p { 84 position: absolute; 85 bottom: 5px; 86 right: 5px; 87 color: white; 88 margin: 0; 89 } 90 footer { 91 width: 100%; 92 padding: 10px 0; 93 border-top: rgb(117, 68, 172) 3px solid; 94 text-align: right; 95 } 96 .flex { 97 display: flex; 98 }
レスポンシブ
css
1@media screen and (max-width: 812px) { 2 /* .info .container { 3 display: flex; 4 } */ 5 header .container,.header-list ul, .info .container { 6 flex-wrap: wrap; 7 } 8 header .container { 9 text-align: center; 10 } 11 header h1 { 12 font-size: 40px; 13 display: inline-block; 14 } 15 .header-list { 16 width: 100%; 17 margin-bottom: 30px; 18 } 19 .header-list ul { 20 padding-left: 0; 21 } 22 .header-list li { 23 border-top: dotted black 2px; 24 } 25 .header-list span { 26 display: none; 27 } 28 .bb { 29 border-bottom: dotted black 2px; 30 } 31 .header-list a { 32 width: 100%; 33 } 34 .top { 35 height: 200px; 36 } 37 .mobileflex{ 38 display: flex; 39 width: 100%; 40 } 41 .info .container { 42 text-align: center; 43 } 44 .info .text { 45 text-align-last: left; 46 } 47 .cloumn { 48 width: 100%; 49 } 50 .banner { 51 width: 50%; 52 /* height: 200px; */ 53 } 54 .banner1 { 55 margin-right: 10px; 56 } 57 footer { 58 text-align: center; 59 } 60 footer p { 61 display: inline; 62 } 63} 64 65 66 67 68![イメージ![イメージ説明](1aa2f5c5cccb9641b16e739d2bf5a564.jpeg)89f4aedcf51735f12c41b34485a42b.jpeg)
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。