今度はフォーム要素を考えてみよう。例によって_sass/framework-modules/配下に_form-style.scssをつくって、_sass/_private-framework.scssから@import "framework-modules/form-style";。

";"を忘れないように（笑）

Button

ボタンは markdown の記法には無い。ので、HTMLで書くしか無い。まあ記事の中に個別のボタンを作る必要も無いが、一応仕組みとしてかんがえてみる。テンプレでは使えるだろう。

若干の問題点

フォーム要素に関して、ここで書いてるようなボタン単品の HTML なら問題ないが、<form>〜〜</form>の中に書かれた<button>や<input>にはALDsがうまく渡らない。markdown のクラス名渡しの仕組みがうまく機能しない場合、ここに書いたparse_block_htmlオプションを使う必要がある。ただ Jekyll のテンプレートでそこまでこだわる必要もないだろう。

Jekyll でフォームをアレンジするとしたら、おそらくサイト内検索ページのフォームなどが代表的か。そういうケースでは直接 HTML のclass=xxxやstyle=xxxxに今まで書いてきたクラス名や設定を書いていくのが一番早い。そこは若干手間だけれど、レイアウトテンプレートの話なのでサイト構築時の手間だし、自分フレームワークを活かしてサイト構築しようというならしかたがない。

ちなみにこのサイトの検索ページのレイアウトファイルsearch.mdで、submit ボタンの部分はこんなふうになっている。

<form id="site-search" onSubmit="siteSearch();return false;" onReset="searchReset()" action='#'>
  ......................
  <input type="submit" 
         value="search" 
         class="ctr-btn submit-btn color-button font xd9 bg-greenyellow fc-darkgreen hoverable"
         style="--hoverable-bg:forestgreen; --hoverable-fc:white;">
  ......................
</form>

基本形を作る

Bulma のボタンはこんな感じ。

[html]

<a class="button">Button</a>

Button

へえ！アンカータグでクラス名buttonだけでボタンになるんだ。でもちょっとまぎらわしい。 普通に button タグで書きたい。

Bulma を参考に SCSS はこんな感じにする。

// Button
@mixin button-base {
  position: relative;
  display: inline-flex;
  height: 2.25em;
  margin-bottom: .5rem;
  padding: 0 0.7rem;
  text-align: center;
  white-space: nowrap;
  align-items: center;
  font-size: 1rem;
  justify-content: center;
  line-height: 1.5;
  vertical-align: top;
  border: 1px solid transparent;
  border-radius: 4px;
  box-shadow: none;
  cursor: pointer;
}

.button {
  @include button-base;
  color: #363636;
  background-color: #fff;
  border: 1px solid #dbdbdb;
}

.color-button {
  @include button-base;
}

.button, .color-button {
    // CSS Custom Variables Default
  --bdr-rad: 5px;
  --hoverable-bg: #FFF;
  --hoverable-fc: #333;

  &:hover {
    border-color: #a5a5a5;
  }

  &.small { 
    border-radius: 2px;
    font-size: .75rem;
  }
  &.medium { font-size: 1.25rem; }
  &.large { font-size: 1.5rem; }

  &.fullwidth {
    display: flex;
    width: 100%;
  }
  &.rounded {
    border-radius: 100px;
    padding-left: 1em;
    padding-right: 1em;
  }
  &.rounded.bdr-rad {
    padding-left: 1em;
    padding-right: 1em;
    border-radius: var(--bdr-rad);
  }
  &.hoverable:hover {
    background-color: var(--hoverable-bg);
    color: var(--hoverable-fc);
  }
}

[markdown]

<button>Button</button>{: .button}

これでボタンの見た目はこんな感じに。ボタンの場合は markdown のクラス指定を行末に改行せずに書く。

submit や reset ボタンも同様に。

submit inputs

<input type="submit" value="submit">{: .button}

reset inputs

<input type="reset" value="reset">{: .button}

ボタンの大きさ

Bulma ではボタンの大きさがデフォルトも含めて４種類用意されてる。これも真似てみる。 font-sizeやborder-radiusを調整して大小作っているだけ。

[markdown]

<button>Small</button>{: .button .small}
<button>Default</button>{: .button}
<button>Medium</button>{: .button .medium}
<button>Large</button>{: .button .large}

その他のバリエーション

Fullwidth Button

[markdown]

<button>Small Fullwidth</button>{: .button .fullwidth .small}
<button>Default Fullwidth</button>{: .button .fullwidth}
<button>Medium Fullwidth</button>{: .button .fullwidth .medium}
<button>Large Fullwidth</button>{: .button .fullwidth .large}

Rounded button

[markdown]

<button>Rounded</button>{: .button .rounded .small}
<button>Rounded</button>{: .button .rounded}
<button>Rounded</button>{: .button .rounded .medium}
<button>Rounded</button>{: .button .rounded .large}

デフォルトの丸さはborder-radius: 100px;でしっかり丸いので、.bdr-radクラスとstyle="--bdr-rad:数値で丸さを調整。

[markdown]

<button>Rounded</button>{: .button .rounded .bdr-rad style="--bdr-rad:12px"}

ボタンのスタイル

バックと文字の色

バックと文字に色が付いたボタンとか作りたいのですが、同じ.buttonクラスだと Bulma のようにはうまくいかないので、継承した.color-buttonクラスを指定します。

[markdown]

<button>dark-gray1</button>{: .color-button .bg-dark-gray1 .fc-white}
<button>honeydew</button>{: .color-button .bg-honeydew .fc-navy .fw-lighter}
<button>springgreen</button>{: .color-button .bg-springgreen .fc-firebrick}
<button>darkred</button>{: .color-button .bg-darkred .fc-lemonchiffon .rounded}
<button>darkorange</button>{: .color-button .bg-darkorange .fc-blue .fw-bold .medium}

色ボーダーと色文字のスタイル

Bulma で言うとOutlined と書いてあるやつ。ボーダー設定と色文字設定はもう作ったのでそれを使う。文字色とボーダーの色は別に例のように合わせる必要はないし、バックの色も好きに出来る。

[markdown]

<button>Button</button>{: .color-button .bg-white .fc-springgreen .border .bdr-color style="--bdr-color:springgreen;"}
<button>Button</button>{: .color-button .bg-white .fc-darkorange .border .bdr-color style="--bdr-color:darkorange;"}
<button>Button</button>{: .color-button .medium .bg-white .fc-royalblue .fw-bold .border .bdr-color .bdr-width style="--bdr-color:royalblue; --bdr-width:2px"}
<button>Button</button>{: .color-button .large .rounded .bg-white .fc-crimson .fw-bolder .border .bdr-color .bdr-width style="--bdr-color:crimson; --bdr-width:3px"}

ボタンの場合はクラス設定を改行して書けないので、複雑になるとちょっと辛い。

Hoverable

ボタンなのでマウスを重ねた時の変化も要るだろう。デフォルトではボーダーのグレーがほんの少し濃くなるようにしてあるが、当然物足りない。

.hoverableクラスを追加し、style="--hoverable-bg:バックの色; --hoverable-fc:文字の色;"で, マウスを重ねた時のバックと文字の色を変化させてみよう。

ここではマウスを重ねていない時のボーダーと文字に使った色名を渡して反転させた。この程度以上の、あまり凝ったことは markdown には書けないのであきらめる。凝りたければ別にCSSを書くしかない。

[markdown]

<button>Rounded</button>{: .color-button .rounded .bg-white .border .bdr-color .fc-orangered .hoverable style="--hoverable-bg:orangered; --hoverable-fc:white; --bdr-color:orangered;"}

[scss]

.button, .color-button {
  ..........................
  &.hoverable:hover {
    background-color: var(--hoverable-bg);
    color: var(--hoverable-fc);
  }
}

さらに応用

さらに Bulma のさるまねしてみた。Font Awesome icons を利用したボタン。

markdown を見てもらえばわかるが、HTMLを生で書いた場合、途中で改行しても最後のタグの行に続けてクラス設定を書くと、その最後の要素に渡されるようだ。これだと一行があまり長くならないでいい。

[markdown]

<button><i class="fas fa-bold"></i></button>{: .button .font-size09}
<button><i class="fas fa-italic"></i></button>{: .button .font-size09}
<button><i class="fas fa-underline"></i></button>{: .button .font-size09}
<button>
  <span class="icon"><i class="fab fa-github"></i></span>
  <span>GitHub</span>
</button>{: .button .font-size09}
<button>
  <span class="icon"><i class="fab fa-twitter"></i></span>
  <span>Twitter</span>
</button>{: .color-button .hoverable .bg-turquoise .fc-white .font-size09 style="padding-left:0.5rem; --hoverable-bg:aqua; --hoverable-fc:white;"}
<button>
  <span class="icon"><i class="fas fa-check"></i></span>
  <span>Save</span>
</button>{: .color-button .hoverable .bg-lime .fc-white .font-size09 style="padding-left:0.5rem; --hoverable-bg:limegreen; --hoverable-fc:white;"}
<button>
  <span>Delete</span>
  <span class="icon"><i class="fas fa-times"></i></span>
</button>{: .color-button .hoverable .bg-white .fc-red .font-size09 .border .bdr-color style="padding-right:0.4rem; --bdr-color:red; --hoverable-bg:red; --hoverable-fc:yellow;"}