狼読

 
2020/06/06

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

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

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

内容としては、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>ステップ1のフローの内容になります。</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>

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

01

ステップ1のフローの内容になります。

cssでワークフロー図を作って見ます。

02

ステップ2のフローの内容になります。

cssでワークフロー図を作って見ます。

03

ステップ3のフローの内容になります。

cssでワークフロー図を作って見ます。

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

まとめ

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

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/05/31

[html]placeholderを使いこなしてinputに入力サンプルを入れてみよう

投稿カレンダー

2020年10月
 1234
567891011
12131415161718
19202122232425
262728293031  

Technology

category

©狼読