css＠疑似要素によるタイムライン風デザイン対応

2021.09.15 TECH: css＠疑似要素によるタイムライン風デザイン対応

前置き

パッと見、どう組んでいるのか想像しづらいデザイン・動きなどを見ると、すぐにhtmlソースを覗き、さらにデベロッパー・ツールを起動するクセがある nanba です。
マークアップに携わっている方なら、ある意味、上記はパブロフの犬的な行動かと思います。
私の場合は『条件反射』の域を超えて『シンプルソースヲタク』な域まで逝っており、ソースコードなどが信じられないくらい美しかったりするサイトに巡り合うと、かなりテンション上がります。
コンビニなどの支払い時に、財布の中の小銭がスッカリきれいに無くなった時と同じ上がり方です。

特にhtmlのタグ構造がシンプルで、文章構造を重視しているソースに出会うと少し嬉しくなります。

実際の検証画面

昔々弊社リクルーティングサイトにて、スタッフ紹介コンテンツの『ある日のスケジュール』をタイムライン的に表示させている、罫線を多く使用したレイアウトです。
肝になるのは、タイムラインっぽく見せている罫線表示(文章量依存)・偶数奇数行で左右を切り分ける横並びレイアウトあたりでしょうか。
私が実際に構築するにあたって、最初に考えたのは【文章構造の正当性・html修正の容易さ】です。
文章構造の正当性を考えるのは当然ではありますが、ここでシッカリ考えておくことでレスポンシブする際に楽になります。
ちなみに多くの場合、レスポンシブサイトを構築する際は、基本的にはまずスマホ画面レイアウトを考えてからhtmlソースを書かないと、後々痛い目にあいます。
理由はPCレイアウトと違って好き勝手に配置・大きさ指定などできないことが多いからです。

※無理をすれば出来ないことはないですが…

実際のhtmlソース

<dl>
  <dt>ある日のスケジュール</dt>
  <dd>
    <ol>
      <li><dl>
        <dt>9:00</dt>
        <dd><dl>
          <dt>出社</dt>
          <dd>フレックスタイムを導入しているので、10時までに出社すればいいのですが、私のモットーは早く来て早く帰る！今日やる作業などをまとめる時間として使っています。</dd>
        </dl></dd>
      </dl></li>
    </ol>
  </dd>
</dl>

このソースなら、何も考えなくても直感的に修正箇所が分かりますよね。

時間の変更(サンプル6行目)
項目名の変更(サンプル8行目)
詳細情報の修正(サンプル9行目)
項目自体の追加・削除(サンプル5～11行目)

少なくとも上記のような初期構築時に、よくある修正依頼には強いですね。
class付与を考えることもなく、タグ構造を理解することなく、誰でもチャチャっと変更できると思います。
実際当時は公開前に何度も何度も何度も何度も何度も何度も修正・変更を繰り返しました^^;

実際のcss

文章構造をシンプルにするために、cssは見ての通りかなり冗長ですｗ

罫線部分の htmlタグは基本的に疑似要素を使用
罫線自体は、背景画像や border ではなく background-color を使用
背景画像を使用しない理由は、以後の汎用性を考慮したため(罫線色変更・レイアウト変更が面倒)
border を使用しない理由は、ブラウザ解釈による 1pxズレなどを回避するため

※こうゆう 1px のズレも許されないレイアウトの場合は border 使うとモヤモヤします

恒例のオマケ

ピクトグラムを使用したタイムライン表示例

ピクトグラムがあるだけで、グッと分かりやすくなりますよね。
ちなみにこのピクトグラムは Material+Icons を使用しています。
個人的には、それっぽいのを探すのが異常なほど苦手デス＞＜

疑似要素による罫線を多用したナニカ・・・

まぁ、どこにでもいる…よく見かける未来から来た猫型ロボットです…
ちなみに、この猫型ロボットの重さ(体重？)は 129.3kg あります…
この猫型ロボットと一緒に住んでいる某いじめられっ子は、軽々と『おんぶ』したりします…純粋に力持ちですね。
いつもの悪ふざけです…見なかったことにしてください。。。