この質問のコードの書き方を教えて下さい。

Question

住所　　 　　｜　〇〇市
電話番号　　 | 〇〇-〇〇-
営業時間 | 〇〇～〇〇

のような感じでhtmlcssで書きたいと思っているのですが、どのようにコードを書けばいいですか。
また、全くコードの書き方がわからない場合どのようにググればいいですか。

Comments

[K_3578]

＞全くコードの書き方がわからない場合
「html css 入門」とでも調べて基礎の基礎から学んだ方が宜しいかと

Answer 1

<pre>
住所　　 　  |　〇〇市
電話番号　　 |    〇〇-〇〇-
営業時間     |    〇〇～〇〇
</pre>

pre {
  font-family:monospace;
}

おまけ

想像以上にプラスが付いたので、真面目なのも追加。

<dl class="shop_info">
  <dt>住所</dt>
  <dd>〇〇市</dd>
  <dt>電話番号</dt>
  <dd>099-999-9999</dd>
  <dt>営業時間</dt>
  <dd>09:30 ～ 18:00</dd>
</dl>

* {
  box-sizing: border-box;
}

.shop_info {
  display: flex;
  flex-wrap: wrap;
}
.shop_info > dt,.shop_info > dd {
  padding: 5px;
  margin: 0 0 10px 0;  
}
.shop_info > dt {
  flex: 0 0 120px;
  padding: 5px;
  margin: 0 0 10px 0;
}
.shop_info > dd {
  flex: 0 0 calc(100% - 160px);
  border-left: 1px solid;
  padding-left: 40px;
}

CSS dl dt dd デザインサンプル

Comments

[m.ts10806]

大喜利でしたか…
PHPとかJavaで同種の回答したことあるなぁ。

[hatena19]

プラスありがとうございます(;^ω^)

Answer 2

htmlのtableタグを使いましょう。
googleで調べればいろいろなサンプルが出てきます。

Answer 3

tableタグかな？すまんわからんw

Comments

[K_3578]

回答になってないので低評価しています。

[退会済みユーザー]

ごめんなさい????

[K_3578]

@morisakisan
過去回答見ましたが回答になってない回答するんだったらそもそもしなくて良いと思いますが。
別に回答する事は強制されていませんし。

[退会済みユーザー]

アドバイスありがとうございます。今後の参考とさせて頂きます????????‍♀️

Answer 4

「HTML　表の作り方」でググるといっぱい出てきますね。

Comments

[退会済みユーザー]

これだと table タグばかりがヒットしません？
今回の表示したいとされている内容は、2次元データと呼ぶには若干難があるので、table タグを使用するにはあまり適当ではないかと。

[Lhankor_Mhy]

tableタグで問題ないと思いますが、理解できないわけでもないご意見ですので、低評価承ります。

[退会済みユーザー]

この流れだと私が低評価したっぽく見えますが、現状では仕様が不明瞭なので、低評価すべき回答だとは思ってません。ただ、言及しておく必要はあるかと思いコメントしました。
＊実は table タグを求めた質問である可能性も十分あると思っています。

低評価は私ではないので、低評価した人は個別に理由をコメントすべきだと思います。

[Lhankor_Mhy]

おお、そうでしたか。それは失礼しました。

Answer 5

イメージしたレイアウトに近いサイト(ページ)はありませんか？
そのページで、ブラウザの開発ツールを使用して、構造を調べるのが手っ取り早いです。

ブラウザによって、開発ツールの使用方法に多少くせがあるので、自身のブラウザの開発ツールの使用方法を調べてみてください。

Answer 6

ググる前に、「画面レイアウト」として見えるように清書されるのが先かと思います。

とりあえずExcelとか、位置関係が分かりやすいものでも良いですし、PowerPointみたいに若干お絵かきでも良いので。

完全まったく分からない、一文字も書けない
と言うのでしたら入門書（html5対応のもの）を一通り通すことをおすすめします。
ググって持ってきたコードだけで作り込んだとして、理解してないままコピペしても自分がやりたいことはできませんから。