[css] LPデザインで使えるステップパターン #06「菱形階層」

2023/05/16

今回も本番で使えちゃういい感じのステップ表示をcssで作ったので、ソースを公開しちゃいます。段階的なステップを伝えたい時に効果的に見せる事ができます。

ソースコード

index.html

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta charset='utf-8' />
<link rel='stylesheet' href='stair.css' />
<style>
body{
  background-color:#ddd;
}
</style>

<div class='step-process'>
  <ul class='min-max'>
    <li class='word'>開始</li>
    <li class='arrow'><p></p></li>
    <li class='word'>終了</li>
  </ul>
  <ul class='stair'>
    <li>
      <div class='title'>デザイン<br>Design</div>
      <div class='text'>新しいアイデアをデザイン（設計）する。</div>
    </li>
    <li>
      <div class='title'>開発<br>Develop</div>
      <div class='text'>デザインした設計どおりに、構築（開発）する。</div>
    </li>
    <li>
      <div class='title'>テスト<br>Test</div>
      <div class='text'>構築できたら、テスト（検証）する。</div>
    </li>
    <li>
      <div class='title'>リリース<br>Release</div>
      <div class='text'>問題が無いことが確認できたら、公開する。</div>
    </li>
    <li>
      <div class='title'>運用<br>Operation</div>
      <div class='text'>定期的な運用を行い、集客を活性化を促す。</div>
    </li>
    <li>
      <div class='title'>修正<br>Refactoring</div>
      <div class='text'>改善を行うことで、アップデートさせる。</div>
    </li>
  </ul>
</div>

stair.css

.step-process,
.step-process *,
.step-process *::before,
.step-process *::after{
  -webkit-box-sizing : border-box;
     -moz-box-sizing : border-box;
       -o-box-sizing : border-box;
      -ms-box-sizing : border-box;
          box-sizing : border-box;
}
.step-process{
  --color:#36979d;
  display:flex;
  gap:10px;
}
.step-process ul,
.step-process li{
  list-style:none;
  margin:0;
  padding:0;
}

.step-process .min-max{
  width:50px;
  display:flex;
  flex-direction:column;
  justify-content: space-between;
}
.step-process .min-max .word{
  font-weight:bold;
  font-size:1.2rem;
  color:var(--color);
  text-align:center;
}
.step-process .min-max .arrow{
  position:relative;
  flex:1;
  padding:10px 0;
}
.step-process .min-max .arrow > *{
  width:2px;
  height:100%;
  background-color:var(--color);
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
}
.step-process .min-max .arrow > *::before{
  content:'';
  display:block;
  position:absolute;
  transform:translate(-50% , 0);
  border-style:solid;
  border-color:var(--color) transparent;
  border-width:0 10px 0 10px;
}
.step-process .min-max .arrow > *::before{
  top:0;
  left:50%;
  border-bottom-width: 15px;
}

.step-process .stair{
  --size: 200px;
  --text: 110px;

  display:flex;
  flex-direction:column-reverse;
  width: var(--size);
  margin-left:calc(var(--size) / 3);
}
.step-process .stair > *{
  position:relative;
  height:calc(var(--size) / 1.8);
}
.step-process .stair > * > *{
  position:relative;
  z-index:2;
  z-index: counter(z);
}
.step-process .stair > * > .title{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:white;
  font-size:1.0rem;
  text-align:center;
  font-weight: bold;
}
.step-process .stair > *::before{
  content:'';
  display:block;
  width: calc(var(--size) / 1.2);
  height: calc(var(--size) / 1.2);
  position:absolute;
  top:0;
  left:0;
  box-shadow:-10px 10px 5px rgba(0,0,0,0.2);
  transform: translate(calc(var(--size) / -3) , 35%)  rotate(-45deg) skew(25deg, 25deg);
  transform-origin: top left;
  z-index: 1;
}
.step-process .stair > * > .text{
  position:absolute;
  top:50%;
  left:100%;
  border-color:var(--color);
  color:var(--color);
  border-style:dotted;
  border-width:0;
  border-top-width: 4px;
  width:calc(100% + var(--text));
  height:100%;
  transform:translate(0 , -50%);
  display:flex;
  align-items:center;
  padding:10px 10px 10px calc(var(--size) - var(--text));
  font-size:0.9rem;
}
.step-process .stair > *:first-child > .text{
  border-bottom-width: 4px;
}

.step-process .stair > *:nth-of-type(1)::before{
  background-color:#eef7f7;
}
.step-process .stair > *:nth-of-type(1) > .title{
  color:#36979d;
}
.step-process .stair > *:nth-of-type(2)::before{
  background-color:#d4e9ea;
}
.step-process .stair > *:nth-of-type(2) > .title{
  color:#36979d;
}
.step-process .stair > *:nth-of-type(3)::before{
  background-color:#aad4d7;
}
.step-process .stair > *:nth-of-type(3) > .title{
  color:#36979d;
}
.step-process .stair > *:nth-of-type(4)::before{
  background-color:#79bdc1;
}
.step-process .stair > *:nth-of-type(4) > .title{
  color:#eef7f7;
}
.step-process .stair > *:nth-of-type(5)::before{
  background-color:#58adb2;
}
.step-process .stair > *:nth-of-type(5) > .title{
  color:#eef7f7;
}
.step-process .stair > *:nth-of-type(6)::before{
  background-color:#46a1a7;
}
.step-process .stair > *:nth-of-type(6) > .title{
  color:#eef7f7;
}
.step-process .stair > *:nth-of-type(7)::before{
  background-color:#36979d;
}
.step-process .stair > *:nth-of-type(7) > .title{
  color:#eef7f7;
}

@media(max-width:500px){
  .step-process .min-max{
    width:30px;
  }
  .step-process .min-max .word{
    font-size:1.0;
  }
  .step-process .stair{
    --size: 90px;
    --text: 50px;
  }
  .step-process .stair > * > .title{
    font-size:0.7rem;
  }
  .step-process .stair > * > .text{
    font-size:0.6rem;
  }
}
@media (min-width:501px) and (max-width:800px){
  .step-process .min-max{
    width:40px;
  }
  .step-process .min-max .word{
    font-size:1.2;
  }
  .step-process .stair{
    --size: 150px;
    --text: 80px;
  }
  .step-process .stair > * > .title{
    font-size:0.9rem;
  }
  .step-process .stair > * > .text{
    font-size:0.8rem;
  }
}

デモ

開始
終了

デザイン
Design

新しいアイデアをデザイン（設計）する。
開発
Develop

デザインした設計どおりに、構築（開発）する。
テスト
Test

構築できたら、テスト（検証）する。
リリース
Release

問題が無いことが確認できたら、公開する。
運用
Operation

定期的な運用を行い、集客を活性化を促す。
修正
Refactoring

改善を行うことで、アップデートさせる。

解説

このステップが特殊な点は、下から上に向かって進んでいく見た目になっている事です。建物の階を登っていくイメージですね。作業などをクリアしていく時のステップアップで見せると効果的でしょう。ソースコードの中でいくつか解説が必要な点を書いておきます。

リストのDOM構造

DOM構造はなるべくシンプルに構成して、内容変更などをやりやすいように、それぞれのステップとその解説文章を同じ要素でまとめるようにしました。表示はこれらのステップが、上下逆になるので、コーディングするときは、時系列で、表示の時に下から上の順番になるのがポイントです。

CSSで菱形表示

今回のコーディングで最も苦労した点がこの菱形の図形表示です。仕組みを説明すると、普通の正方形を、transform:skew();という命令を使って変形させています。 skewは、図形の縦と横に角度を付けて歪めるという命令で一見使いにくそうに思いますが、実際やってみると意外と簡単にできてしまいます。今回は、平行四辺形の菱形なので、正方形の縦横を同じ値で歪めることで、この形が表示できました。参考リファレンスページ : https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/skew

リストreverseとz-index

cssでよく悩むポイントとして、要素の前後判定があります。今回は、立体的な見栄えに見えるために、最上階が一番手前に来る仕様にしなければいけないのですが、 DOM構造におけるCSSの仕様としては、後ろに書かれた要素が、手前に表示されてしまいます。 z-indexを記述してもいいのですが、数が増えた時にいちいち書き直すのはかなりめんどくさいし仕組みとしてはイケてないです。そのため、今回は、flex-direction:column-reverse;という、flex構造にして、それを逆の並びで表示してくれる命令を使っています。記述した順ではなく、上下が逆になっているのはそのためなんですね。でも、このデザインの構造にも合っていて、非常に効率的なコーディングになりました。

個数の上限数

今回のコーディングの構造体でイケてない点として、項目の数を増やした時に、今現在は6個までの個数に対応しているんですが、それ以上になると、色を増やしていかなければいけません。グラデーションをうまく使ってやってみようかと思ったんですが、今回はこれでカンベンしてくださいませ🙏

githubでソース取得

https://github.com/yugeta/step_pattern branch : 06_stair $ git clone https://github.com/yugeta/step_pattern.git -b 06_stair

[css] LPデザインで使えるステップパターン #06「菱形階層」

ソースコード

index.html

stair.css

デモ

解説

リストのDOM構造

CSSで菱形表示

リストreverseとz-index

個数の上限数

githubでソース取得

0 件のコメント:

コメントを投稿

人気の投稿

このブログを検索

ごあいさつ

ブログアーカイブ

ラベル

[css] LPデザインで使えるステップパターン #06「菱形階層」

ソースコード

index.html

stair.css

デモ

解説

リストのDOM構造

CSSで菱形表示

リストreverseとz-index

個数の上限数

githubでソース取得

0 件のコメント:

コメントを投稿

人気の投稿

このブログを検索

ごあいさつ

ブログ アーカイブ

ラベル

ブログアーカイブ