Bootstrap から考えるCSSフレームワークに対する雑感

記事にするにはすっごい今更感がある Bootstrap ですが、どれくらい実用するかはともかくとして簡単にビジュアルと整える程度で済むなら CSSフレームワークはとても便利なので、基本的な部分くらいは把握しておこうというつもりで最近ちょっと Bootstrap を触っています。

今となっては Bootstrap に関する記事は色々あるのですが、まずは基本から……というか、ビジュアルに関わるのは基本的な部分くらいしか機会がないので(笑)、基本的な使い方がまとまっている

辺りのページを中心に、ちょくちょく調べながら WordPress と組み合わせてちょっとしたプロダクトを余暇にゆったりペースで作っています。あ、今となっては色々な CSSフレームワークが出てる中でなんで Bootstrap なのかと言えば、情報量の多さもさることながら、以前軽く使った経験があるので気持ち的にしきい値が低かったっていうとっても個人的な理由ですｗ

以前軽く使った頃は本当に軽く使っていたというか、全く CSS が適用されない HTML がビジュアル的に多少整えばいいや程度の使い方だったので(ドキュメントを HTML で作成した際のちょっとした見た目を整える用途で特に利用してました)、Bootstrap で何がどこまでできて、どんな制約があるのか?といった辺りはあまり意識してなかったのですが、ちゃんと使ってみると確かに便利ですよね。

同時に Bootstrap が登場した最初期は「如何にもｗ」って感じのいわゆる Bootstrap臭のあったビジュアルも少なくありませんでしたが、最近は Bootstrap を利用してるとは一見して思えないWebサイトや「え? これが Bootstrap製?」ってテンプレートも配布されててすごく洗練されましたよね。

作法に則れば手っ取り早くビジュアルを整えられる

前述のドキュメントを HTML で作成した際のちょっとした見た目を整える程度でも一から CSS を作成するよりはるかに早く、それっぽく整えてくれて便利なのですが、グリッドシステムにも対応してるのでレスポンシブ対応も容易ですし、それ以外にも例えば

<div class="panel panel-default">
  <div class="panel-heading">パネル::ヘッダー</div>
  <div class="panel-body">パネル::本文</div>
  <div class="panel-footer">パネル::フッター</div>
</div>

だけでパネル表示ができますし(最初の div 要素に付与する .panel-default を .panel-primary や .panel-success に変更するだけでパネルのヘッダーの色が変えられます / そのまま利用すると限られた色しか利用できないことにもなるのでもっと融通効かして彩色を変更したい場合は独自に CSS ファイルを当てて色指定することになりますが)、ナビゲーション部分でよく使うようなビジュアルも

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="/content_a">コンテンツ A</a></li>
    <li><a href="/content_b">コンテンツ B</a></li>
</ul>

でタブ型のメニュー、

<menu class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#globalnavi">
            <span class="sr-only">メニュー</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>

    <nav id="globalnavi" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="">Link1</a></li>
            <li><a href="">Link2</a></li>
            <li><a href="">Link3</a></li>
        </ul>
    </nav>
</menu>

でヘッダー直下に挿入するタイプのグローバルナビゲーションが生成できます(本家サイトのグローバルナビみたいな感じです)。

他にもスライドショーやモーダル・ウィンドウのようなイマドキ感のあるギミックが実装できたり、Bootstrap 単体でグラフアイコンが利用できたり、本当にザクッと手っ取り早くビジュアルを整えたいのなら CSSフレームワークはとても有効なツールとして機能してくれます。実際、一般の訪問者が利用されるフロントエンドは CSSフレームワークなどは使わずに Photoshop や最近なら Sketch で作成したデザインを手製でコーディングしつつも、その裏側で動く管理画面は Bootstrap でビジュアルを整える、って感じのシステムも少なくないかと思います。

こっからが実は本題になる雑感

飽くまで個人的な雑感になるのですが、とは言え自分が古い世代って事情も少なからずあるせいか、

まず最初に文章構造(HTML構造)があって、
ビジュアルのためにHTML構造を崩さない範囲で構造を肉付けし
その構造に対してビジュアルを付与する

っていう考え方からすると CSSフレームワークってその真逆を行ってるというか、ビジュアルのための HTML みたいな感じがあって CSSフレームワークはそれはそれで便利なんだけど、「何か違う……」感をすっごく抱きます。似たよう話はちょっと前に Twitter でも話題になってた記憶がありますし、

CSSフレームワークは良くないと思った理由 - Librabuch

https://librabuch.jp/blog/2013/02/css_framework_is_no_good/

librabuch.jp

でも似たような点に触れられています。

後発の CSSフレームワークはそういう面が緩和してたりするんでしょうかね? Bootstrap に限らず、いくつか他の CSSフレームワークも試してみつつ、その辺りもう少し勉強していきたいなぁ、とも考えてます。

あと、そういう話とはまた別に HTML構造に基づく(Webサイトとして実現可能な)プロトタイプを作成する上で、ザクッと必要なビジュアルを整えてくれるのにはすごく便利かな、とも。若干角度の違うツイートなんですが、

CSSフレームワークからプロトタイピングしていくほうが、プロダクトはアクセシブルになりやすいのかもしれない。すでにコードがあり、そのコードがある程度アクセシビリティを意識している場合が多いから。#cssnite

— Rikiya Ihara (@magi1125) 2016年9月24日

これは確かに思います。デザイナーやコーダー、フロントエンドエンジニアがアクセスビリティに疎いとこうした部分はまったくもってすっぽ抜けることが多いですから。

アクセスビリティというとニアリーイコールで障碍者と結びつきやすい傾向がまだありますけど、健常者でも「手が塞がってるけど至急調べごとが」とか「疲れ目で小さい文字が読みにくい……」とかをサポートしてくれる概念であるってことがもっと認識として広がって欲しいところですね。

最後の最後で話が脱線気味になりましたが……。