ミギムキ

[CSS] ステップ図をペイントツールや画像を使わずに描きたい(その2)

やりたいこと

サンプルコード

html

<ol class="step"> <li><span>幼年期</span></li> <li><span>成長期</span></li> <li><span>成熟期</span></li> <li><span>完全体</span></li> </ol>
スポンサー広告

CSS

@media screen and (max-width: 767px) { .step { list-style: none; } .step > li { position: relative; padding: 1em; margin: 0px; font-size: 18px; font-weight: bold; text-align: center; } .step > li:first-child { padding-top: 0px; } .step > li:last-child { padding-bottom: 0px; } .step > li:nth-child(n + 2):before { position: absolute; top: 0px; left: 50%; transform: translateX(-50%) translateY(-50%); font-family: FontAwesome; content: "\f107"; } .step > li > span { display: block; padding: 1em; margin: 0px auto; border: 1px solid #f5f2e3; background-color: #f5f2e3; } } @media print, (min-width: 768px) { .step { display: flex; justify-content: center; align-items: center; list-style: none; } .step > li { position: relative; margin: 0px; width: 25%; font-size: 1.25vw; font-weight: bold; text-align: center; } .step > li:nth-child(n + 2):before { position: absolute; top: 50%; left: 0px; transform: translateX(-50%) translateY(-50%); font-family: FontAwesome; content: "\f105"; } .step > li > span { display: block; padding: 1em; margin: 0px auto; width: 80%; height: 100%; border: 1px solid #f5f2e3; background-color: #f5f2e3; } }

仕組み、解説、補足など

  • liタグのwidthを変えて、表示するブロックを調整します。
  • 「100 / ブロック数 %」で指定すれば、間の矢印はよしなに真ん中へ配置されます