レスポンシブサイトで文字を一列にしたい

レスポンシブ化したときに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)

行動規範の内容に同意します

回答2件

フォントサイズを vw単位と calc を使って画面幅にあわせてちょうどいいサイズに伸縮するようにすればどうでしょうか。

例えば、レスポンシブCSS(幅812px以下)の方は、ヘッダーのロゴを下記のように固定サイズにしてますが、

css
1     header h1 {
2            font-size: 40px;
3            display: inline-block;
4     }

これを、下記のように設定すれば画面幅ほぼ一杯に表示されます。

css
1     header h1 {
2            font-size: calc((100vw - 60px)/12 );
3     }

100vwは画面幅、60pxはpaddingの左右余白、12は文字数に応じて丁度よくなる数値に調整

投稿2020/01/17 00:42

hatena19

総合スコア33715

【CSSで文字列の折り返しをさせない方法 | UX MILK】
https://uxmilk.jp/14958

投稿2020/01/16 16:42

kei344

総合スコア69407

liar.ryu

2020/01/16 16:44

回答ありがとうございます、自分でもそれを試したのですが要素がはみ出してしまってうまくできませんでした

kei344

2020/01/16 16:47

> 一列にする方法をご教授くださいなので。はみ出すなら文字サイズを小さくするくらいしか対処法は無いでしょう。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

レスポンシブサイトで文字を一列にしたい

関連した質問