JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSのcaption-sideプロパティの使い方を徹底解説

caption-sideプロパティとは

CSSのcaption-sideプロパティは、テーブル（表）に付ける<caption>要素（キャプション）を、テーブルのどの位置に表示するかを指定するためのプロパティです。表のタイトルや説明文を見やすく配置したいときに活用できます。

指定できる値

caption-sideプロパティには、主に以下の4つの値を指定できます。

  • top … キャプションをテーブルの上部に配置します（初期値）
  • bottom … キャプションをテーブルの下部に配置します
  • left … キャプションをテーブルの左側に配置します
  • right … キャプションをテーブルの右側に配置します

なお、leftとrightの値はブラウザによってサポート状況が異なるため、実務ではtopとbottomを使用するのが一般的です。

使用例

それでは、実際にcaption-sideプロパティを使ったサンプルコードを見てみましょう。次の例では、1つ目のテーブルのキャプションを上部（top）に、2つ目のテーブルのキャプションを下部（bottom）に表示しています。

<html>
   <head>
      <style>
         caption.top {
            caption-side:top
         }
         caption.bottom {
            caption-side:bottom
         }
      </style>
   </head>
   <body>
      <table style = "width:500px; border:3px solid gray;">
         <caption class = "top">
            Countries (Top Caption)
         </caption>
         <tr><td> India</td></tr>
         <tr><td> UK</td></tr>
         <tr><td> US</td></tr>
         <tr><td> Australia</td></tr>
      </table>
      <br />
      <table style = "width:500px; border:3px solid blue;">
         <caption class = "bottom">
            Countries (Bottom caption)
         </caption>
         <tr><td> India</td></tr>
         <tr><td> UK</td></tr>
         <tr><td> US</td></tr>
         <tr><td> Australia</td></tr>
      </table>
      <br />
   </body>
</html>

コードのポイント

このサンプルでは、CSS側でcaption.topクラスにcaption-side:topを、caption.bottomクラスにcaption-side:bottomをそれぞれ定義しています。HTML側では<caption>要素に対応するクラスを付与するだけで、キャプションの表示位置を簡単に切り替えられます。

このように、caption-sideプロパティを使えば、CSSを少し書き加えるだけでテーブルキャプションの位置を柔軟に制御できます。表組みのデザインを整える際に、ぜひ活用してみてください。

  1. CSSのlist-style-typeプロパティでリストの行頭記号を自由に変更する方法

    CSSのlist-style-typeプロパティを使用すると、リスト項目の先頭に表示されるマーカー(行頭記号)の形状や見た目を自由にコントロールできます。デフォルトの黒丸(disc)だけでなく、白丸や四角、数字、アルファベットなど、さまざまなスタイルを指定できるのが特徴です。 list-style-typeの主な値 disc:黒丸(初期値) circle:白丸(中抜きの丸) square:塗りつぶしの四角形 decimal:算用数字(1、2、3...) lower-alpha:小文字アルファベット(a、b、c...) upper-alpha:大文字アルファベット(A、B、C...) none

  2. CSSのlist-style-imageプロパティの使い方｜箇条書きのマーカーを画像に変更する方法

    list-style-imageプロパティとはCSSのlist-style-imageプロパティを使うと、箇条書き（リスト）のマーカーとして、通常の黒丸（ビュレット）や数字の代わりに任意の画像を指定できます。オリジナルのアイコンや矢印画像などをリストの先頭に表示したい場合に便利なプロパティです。値にはurl()関数で画像ファイルのパスを指定します。指定できるのは<ul>や<ol>、<li>などdisplay: list-itemが適用される要素です。基本的な書式list-style-image: url(画像のパス);使用例以下のコードでは、最初のリスト項目