[css]ワークフロー図をcssだけで作ってみよう

ホームページにて、手順を説明する際に、手順１、手順２などを表記する必要が出てくるかと思います。ただワークフロー図をどうやって作っていいかわからないといったお悩みがある方が少なからずいらっしゃるかと思います。

そこで、今回は、簡単なワークフロー図を作ってみようと思います。

内容としては、STEP1の内容が表示されて下に矢印でSTEP2の内容が表示されているといったシンプルなものにします。では作っていきましょう。

ワークフロー図をhtmlとcssで作ってみよう

ワークフロー図をHTMLとCSSを駆使して作ってみようと思います。

作るものとしては、ステップの数が左側にあって、その内容が右側にあるようなものを目指します。
つくるポイントとしては、まず横並びのコンテンツは高さを合わせなければならないということと、縦方向への中央寄せを行うので、display:flexを使うことで、実現していこうと思います。

<style>
 .s_work_flow .s_work_flow_step{
   display:flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-wrap:wrap;
   margin-bottom:50px;
 }
 .s_work_flow .s_work_flow_step .s_work_flow_number{
   width:20%;
   font-size:32px;
   background:#000;
   color:#fff;
   display: flex;
    display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
   align-items: center;
   justify-content: center;
 }
 .s_work_flow .s_work_flow_step .s_work_flow_content{
    width:80%;
    padding:50px;
    border:1px solid #ccc;
    display: flex;
     display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
 }
 .s_work_flow .s_work_flow_step:not(:last-child){
    position:relative;
    margin-bottom:100px;
 }
 .s_work_flow .s_work_flow_step:not(:last-child):before{
   position: absolute;
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    box-sizing: border-box;
    border-style: solid;
    border-width: 25px 25px 0px 25px;
    bottom: -63px;
    left: 50%;
    margin-left: -25px;
    border-color: #000 transparent transparent transparent;
 }
</style>
<div class="s_work_flow">
 <div class="s_work_flow_step">
   <div class="s_work_flow_number">01</div>
   <div class="s_work_flow_content">
    <div>
     <p>ステップ１のフローの内容になります。</p>
     <p>cssでワークフロー図を作って見ます。</p>
    </div>
   </div>
 </div>
  <div class="s_work_flow_step">
   <div class="s_work_flow_number">02</div>
   <div class="s_work_flow_content">
    <div>
<p>ステップ2のフローの内容になります。</p>
    <p>cssでワークフロー図を作って見ます。</p>
</div>
   </div>
 </div>
<div class="s_work_flow_step">
   <div class="s_work_flow_number">03</div>
   <div class="s_work_flow_content">
    <div>
<p>ステップ3のフローの内容になります。</p>
    <p>cssでワークフロー図を作って見ます。</p>
</div>
   </div>
 </div>
</div>

シンプルなワークフロー図を実装してみよう

上記のように、シンプルなワークフロー図が出来上がりました。
ポイントとしては、display:flexを使うことで高さを合わせているということと、last-child以外のcssを用意することで矢印を出さないように構築することの２点が大きなポイントとなります。

まとめ

今回作らせていただいた簡単なワークフロー図は、ステップ数が横並びになっているタイプでしたので、高さを合わせることが必要になってきますが、もっとシンプルなパターンですと、枠だけあって中にステップ数が書いてある状態のものですと、今回ご用意させていただいものですとbeforeの要素で作った矢印の実装くらいになりますので、使用用途に合わせてご利用ください。