日付・時刻

日付・時刻インラインテキスト

日付・時刻インラインテキストのコンポーネントにはsu-datetime-inlineのクラス名を付与します。

time要素を用いてマークアップします。上記クラス名を付与することでスタイルが適用されます。文字のスタイルや色が加わります。合わせてdatetime属性に日付型の値を指定することで、検索エンジンが可読できるようにします。

日付や時刻として表示するテキストです。本文テキストとは異なるコードであることが明示できるようスタイリングされます。デフォルトではインラインで表示されます。

<time 
  class="su-datetime-inline"
  datetime="2024-12-31 15:30:50.000+09:00" 
  aria-label="December 31, 2024, 3:30:50 PM"
>2024年12月31日 午後3時30分50秒</time>

日付・時刻インラインテキストの文字色はCSS変数を使って変更することが可能です。

.su-datetime-inline {
  --su-color-text-datetime: red;
}

アイコンの表示

日付・時刻インラインテキストのコンポーネントはsu-datetime-add-icon-[ICON_TYPE]クラスを追加することで、テキストの前に対応したアイコンを表示させることができます。アイコンタイプはdate、timeのいずれかをサフィックスとすることでアイコンタイプに対応したアイコンが表示されます。

アイコンが表示されることで、日付や時刻の意味を持ったテキストであることをより明確に伝えることができます。

<!-- アイコンタイプ date -->
<time 
  class="su-datetime-inline su-datetime-add-icon-date" 
  datetime="2024-12-31" 
  aria-label="December 31, 2024"
>2024年12月31日</time>

<!-- アイコンタイプ time -->
<time 
  class="su-datetime-inline su-datetime-add-icon-time" 
  datetime="15:30:50.000+09:00" 
  aria-label="3:30:50 PM"
>午後3時30分50秒</time>

アイコンの色は日付・時刻インラインテキストの文字色同様にCSS変数を使って変更することが可能です。

.su-datetime-inline {
  --su-color-icon-datetime: blue;
}

アクセシビリティの支援

日付・時刻インラインテキストはアクセシビリティの対応として、time要素に対してaria-label属性を使って、表示されている日付や時刻がローカライズされている場合でも、スクリーンリーダーがISO形式や標準的な読み上げに対応するようにします。また、datetime属性値にタイムゾーン情報を追加することで、より正確な日時を伝えることができます。

<!-- Asia/Tokyo（日本標準時）のタイムオフセットでの日時指定 -->
<time 
  class="su-datetime-inline"
  datetime="2024-12-31 15:30:50.000+09:00" 
  aria-label="December 31, 2024, 3:30:50 PM"
>日本時間 2024年12月31日 午後3時30分50秒</time>