【画像は必要ナシ！】年表コンテンツの見た目をCSSだけで作成する方法

2020年4月27日2021年8月17日

Webデザイナーやクリエイターを目指している方の中には、自分のポートフォリオサイトがあり、そこに自分のプロフィールを掲載しているという方も多いのではないでしょうか。

淡々とテキストを並べて作成するのもいいですが、せっかくなので、自分のこれまでの経歴を、年表形式で表してみるのはいかがでしょうか。

CSSでカンタンに作成できる

今回作成しようとしている年表ページの見た目は、こんな感じのものです。

See the Pen
zYvwabm by TAKASHI (@takashi1107)
on CodePen.

左の列に年月、右に詳細。そしてその間に縦線が伸びていてポイントがあるたびに緑色の●が表示されています。

今回作るページの場合、右の詳細部分のテキスト量が変化しても、緑色の●の位置が崩れることはありません。

そのため、項目や内容の追加や変更に強い作りとなっています。

まずは骨子のHTMLを用意

<h1>年表</h1>
<dl>
	<dt>1990年11月</dt>
	<dd>
		<h2>日本に生まれる</h2>
		<p>詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。</p>
	</dd>
	<dt>1996年4月</dt>
	<dd>
		<h2>小学校に入学</h2>
		<p>詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。</p>
	</dd>
	<dt>2002年4月</dt>
	<dd>
		<h2>中学校に入学</h2>
		<p>詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。</p>
	</dd>
	<dt>2005年4月</dt>
	<dd>
		<h2>高校に入学</h2>
		<p>詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。</p>
	</dd><dt>2008年4月</dt>
	<dd>
		<h2>大学に入学</h2>
		<p>詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。詳細な文章が入ります。</p>
	</dd>
</dl>

今回は、年月と詳細のセットをdtとddタグのセットで表します。

ddタグの中には、見出しを表すh2タグと、詳細文章を掲載するpタグで構成されています。

dtとddを横並びにする

dl {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

今回は、dtタグとddタグを横並びにするのに、その親要素であるdlタグにdisplay: flexを適用し、横並びを実現しています。

dtとddの横幅を指定

dl dt {
	text-align: right;
	width: 8.5em;
	padding: 0.5em 1.0em 0.5em 0.5em;
	position: relative;
}

dl dd {
	width: calc(100% - 8.5em);
	padding: 0.5em 2.0em 3.0em;
	border-left: 2px solid #ccc;
}

年月が入るdtタグと、詳細が入るddタグの幅をそれぞれ指定します。

ここでポイントになるのがdtの幅を8.5emと固定しているのに対し、ddの幅は「calc」という計算式で幅を出す方法を取っています。

これには理由があり、レスポンシブ対応をするため、dtの幅は8.5emで固定ですが、ddの幅は、ブラウザの横幅100%から、dtの8.5em分の幅を引いた残りとするようにしています。
そうすることで、どんな横幅のブラウザや端末になっても、崩れること無く表示されるようにしています。

dtの疑似要素として●を追加

dl dt::after {
	content: '●';
	position: absolute;
	right: -0.55em;
	top: 5px;
	font-size: 22px;
	color: green;
}

最後に、年月の右についている●ですが、HTML要素としては記述していません。

HTMLに●を直接記述しても実現可能だと思いますが、今回はCSSの::after疑似要素で実現しています。

年月が入っているdtタグの::after要素として「●」を追加し、親要素であるdtに対して絶対配置「absolute」で配置しています。

あとは、colorなどで色を変更すればOKです。

完成！

See the Pen
zYvwabm by TAKASHI (@takashi1107)
on CodePen.

これで、年表の見た目が完成です。

細かい感覚や色、文字サイズなどはお好みに合わせて調整してください。

まとめ

今回は、ポートフォリオサイトで使える年表の見た目をCSSで実現する方法をご紹介しました。

Webサイトの表現を実現する方法は、一つではありません。
今回紹介した方法以外にも、もっとたくさんのやり方があると思います。

参考サイトを見て、まずは真似してみて、そこから自分独自のもっと簡単な方法や工夫した方法を編み出していけると、自分のスキルもアップしていくと思いますよ。