見出しが、改行されるのを修正したいです

前提・実現したいこと

【自分で作った】

【目指している手本】

発生している問題・エラーメッセージ

上の図の通りですが、お手本は「～年～月」と、その横に「～付きの投稿」のような見出しが綺麗に並行しています。高さが全く同じところから、それぞれ始まっています。

しかし自分で作ったものはそうなっていません。ピンク色で着色しているので、視覚的にはっきりしていますが、左側にある日付欄と、右側の見出しの始まる位置にズレが生じています。
どうしてこのような事が生じているのか、自分のソースコードの問題点をご指摘していただけると嬉しいです。

該当のソースコード

HTML
1<head>
2  <link rel="stylesheet" href="stylesheetfirst.css">
3  <meta charset="utf-8">
4  <title>おほ</title>
5  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
6  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
7
8</head>
9
10<body>
11 <header>
12  <div class="container">
13   <div class="header-left">
14    <h1><a href="#">Write</a></h1>
15    <p>書くためのテーマ</p>
16   </div>
17   <div class="header-right">
18    <div class="header-nav">
19     <ul class="gnav">
20      <li><a href="#">ホーム<span class="fas fa-angle-down"></a>
21       <ul>
22        <li><a href="/">カスタマイズ</a></li>
23       </ul>
24      </li>
25      <li><a href="#">ページ<span class="fas fa-angle-down"></a>
26       <ul>
27        <li><a href="/">アイキャッチ画像なしのページ</a></li>
28        <li><a href="/">ページ（全幅テンプレート）</a></li>
29       </ul>
30      </li>
31      <li><a href="#">タイポグラフィー</a></li>
32      <li><a href="#">お問い合わせ</a></li>
33     </ul>
34    </div>
35    <div class="search-wrapper">
36     <form action="G">
37      <input class="search" type="text" name="q" placeholder="検索..."/>
38     </form>
39    </div>
40
41   </div>
42  </div>
43 </header>
44
45<div class="top-wrapper">
46 <div class="container">
47  <img src="cropped-nicole-honeywill-730102-unsplash (1).jpg">
48   <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
49 </div>
50</div>
51
52<div class="main-wrapper">
53 <div class="container">
54
55  <div class="text-box">
56   <div class="date">
57    <p><a href="#">2018年9月1日</a></p>
58   </div>
59   <div class="textarea">
60    <h1 class="text-heading"><a href="#">書くためのテーマ</a></h1>
61     <p class="text">Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
62    </div>
63   </div>
64
65   <div class="text-box">
66    <div class="date">
67     <p><a href="#">2018年3月5日</a></p>
68    </div>
69    <div class="textarea">
70     <h1 class="text-heading"><a href="#">画像付きの投稿</a></h1>
71      <p class="text">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
72     </div>
73    </div>
74
75    <div class="text-box">
76     <div class="date">
77      <p><a href="#">2018年3月5日</a></p>
78     </div>
79     <div class="textarea">
80      <h1 class="text-heading"><a href="#">引用付きの投稿</a></h1>
81       <p class="text">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…
82
83</p>
84      </div>
85     </div>
86
87     <div class="text-box">
88      <div class="date">
89       <p><a href="#">2018年3月5日</a></p>
90      </div>
91     <div class="textarea">
92      <h1 class="text-heading"><a href="#">コメント付きの投稿</a></h1>
93       <p class="text">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…</p>
94     </div>
95    </div>
96
97     <div class="text-box">
98      <div class="date">
99       <p><a href="#">2018年3月3日</a></p>
100      </div>
101      <div class="textarea">
102       <h1 class="text-heading"><a href="#">吾輩は猫である</a></h1>
103        <p class="text">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 しかもあとで聞くとそ…
104
105</p>
106       </div>
107      </div>
108
109     </div>
110    </div>

CSS
1body {
2    font-size: 15px;
3    font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
4    line-height: 1.8;
5}
6
7a {
8  text-decoration: none;
9  color: #444444;
10}
11
12header {
13  height: 150px;
14  width: 100%;
15  margin-top: 50px;
16}
17
18.container {
19  width: 1000px;
20  margin: 0 auto;
21}
22
23.header-left {
24  float: left;
25}
26
27.header-left h1 {
28  font-size: 36px;
29  line-height: 48px;
30}
31
32.header-left p {
33  font-size: 18px;
34}
35
36.header-right {
37  float: right;
38  padding-top: 45px;
39}
40
41
42.gnav li {
43  font-size: 16px;
44  padding: 0 18px;
45  float: left;
46  position: relative;
47}
48
49ul  {
50  list-style: none;
51}
52
53.gnav ul {
54  float: left;
55}
56
57.gnav li ul {
58  position: absolute;
59  top: 45px;
60  left: -5px;
61  height: 0;
62  visibility: hidden;
63}
64
65.gnav li ul li {
66  width: 200px;
67  border: solid 1px #f0f0f0;
68  padding: 10px 20px 0 20px;
69  box-shadow: 0.5px 0.5px #f0f0f0;
70  opacity: 0;
71  transition: all 0.5s;
72}
73
74.gnav li a {
75  display: block;
76  padding-bottom: 16px;
77}
78
79.gnav li:hover ul li{
80  visibility: visible;
81  opacity: 1;
82}
83
84.gnav li a:hover {
85  color: #c49029;
86}
87
88.gnav {
89  padding: 0 200px 0 0;
90}
91
92.search-wrapper {
93  height: 40px;
94  display: inline-block;
95  float: right;
96  position: relative;
97}
98
99.search {
100  height: 40px;
101  width: 0px;
102  font-family: 'Font Awesome\ 5 Free';
103  padding-left: 30px;
104  font-size: 16px;
105  border: 1px solid #e0e0e0;
106  position: absolute;
107  right: 0;
108  top: -5px;
109  border: none;
110  cursor: pointer
111  transition: 0.5s;
112}
113
114.search:focus {
115  width: 220px;
116  height: 40px;
117 border: 1px solid;
118 cursor: text;
119}
120
121.top-wrapper {
122  height: 780px;
123  background-color: pink;
124}
125
126.top-wrapper p {
127  padding-top: 90px;
128  font-size: 27px;
129  color: #777777;
130}
131
132.main-wrapper {
133  height: 1400px;
134}
135
136.date {
137  float: left;
138  font-size: 16.8px;
139  color: #999999;
140  margin-right: 220px;
141  background-color: pink;
142}
143
144.text {
145  background-color: red;
146}
147
148.textarea {
149  width: 700px;
150  display: inline-block;
151  margin-left: 220px;
152  background-color: pink;
153}
154
155.text-heading {
156  color: #111111;
157  font-size: 22.4px;
158  padding-bottom: 25px;
159}
160
161.text-box {
162  padding-bottom: 60px;
163}
164

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

回答2件

css
1.text-box{
2display:flex;
3}
4.date{
5background-Color:yellow;
6width:150px;;
7}
8.textarea{
9width:calc(100% - 160px);
10}
11.textarea h1{
12  background-Color:lime;
13  margin:0px;
14}
15.textarea p{
16  margin:0px;
17  background-Color:aqua;
18}

投稿2021/02/14 05:03

yambejp

総合スコア116661

sun-chan

2021/02/16 06:27

試してみたところ、きれいに横並びになりました！ display: flexを使っても再現できる事は知らなかったです。便利なので今後も使っていこうと思います。ご回答ありがとうございました。

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

ベストアンサー

textareaのdisplay: inline-block;を削除してみてはどうでしょうか？

投稿2021/02/14 04:55

tomomo

総合スコア430

sun-chan

2021/02/14 06:50

消してみたところ、うまくいきました！ありがとうございます。一つお聞きしたいのですが、どうしてdisplay: inline-blockを使うと、このようなズレが生じたのでしょうか？実は、これはYoutubeでのコーディング模写動画を参考にして作ってみたので、正直あまりinline-blockについてわかっていませんでした。どうか教えていただけないでしょうか。よろしければお願いします。

tomomo

2021/02/14 10:55

インライン要素とブロック要素を合わせもった要素の事らしいです。 https://www.ameamelog.com/display-inline-block/ 私はデザイナーではないので詳しくはないのですが、dateとtextearea（margin-leftとかも含む）の合計がtext-boxを超えるので改行されるのではと思います。単純に`display: inline-block`消してみれば？とは言ったものの、上のようなサイトの情報から察するに`inline-block`はそのままでも以下のいづれかでも改行はされないように思います。 - `.textarea`の`width`を短くにする（500pxとか） - `.text-box`にwidthを指定する（1200pxとか）

tomomo

2021/02/14 11:06

最近のブラウザにはデベロッパーツールが付いているので、表示させながら直接いろいろ弄ってみるのが理解しやすいかなと思います。（例えばChromeブラウザならWinはF12で,MacはCommand+Option+iで起動します。） https://blog.members.co.jp/article/38259 あとyambejpさんが解答されてるようなflexboxを使ったやり方の方が今時は読みやすいとも思います。

sun-chan

2021/02/16 06:31

合計がboxを超えたので自動的に改行されたと思うと、確かに納得がいきました。こういう要素は目に見えず分かりづらいので、おっしゃる通りデベロッパーツールを駆使していこうかと思います！ flexboxを使ったやり方をしたところ、上手くいきましたので、そちらも使っていこうかと思います。ご回答ありがとうございました。

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

あなたの回答