狼読

 
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/06/01

[jquery]テキストボックスが入力された時にどんな文字が入力されているのかを取得してみる

2020/05/14

[Linuxコマンド]2つ以上のファイルを横に並べて表示させる方法

2020/05/22

【Mac】パッケージのインストールが簡単になる!HomebrewとHomebrew-caskの使い方

投稿カレンダー

2024年3月
 123
45678910
11121314151617
18192021222324
25262728293031

Technology

category

©狼読