【完全ガイド】CSS `<time>`要素と`Miscellaneous`プロパティ：詳細な解説とサンプルコード
<time>要素は、HTML5で導入された要素で、日付と時刻を表すために使用されます。<time>要素には、datetime属性を使用して、日付と時刻を指定します。
"Miscellaneous"プロパティ
CSSには、<time>要素の外観を制御するためのいくつかのプロパティが用意されています。これらのプロパティは、"Miscellaneous"プロパティと呼ばれています。
"Miscellaneous"プロパティには、以下のものがあります。
margin:<time>要素の余白を設定します。padding:<time>要素の余白を設定します。border:<time>要素の境界線を設定します。background-color:<time>要素の背景色を設定します。color:<time>要素の文字色を設定します。font-weight:<time>要素のフォントウェイトを設定します。font-style:<time>要素のフォントスタイルを設定します。font-size:<time>要素のフォントサイズを設定します。
例
以下の例では、<time>要素のフォントサイズを16px、フォントスタイルをイタリック、フォントウェイトを太字、文字色を赤色、背景色を青色に設定しています。
time {
font-size: 16px;
font-style: italic;
font-weight: bold;
color: red;
background-color: blue;
}
<time>要素は、日付と時刻を表現するために使用されますが、時間経過を示すために使用することはできません。時間経過を示すためには、JavaScriptなどのスクリプトを使用する必要があります。<time>要素は、スクリーンリーダーなどの補助技術で使用されることが多いため、視覚的に目立たせる必要はありません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS `<time>`要素の例</title>
<style>
time {
font-size: 24px;
font-style: italic;
font-weight: bold;
color: red;
background-color: blue;
padding: 5px 10px;
border: 1px solid black;
border-radius: 5px;
}
</style>
</head>
<body>
<p>現在時刻は <time datetime="2024-06-19T00:25:00+09:00">2024-06-19 00:25 (JST)</time> です。</p>
</body>
</html>
このコードを実行すると、以下のようになります。
説明
このコードでは、以下のCSSプロパティを使用して<time>要素の外観を制御しています。
border-radius: 境界線の角を5pxに丸めます。border: 境界線を1pxの黒色で設定します。padding: 余白を5px 10pxに設定します。background-color: 背景色を青色に設定します。color: 文字色を赤色に設定します。font-weight: フォントウェイトを太字に設定します。font-style: フォントスタイルをイタリックに設定します。font-size: フォントサイズを24pxに設定します。
バリエーション
このコードをベースに、さまざまなバリエーションを作成することができます。例えば、以下のことができます。
- 影を追加する
- 配置を変更する (例：左揃え、中央揃え、右揃え)
- テキスト装飾を変更する (例：下線、上線)
- フォントファミリーを変更する
<time>要素を使用できない場合
- JavaScriptを使用して日付と時刻を動的に表示する必要がある場合
<time>要素のスタイリングが難しい場合- 古いブラウザを使用している場合
<time>要素の代替方法
<time>要素を使用できない場合は、以下の方法で日付と時刻を表現することができます。
<span>要素とdatetime属性
<span>要素にdatetime属性を追加して、日付と時刻を指定することができます。この方法は、<time>要素とほぼ同じように機能しますが、CSSでスタイリングする際に注意する必要があります。
<span datetime="2024-06-19T00:25:00+09:00">2024-06-19 00:25 (JST)</span>
- プレーンテキスト
日付と時刻をプレーンテキストで表示することもできます。この方法は、最もシンプルですが、検索エンジンでインデックスされにくくなる可能性があります。
2024-06-19 00:25 (JST)
- JavaScript
JavaScriptを使用して、日付と時刻を動的に表示することができます。この方法は、最も柔軟性がありますが、複雑さも高くなります。
<script>
const timeElement = document.getElementById('time');
const now = new Date();
const formattedTime = now.toLocaleString();
timeElement.textContent = formattedTime;
</script>
<p>現在時刻は <span id="time"></span> です。</p>
どの代替方法を選択すべきか
どの代替方法を選択するかは、状況によって異なります。
- 動的に日付と時刻を更新する必要がある場合は、JavaScriptがおすすめです。
- CSSでスタイリングしやすい方法が必要な場合は、
<span>要素とdatetime属性がおすすめです。 - シンプルで検索エンジンにインデックスしやすい方法が必要な場合は、プレーンテキストがおすすめです。