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

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

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

目次:

テーブルスタイル

テーブルスタイル（figcaption）
テーブルスタイル ノーマル（caption）
th 入力例 th 入力例
th 入力例 td 入力例
th 入力例 td 入力例
th 入力例 td 入力例
th 入力例 td 入力例
フッタセル フッタセル
テーブルスタイル レスポンシブ（caption）
th 入力例 th 入力例
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
Prism.jsでシンタックスハイライト

注釈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.

HTML , デザイン , マークアップ , CSSスタイリング , テーブルスタイル , リストスタイル , テキストスタイル , マーカースタイル
< 前の記事一覧へ次の記事 >

関連記事

この記事へのコメント

コメントはまだありません。

コメントを送る

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