Q&A
方法はいくつもありますが、デザインやタグ構成での条件はどうなのでしょうか？日付とテキストのブロックは別にするのか？２段にした場合の日付位置は上側か下側か？などです。
前提・実現したいこと
お知らせ
2018.11.1 テキストテキスト（2段）
2018.11.2 テキストテキスト（2段）
この形を作りたいのですが、どうしてもテキストの部分だけが作れません。
試したこと
<p>2018.11.1 テキストテキストテキストテキスト</p> →二段目が作れない <p>2011.11.1</p> <div class></> <p> →ボーダーの下にテキストが入ってしまう5時間自分で調べて考えてわかりませんでした。どなたか教えて頂けませんでしょうか？
こちら画像を見てローカル環境で作成練習をするもので、とりあえず一旦はあの形が三つ作れれば完成です。そもそもどういうタグやブロックを使って作るのかから分かっておりませんでした。日付位置は二段のテキストの丁度真ん中の位置にありました。分かりにくい書き方をしてお時間頂き申し訳ありません…。目を通して頂きありがとうございます！！！
回答2件
0
<div class></>
→書き方間違ってますよ。下記のようにしてみて下さい。
<div> <p>2018.11.2 テキストテキスト（2段）</p> </div>
質問に対する回答のソースをそのまま載せるのはよくないので、似た雰囲気のソース書いてみました。参考にして下さい。
<!DOCTYPE html> <html> <head></head> <body> <div class="content"> <div> <h1>お知らせ</h1> <div class="confirm"> <div> <p>2018.11.1</p> </div> <div class="confirm-text"> <p>テキストA</p> <p>テキストB</p> </div> </div> <div class="confirm"> <div> <p>2018.11.1</p> </div> <div class="confirm-text"> <p>テキストA</p> <p>テキストB</p> </div> </div> </div> </div> </body> </html> <style> h1{ font-size:20px; margin:0; } .confirm{ display:flex; ←レイアウトでよく出てくるので調べてみて下さい。これでdiv要素を並べました。 margin:0; padding-top:5px; padding-bottom:5px; border-bottom:solid 1px #eee; text-align:center; } .confirm-text{ padding-left:30px; } </style>
投稿2018/11/04 10:06
編集2018/11/05 16:33
総合スコア361
ご回答頂きありがとうございます。
2018.11.1 テキストテキスト
テキストテキスト
-----border-----------------------------
このタイプが作りたく…
テキストの二段が上手く表示されなかったため、（）で2段と書いてしまい分かりづらくて申し訳ありません。
<p>2018.11.1</p>
<div class="text-content">テキストテキストテキスト</div>
<p> 略
で作りました。
</div>を面倒で書かずに投稿してしまい申し訳ありません。
ご回答ありがとうございました。
pタグとdivの意味がわかっていないからそう書いてるんだと思います。divの中に二つのpタグを入れてみて下さい。
なるほど…！目から鱗ですm(_ _)m
本当にありがとうございます…！
分かりにくい質問でしたのに回答頂き本当に嬉しいです。頑張ります！
rarara 様
上手く‥行きました（感涙）
100回失敗してもこうやって皆様のおかげで知恵を頂き、自分で実践し成功するこの一回がとてつもなく嬉しく次頑張れる気がします…！！！
分かりづらい質問でしたのに、汲み取って頂けたのみならず時間を割いてまで丁寧な回答を頂き心より感謝しております！！！！！！
わたしももっと出来るようになったら是非皆様に還元できるよう今後とも精進致します！！！！
rarara様本当にありがとうございました！！！！！！！！！
0
ベストアンサー
いっそのことtableで作ってしまえば良いのでは
投稿2018/11/04 09:55
総合スコア80850
ありがとうございます！！！tableなるものがあるんですね！早速調べて試してみます！！
いやプラグインとかではなくtableタグのことですが
すみません、tableタグも知らない初心者でした！m(_ _)m tableタグで調べられました！ご回答頂き本当にありがとうございました…！
あ、そうなんですか。
タグにcssもつけられているのでどこまで把握されているのかわからない状態でした。
ULタグの方が「リスト」とするのでしたら正しくはなるのですが、提示の形にするにはdivでも結構CSSをこねくりまわさなきゃいけないかなと。
いずれにしてもhtmlだけでは無理なので、htmlタグのそれぞれの意味と特性をきちんと理解された上で利用すると良いです。
そういった意味ではteratailなどの一覧ページはいい参考になるかもしれませんね。
ブラウザの「開発ツール」から組み方とか適用されているCSSとか確認できるので、適宜参考にしてください
作れない事しか自身が分かっていない…という状況でございました！
大変失礼致しました。
HTMLのタグ全てまだ使いこなせておらず、まずは仰るようにしっかり意味を理解していきたいと思います。
大変助けられました。調べようにも調べ方も下手くそで万策尽きて心折れかけていました！teratail、開発ツール是非参考にさせて頂きます。
次はもっと質問を上手に皆様のお時間お取りしないようにわかりやすくします。
この度は丁寧な回答を頂きまして、本当にありがとうございます…！！！！
低評価つけられた方
何かしら思うところがあるのでしょうから理由をコメントください。
私としては今回の構造を"容易に"実現できるのはtableであると判断しての回答です。
非推奨、削除された などであれば納得できますが、単に「ダサいよね」「時代を逆行してるよね」というだけの理由であれば、それは違うと思いますよ。
質問者さん
自身ではあまり丁寧とは思っていませんが、解決につながったようで何よりです。
もう少し簡単なレイアウトの組み方から学んでいった方がいいかもしれませんね。
駆使すれば何でもできないことはないですが、適材適所があるので。
あなたの回答
tips
プレビュー
