基本的なスタイルの適用方法

基本的なスタイルの適用方法

この記事では、HTML文書におけるテーブル、リスト、テキスト、およびマーカーに基本的なスタイルを適用する方法を紹介します。テーブルの見栄えやリストの階層構造、テキストのスタイリング、さらにはマーカーの色付けなど、各要素に対する具体的な例を通じて基本的なスタイリングの手法を理解できます。HTMLとCSSの基本的な連携も触れながら、文書を美しく装飾するための基礎知識を得ましょう。

目次:

テーブルスタイル

テーブルスタイル(figcaption)
テーブルスタイル ノーマル(caption)
th 入力例 td 入力例
th 入力例 td 入力例
th 入力例 td 入力例
th 入力例 td 入力例
th 入力例 td 入力例
フッタセル フッタセル
テーブルスタイル レスポンシブ(caption)
th 入力例 td 入力例
th 入力例 td 入力例
th 入力例 td 入力例
th 入力例 td 入力例
th 入力例 td 入力例

リストスタイル

UL リストスタイル

  • リスト項目A
  • リスト項目B
    • リスト項目B - 下層リスト1
      • リスト項目Bの下層リスト2
    • リスト項目B - 下層リスト1
    • リスト項目B - 下層リスト1
  • リスト項目C

OL リストスタイル

  1. リスト項目A
  2. リスト項目B
    1. リスト項目B - 下層リスト1
      1. リスト項目Bの下層リスト2
    2. リスト項目B - 下層リスト1
    3. リスト項目B - 下層リスト1
  3. リスト項目C

テキストスタイル

strong

em

del

ins

code

precode

注釈annotation

マーカースタイル

マーカースタイル黄色 MARKER YELLOW ALL

マーカースタイル黄色 marker yellow

マーカースタイルピンク MARKER PINK ALL

マーカースタイルピンク marker pink

マーカースタイル青 MARKER BLUE ALL

マーカースタイル青 marker blue


See the Pen Untitled by 5oji (@udagawa) on CodePen.

< 前の記事一覧へ次の記事 >

この記事へのコメント

お名前お名前
コメントコメントコメントコメントコメントコメントコメントコメント2024.08.21. 18:06
コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント2024.08.21. 18:13

コメントを送る

必須
必須 ※メールアドレスは公開されません
任意
必須
Loading...