htmlについて教えてください。 初心者です。 画像(アイコン)とその下にテキスト(数文字)を1セッ

htmlについて教えてください。
初心者です。

画像(アイコン)とその下にテキスト(数文字)を1セットとして、4セットを横並びに整列させたいです。
通常であればtableを使用するのですが、アイコンと文字の背景色を横の帯状に入れたいためにうまくいきません。
(横には背景に余白を入れたくない)


O…オブジェクト
T…テキスト
_____________________________
O1 O2 O3 O4
T1 T2 T3 T4
_____________________________
これをページ最上部に置き、上記線の間を背景で塗りたいです。
オブジェクト、テキスト共に線で囲む予定はありません。

詳しい方、宜しくお願いします。

質問者からの補足コメント

• 使用している環境の制限で1ファイルで完結する必要があります。
  
  cssを使用すればできるかも？とは思っているのですが、cssをhtml内に入れ込んで作るとなると、どういった形になるのかがわかりません。
  また、cssでどういった機能を使用すればいいのかもわかりません。
  詳しく説明していただけると助かります。

    補足日時：2017/11/07 22:53

No.3 ベストアンサー 回答者： fujillin 回答日時： 2017/11/08 09:46

こんにちは

htmlはご質問文にある通りの構成でマークアップなさればよろしいと思います。
他の方の回答にもありますように、表示の際のレイアウトはCSSで行うようにすればよろしいでしょう。

方法はいろいろありますが・・・

各セットの要素を横並びにする方法
https://www.halawata.net/2011/10/css-float-displ …

最近のブラウザ対象で良ければ、flexが簡単だと思います
https://ics.media/entry/13117

各セットの中のレイアウトの考え方の一例として
http://cc.musabi.ac.jp/kenkyu/cl1/html5/css_lay0 …


※ 「CSS 横並び」など、適当なキーワードで検索すれば、解説サイトがたくさんみつかるはずです。

この回答へのお礼

有難うございます。

頂いたページを参考に作成したみたいと思います。

お礼日時：2017/11/08 15:29

No.2 回答者： sainte 回答日時： 2017/11/08 07:17

CSSの内容をstyle属性に書けばhtmlに書けます。

HTMLは以前から見た目と内容が分離できていなくて問題になっていました。
HTMLのみで見た目も扱おうとするのは早めにやめたほうがいいです

No.1 回答者： sainte 回答日時： 2017/11/07 21:02

CSSをつかうといいです