News

Home News ボタン

ボタン

a要素button要素に付与すれば押せそうな感じなるスタイル。

ボタンの基本ベーススタイル、a要素にクラスc-buttonを付与し、a要素の中身は文字列のみ
矢印アイコンはsvg要素で入れクラスarrを付与する。

ボタン
<a href="#" class="c-button">ボタン</a>
矢印はSVGで入れる
<a href="#" class="c-button">矢印はSVGで入れる<svg width="24" height="24" viewBox="0 0 24 24" class="arr"><use href="../../assets/img/ico.svg#arrow"/></svg></a>

a要素の中身はインライン・グリッドで組まれるため、他の要素が入ると縦にグリッドが積まれてしまう。

ボタン(矢印はSVGで入れる)
<a href="#" class="c-button">ボタン<small>(矢印はSVGで入れる)</small><svg width="24" height="24" viewBox="0 0 24 24" class="arr"><use href="../../assets/img/ico.svg#arrow"/></svg></a>

ただし、横幅を最大320pxに固定しているため、長い文字列を入れる場合は意図的に<br>タグを入れるなどすると良い。

途中に<wbr>とか入るだけで文字列が縦に分断される(改行されたわけではない)
<a href="#" class="c-button">途中に<wbr>とか入るだけで<wbr>文字列が分断される<small>(改行されたわけではない)</small><svg width="24" height="24" viewBox="0 0 24 24" class="arr"><use href="../../assets/img/ico.svg#arrow"/></svg></a>

非活性

input要素もしくはbutton要素のボタンで、disabled属性が付与されている時はグレーアウトする。

<input type="submit" class="c-button" disabled> <button type="button" class="c-button" disabled>送信できない</button>

サイズバリエーション

サイズ違いがよっつ用意してある。
クラス-lを併記すると大きめボタン、クラス-sを併記すると小さめボタン、クラス-xlを併記すると親要素の横幅いっぱいに広がる大きいボタン、クラス-xsを併記すると文字量に伴い横幅が広がる小さいボタンになる。
コンポーネントから削除してもいいしカスタムしても良い。

<input type="button" value="大きめボタン" class="c-button -l"> <button type="button" class="c-button -s">小さめボタン</button> <button type="submit" class="c-button -xl">大きいボタン</button> <input type="button" value="小さいボタン" class="c-button -xs">

もっと見る

「小さめボタン」よりもう少し小さな、主に「もっと見る」に使われることを見越したクラスc-moreも用意。

もっと見る
<a href="#" class="c-more">もっと見る</a>

タグ

さらに小さなボタンぽいスタイル「タグ」は、span要素はたまたa要素にクラスc-tagを付与する。
ボタンと違い、周囲の余白が少なく、角丸も小さくスタイリングされる。

イラスト グラフィックデザイン
<span class="c-tag">イラスト</span> <a href="#" class="c-tag">グラフィックデザイン</a>

コンポーネント「アーカイブ一覧」の中で使用するとフォントサイズが小さめになる。

  • 2022.12.22
    Mediaスキャンダル
    「週刊文春にスクープされました」とか、割と長めのテキストが入っても良い想定のタイトル。
アーカイブ一覧について