bulma.cssで、サクッとお洒落モダンデザインにリニューアルしてみる【フレームワークwebサイト制作】

投稿：2020/11/17｜ 更新： 2024/02/11 ｜ 3366文字

今回は、bulma.cssが、お仕事で扱ったお取引先のWordPressサイト・テーマ内に組み込まれていたので、いい機会だから使ってサイトを作ってみます。表や２or３列のレイアウト・クラス指定などを、サクッとですが見ていってみましょう（実際の制作例も有り）。

1 bulma.cssとは？
2 今回bulma.cssでリニューアルしたいサイト（ネットで曲アレンジサイト・リニューアル前）
3 bulma.CSSのインストールは？
4 bulma.cssでのサイトリニューアル一部始終
5 あとがき・リニューアル完了後はこんな感じ
6 外部　参考リンク

bulma.cssとは？

2016年発表された、わりと新しいCSSフレームワークです。ライセンスは『MIT(「著作権表示」と「MITライセンスの全文表示」が条件)』。この記事執筆時点での最新バージョンbulma-0.9.1が、圧縮版で約200KBと、超軽量なわけではありません。しかし、『bootstrapみたいにjavascript入っていない』『一部のクラス名がわかりやすい』『Flexboxベースでボックスが並べやすく、モバイルサイトにも向いている』みたいな特徴があります。

難点としては、『一部のクラス名がださい（table class=”table”って何や笑）・または被る』みたいなところでしょうか。 section class=”section”のCSSを後から足すとき、.section(クラス)なのかsection（要素）なのか迷う、みたいなところはありました笑。

今回bulma.cssでリニューアルしたいサイト（ネットで曲アレンジサイト・リニューアル前）

震災で2年休みつつも、2010年くらいから細々とやっていて（クラウドソーシング無しで350件近く売ったのはポイントです）、過去にも数回リニューアルしています。前回はたしか2016年くらいでした。

PCユーザーが多いにもかかわらず、『2カラム・サイドバーつき』だと、メインコンテンツが狭くてちょっと見にくいかなという感じだったので、リニューアルします。ついでに、ロゴやサンプル曲なども全部差し替えの大盤振る舞いします。

bulma.CSSのインストールは？

CDNから引っ張ってくる方法もありますが、管理人は自社サーバーにアップで対応しました。公式サイト(リンク)からダウンロードします。

こんな感じで､使うサイトの『assets』フォルダーに、FTPでアップロード。他のフォルダにはスタイルシート言語sassで書かれたカスタマイズファイルなどもありますが、それらも一式で上げます（参照しているから）。とりあえず本体をサイトのヘッダー内に、『link rel=”stylesheet”』で読み込めば準備完了です。

bulma.cssでのサイトリニューアル一部始終

ヘッダーメニュー・ロゴなど

bulma.のサイトのソースを参考に組んでみました。デフォルトでは『ロゴがnavの子要素として入っている』ようです。marginで両端に寄せるのはめんどくさくなりそうだったので、子要素から外してメニュー右寄せ。なぜかモバイルデバイス向けメニューが出ないのでjavascriptで開けるかたちに。

表(テーブルタグ)

bulmaでちょっと使いにくかったポイントがテーブルタグ。普通にタグを書いただけでは、表のボーダーが出ません。

ボーダーを表示して表っぽくするには、クラス指定が必要でした。テーブルのクラスは『table』(何だこの安易すぎる命名規則笑)。『is-bordered』クラスが、ボーダー表示するクラスになります（検証したところ、tableも書かないとボーダー出ませんでした）。自分で書いたCSSもあわせて運用する場合、必然的に一つの要素に複数クラスが入ってくる感じになりそうです。

色のクラスの指定

bulmaにはいくつか色のクラスが指定されていて、上記のテーブルのセルに色をつけたいときなどに使えます(他にボタンなども・テキストに直接色クラスは入らないようです)。

例えば、青くしたいときは『is-link』のクラスを。『is-primaryだとターコイズみたいな色』、『is-infoだとスカイブルー』『is-dangerだと赤』、『is-warningだと黄色』といった感じに。

◆参考　bulma.css　Colors
https://bulma.io/documentation/overview/colors/

親columns.子columnを使った3列レイアウト

bulma.CSSでボックス並べをするときわかりやすかったポイントは、ボックスを並べるところでしょうか。親要素columnsクラスの中に、子要素のcolumnクラスを入れて並べていきます。３つ入れるとこんな感じ。『is-mobileクラス』を子要素のcolumnに入れると、モバイルでも3列表示・『is-desktopクラス』だと、デスクトップビューポート以下では縦配置に切り替わるという挙動でした。組み方によっては、横幅のmax-widthよりちょっとはみ出たりするかも。

『.columns { margin-left: -0.75rem;margin-right: -0.75rem; margin-top: -0.75rem;｝』みたいなのを上書きで調整したりして、max-widthにそろえることはできます。そろえるとこんな感じに。はみ出たりした部分は、狙って直せるということがわかったので、良しとしますか。ここらへんの挙動は全部を押さえていないので、今後使う時に詳細にチェックしたいところです。

2列レイアウトの例

お値段表みたいな部分。ボックスのラッパーは『div class=”columns is-desktop（デスクトップ以下でレイアウト切り替え）』で、子要素ボックスは『div class=”column is-one-half”』を指定。PCビューでは表が2列表示。それ以下では1列表示に切り替わります。