Bulmaのファイル選択ボタン File upload [CSSフレームワーク]

Bulma ロゴ トップ バナー

Webシステムでは、CSVファイルやエクセルファイルなどのデータファイルをサーバーにアップロードする機能を実装する場合があります。

クライアントからサーバーへファイルをアップロードする際には、HTMLのファイル選択ボタンが使用されます。

HTMLのファイル選択ボタンのイメージ

Bulmaには、このファイル選択ボタンのスタイルをカスタマイズするためのクラスが用意されています。

今回は、ファイル選択ボタンのスタイリングに使用するfileクラスとその関連クラスについて紹介します。

ファイル選択ボタンのスタイルを設定するfileクラス

fileクラスはファイル選択ボタンのinput要素(type=”file”)をラップするコンテナです。
Bulmaのファイル選択ボタンのスタイルを設定するクラスは、fileクラスの他にもいくつかのサブクラスで構成されています。

fileクラスとサブクラス

fileクラスのサブクラスには、以下のものがあります。

クラス 説明
file メインのコンテナクラスです。
file-label クリック可能なボタン部分のクラスです。
file-input input要素に指定するクラスです。
file-cta アイコンとラベルのコンテナクラスです。
file-icon アイコンのクラスです。
file-label ラベルのクラスです。
file-name ファイル名のクラスです。

最もシンプルな表示

fileクラスを使用した最もシンプルな形式のファイル選択ボタンの表示は、以下のようになります。

Bulmaのfileクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

アイコンを表示

アイコンを表示すると、以下のようになります。

Bulmaのfileクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

アイコンの表示にはfile-iconクラスを使用します。
file-iconクラスを指定した要素の子要素にアイコンを配置します。
ここでは、Font Awesomeのファイルアップロードのアイコンを指定しました。

ファイル名を表示

ファイル名を表示すると、以下のようになります。

Bulmaのfileクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

ファイル名を表示する際には、fileクラスを指定した要素にhas-nameクラスを追加します。
input要素と同じ階層にspan要素を配置してfile-nameクラスを指定すると、ファイル名が表示されるようになります。

has-nameクラスとfile-nameクラスを使用してファイル名を表示している場合にファイルを選択しても、標準のファイル選択ボタンのように自動でファイル名が表示されることはありません。
ファイル名を表示する場合は、JavaScriptなどを使用して選択されたファイルのファイル名を取得して設定する必要があります。

ファイル名を設定する処理については、本記事のfileクラスの使用例に記載しています。

ファイル選択ボタンを右に表示

通常は左側にあるファイル選択ボタンを右側に配置することができます。

Bulmaのfileクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

ファイル選択ボタンを右側に配置する時は、is-rightクラスを指定します。
is-rightクラスは、fileクラス(とhas-nameクラス)を指定した要素に追加で指定します。

is-rightクラスを使用すると要素(コントロール)自体が右寄せで配置されます。

ファイル名を広げて横の余白を埋める

ファイル名を横に展開して余白を埋めることができます。

Bulmaのfileクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

ファイル名を広げる時は、is-fullwidthクラスを指定します。
is-fullwidthクラスは、is-rightクラスと同様にfileクラスを指定した要素に追加で指定します。

is-rightクラスを指定している場合の表示は、以下のようになります。

Bulmaのfileクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

ボックス化

Bulmaではファイル選択ボタンをボックス化することができます。

Bulmaのfileクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

ファイル選択ボタンのボックス化には、is-boxedクラスを使用します。
is-boxedクラスはfileクラスを指定した要素に追加で指定します。

ファイル名を表示している場合は、以下のように表示されます。

Bulmaのfileクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

ファイル選択ボタンの色

Bulmaに用意されているカラークラスを指定することで、ファイル選択ボタンの色を変更することができます。

カラークラスには、以下の10種類があります。

  • is-white
  • is-black
  • is-light
  • is-dark
  • is-primary
  • is-link
  • is-info
  • is-success
  • is-warning
  • is-danger

Bulmaのfileクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

色を表すクラスは、fileクラスを指定した要素に追加で指定します。

ファイル選択ボタンのサイズ

Bulmaには、ファイル選択ボタンのサイズを指定するためのクラスが用意されています。
サイズを表すクラスには、以下の4種類があります。

  • is-small
  • is-normal
  • is-medium
  • is-large

Bulmaのfileクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

サイズを表すクラスは、fileクラスを指定した要素に追加で指定します。
サイズを省略するとis-normalを指定した時と同じ大きさになります。

ファイル名を表示した場合は、次のようになります。

Bulmaのfileクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

ボックス化した場合は、次のようになります。

Bulmaのfileクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

ファイル選択ボタンの配置

is-rightクラスを使用してファイル選択ボタンを右側に配置すると、要素自体が右寄せに配置されることはすでに記載しましたが、ファイル選択ボタンは、要素自体を中央に配置することもできます。

Bulmaのfileクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

fileクラスの使用例(JavaScriptでファイル名を表示する実装)

ここでは、fileクラスを使用してファイル選択ボタンをカスタマイズし、選択されたファイルの名前を表示する例を示します。

HTML

JavaScript

HTML標準のファイル選択ボタンでファイルを選択すると、Chrome、Firefox、Edgeなどのブラウザーでは、選択したファイル名がボタンの横に表示されますが、Bulmaのfileクラスを適用したファイル選択ボタンでは、ファイル名が表示されません。
Bulmaでのファイル名の表示は、file-nameクラスを指定した要素に対して行います。
しかし、Bulmaのクラスを指定しただけでは、ファイル名の表示は自動で行われません。
なので、ファイル名の表示はBulmaを利用する開発者が行う必要があります。

上記の例では、JavaScriptを使用して選択されたファイルの名前を表示しています。

ファイル選択ボタンのchangeイベントをaddEventListenerメソッドで購読します。
changeイベントでは、選択されたファイルからファイル名を取得してfile-nameクラスが指定されている要素(span)に表示します。
ここでは、ファイル名を表示する処理をfileChanged関数を定義して処理しています。

Bulma 入門 Tips 一覧