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

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

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

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

HTML5

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

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

Q&A

解決済

2回答

1127閲覧

横並びのhtmlCSSのデザイン方法を揃える方法を教えてください

liar.ryu

総合スコア12

CSS3

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

HTML5

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

デザイン

プログラミングでのデザインとは、プログラムの構成や、使用の信頼性・持続性・正確性・利便性の目標達成にはどうするのがベストなのか特定の選択を行うことです。

0グッド

0クリップ

投稿2020/01/14 02:09

編集2020/01/14 08:45

html

1コード 2 3 4<div class="cloumn"> 5 <h2>お知らせ</h2> 6 <p>2019年1月1日</p> <span class="category news">NEWS</span> <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスキストテキストテキスト</p> 7 <hr> 8 <p>2019年1月1日</p> <span class="category product">PRODUCT</span> <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 9 <hr> 10 <p>2019年1月1日</p> <span class="category news">NEWS</span> <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 11 <hr> 12 <p>2019年1月1日</p> <span class="category product">PRPDUCT</span><p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 13 <hr> 14 <div class="flex"> 15 <div class="box"></div> 16 <div> 17 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 18 </div> 19 </div> 20 </div! ```html 21 22CSS 23 24```CSS 25 26```CSS 27 .cloumn h2 { 28 border-bottom: rgb(117, 68, 172) 3px solid; 29 padding-bottom: 15px; 30} 31 .cloumn p { 32 display: inline; 33} 34 .category { 35 color: white; 36 padding: 2px 5px; 37 display: inline-block; 38} 39 .news { 40 background-color: rgb(37, 77, 104); 41 } 42 .product { 43 background-color: rgb(201, 103, 16); 44 } 45 .text { 46 text-decoration: underline; 47 } 48 .flex { 49 display: flex; 50 } 51
```![イメージ説明]  画像の赤枠の部分を作りたいのですが うまく横並びにできませんinline-blockやflexboxを試したのですができなかったので方法を教えていただきたいです ![![イメージ説明]![イメージ説明] ![イメー  現在こうなってしまっています ここでpタグ(テキスト)を揃える方法を教えてください

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

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

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

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

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

m.ts10806

2020/01/14 02:15

コードブロックをわけたい場合は冒頭と末尾は改行いれてください。 ※PCからであれば投稿前にプレビュー確認して調整してください
liar.ryu

2020/01/14 02:16

すみません すぐ直します
m.ts10806

2020/01/14 02:37

あと細かいところで申し訳ないですが「Flex」はCSSにおけるflexとは別物なので外した方が良さそうです。 https://teratail.com/tags/Flex
liar.ryu

2020/01/14 02:39

修正しました、ご指摘ありがとうございます
s8_chu

2020/01/14 08:46

間違い箇所ではなく、画像が消えていませんか?
guest

回答2

0

どこの何を横並びにするとどう問題があるの読み取れませんが
「.category」にwidthを指定するところからですかね

投稿2020/01/14 02:29

yambejp

総合スコア114585

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

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

liar.ryu

2020/01/14 02:37

説明不足ですみません、画像を追加したのでまたご教授いただけると幸いです
yambejp

2020/01/14 02:42 編集

テキスト部分のあたまを揃えるということですか? (一部スペースでインデントしていますが、それも調整してよい?)
liar.ryu

2020/01/14 02:43

そうです、その方法がわからなくて
guest

0

ベストアンサー

HTMLから書き換えたほうがシンプルになりますので、そのほうがいいでしょう。

日付、カテゴリー、テキスト で一つのグループになりまので、それをdivで囲みましょう。このdivには、クラス属性class="flex"をつけておきましょう。

あと、日付、カテゴリー、テキスト にそれぞれクラス属性をつけて区別がつくようにしましょう。日付に class="date"を付けます。カテゴリ、テキストはすでにクラス属性はついているのでOKです。
あとカテゴリのみ<span>になってますが、<p>に統一しましょう。

このようにしておくとFlexboxで横並びにしやくなります。

html

1<div class="cloumn"> 2 <h2>お知らせ</h2> 3 <div class="flex"> 4 <p class="date">2019年1月1日</p> 5 <p class="category news">NEWS</p> 6 <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスキストテキストテキスト</p> 7 </div> 8 <hr> 9 <div class="flex"> 10 <p class="date">2019年1月1日</p> 11 <p class="category product">PRODUCT</p> 12 <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 13 </div> 14 <hr> 15 <div class="flex"> 16 <p class="date">2019年1月1日</p> 17 <p class="category news">NEWS</p> 18 <p class="text"> 19 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 20 </div class="flex"> 21 <hr> 22 <div class="flex"> 23 <p class="date">2019年1月1日</p> 24 <p class="category product">PRPDUCT</p> 25 <p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 26 </div> 27 <hr> 28 <div class="flex"> 29 <div class="box"></div> 30 <div> 31 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 32 </p> 33 </div> 34 </div> 35</div>

CSSは、class="flex"display: flex;を設定して、日付、カテゴリーにflexで適切な幅を設定すればきれいにそろいます。

css

1.cloumn h2 { 2 width: 100%; 3 border-bottom: rgb(117, 68, 172) 3px solid; 4 padding-bottom: 15px; 5} 6.cloumn .date { 7 flex: 0 0 130px; 8} 9.category { 10 flex: 0 0 80px; 11 color: white; 12 padding: 2px 5px; 13 align-self: baseline; 14} 15.news { 16 background-color: rgb(37, 77, 104); 17} 18.product { 19 background-color: rgb(201, 103, 16); 20} 21.text { 22 margin-left: 20px; 23 text-decoration: underline; 24} 25.flex { 26 display: flex; 27} 28.box { 29 flex: 0 0 220px; 30 margin-right: 20px; 31 background-color: #784db1; 32} 33hr { 34 width: 100%; 35}

動作確認用Codepen

投稿2020/01/14 06:02

編集2020/01/14 06:06
hatena19

総合スコア33620

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

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

liar.ryu

2020/01/14 06:04

ありがとうございます、自分のはコードがぐちゃぐちゃなのでhatena19さんのようにきれいにまとめられるように尽力します!ほんとうにありがとうございます。とても困ってました
liar.ryu

2020/01/14 06:59

重ねて質問させてくださいカテゴリーにもflexを指定してみたのですが背景が伸びてしまって困っていますどのように対応したらいいかご教授ください
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問