💻

CSSでいわゆる「矢羽」を作る

2020/06/01に公開

CSS

tech

作ったもの

こういうの。日本ではよく「矢羽（やばね）」と呼ばれているUIですね。

こんな感じで横スクロールできるようにしてスマホ表示にも対応しました。

なかなかドンピシャなCSSのサンプルが見つけられませんでしたが、こちらのサイトにナイスなサンプルがあったので、ありがたく ~~ほぼ丸パクリ~~ 参考にさせていただきました。

実際のコード

以下のようにマークアップします。

<div class="stepper">
  <!-- 通過済みの状態 -->
  <div class="step done">
    <a href="" class="clickable">状態1</a>
  </div>

  <!-- 現在の状態 -->
  <div class="step active">
    <a href="" class="clickable">状態4</a>
  </div>

  <!-- 未到達の状態 -->
  <div class="step">
    <a href="" class="clickable">状態7</a>
  </div>
</div>

SCSSは以下のとおり。（コンパイル済みCSSは長くなりすぎるし読めないと思うので載せません🙇）

$bg-color: #dae0e5;
$fg-color: #444;
$bg-done-color: #28a745;
$fg-done-color: #fff;
$bg-active-color: #007bff;
$fg-active-color: #fff;

$padding-left: 1.2em;
$padding-right: 0.8em;
$padding-y: 0.3em;
$margin-left: 0.5em;
$margin-right: 1em;
$arrow-width: 1em;
$arrow-height: 1.5em;

@mixin before($color) {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -1 * $arrow-height;
  border-width: $arrow-height 0 $arrow-height $arrow-width;
  border-style: solid;
  border-color: $color transparent;
  left: -1 * $arrow-width;
}

@mixin after($color) {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -1 * $arrow-height;
  border-top: $arrow-height solid transparent;
  border-bottom: $arrow-height solid transparent;
  border-left: $arrow-width solid $color;
  right: -1 * $arrow-width;
}

@mixin step($fg-color, $bg-color) {
  .clickable {
    color: $fg-color;
    background-color: $bg-color;
    &:before {
      @include before($bg-color)
    }
    &:after {
      @include after($bg-color)
    }
  }
  &:hover .clickable {
    $bg-color: darken($bg-color, 10%);
    background-color: $bg-color;
    &:before {
      @include before($bg-color)
    }
    &:after {
      @include after($bg-color)
    }
  }
}

.stepper {
  display: flex;
  word-break: keep-all;
  overflow: scroll;

  .step {
    margin: 0;
    margin-left: $margin-left;
    margin-right: $margin-right;

    &:first-child {
      margin-left: 0 !important;
      .clickable:before {
        content: none !important;
      }
    }

    .clickable {
      text-decoration: none; // <a> 用
      border: none; // <button> 用
      outline: none; // <button> 用
      display: block;
      position: relative;
      padding: $padding-y;
      padding-left: $padding-left;
      padding-right: $padding-right;
    }

    @include step($fg-color, $bg-color);

    &.done {
      @include step($fg-done-color, $bg-done-color);
    }

    &.active {
      @include step($fg-active-color, $bg-active-color);
    }
  }
}

読める人は頑張って読んでみてください😅

冒頭の

$bg-color: #dae0e5;
$fg-color: #444;
$bg-done-color: #28a745;
$fg-done-color: #fff;
$bg-active-color: #007bff;
$fg-active-color: #fff;

これらの変数で色を、

$padding-left: 1.2em;
$padding-right: 0.8em;
$padding-y: 0.3em;
$margin-left: 0.5em;
$margin-right: 1em;
$arrow-width: 1em;
$arrow-height: 1.5em;

これらの変数で形状（大きさや間隔など）を柔軟に変更できます👍

また、以下のように <form> タグと組み合わせて使えば、矢羽から直接状態を変更できるようなUIも簡単に作れます。

CSSも <a> タグ <button> タグどちらにも対応できるような内容にしてあります。

<div class="stepper">
  <div class="step">
    <form action="" method="post" onsubmit="return confirm('状態を変更してよいですか？')">
      <input type="hidden" name="state" value="状態7">
      <button type="submit" class="clickable">状態7</button>
    </form>
  </div>
</div>

以上、よろしければ参考にしてみてください✨

GitHubで編集を提案

作ったもの

実際のコード

Discussion