こんにちは。継続の錬金術士なおキーヌです。

ブログ毎日更新は248日目になります。

今回はCSSフレームワークという概念を学びましょう。

というのも、CSSって1からすべて組んでいたら思ったより時間がかかります。

頭の中でレンダリングできる人やPhotoshop・イラストレーター等でガッチリとデザインを固めれば
プログラミングみたいにスラスラとコーディングしまっていけるのですが、
普通の人はそんなスラスラとCSSを書くことはできません。

というのも思ったよりも数pxズレてるなとか、思ったよりも色合い微妙だなとか
考えてたけどこっちの方がしっくりくるなっていうのがCSSを組んでいる時によくあります。

ライブリロードとかを使っててもやっぱり確認しつつ組んでいくので時間がかかります。

それで今回は既に設計されて誰が使っても同じようにプロが作ったCSSを、
HTMLにクラスを書き込むだけで実装することが出来るのがCSSフレームワークです。

デザインが出来ないエンジニアが見た目をよくしたい時によくつかわれますし、
特にデザインはどうでもいいけどある程度きれいにしてほしいというお客様に納品することも出来ます。

その為だけにデザイナーを雇っていたら利益がでませんからね。

それではWordPress自作テーマ講座第18回目を始めましょう。

1. CSSフレームワークってなんなのさ
2. CSSフレームワークってどう使うのさ
3. とりあえずBootStrap使えばいいという話
4. WordPress自作テーマ講座第18回まとめ

CSSフレームワークってなんなのさ

CSSフレームワークとはその名の通り、Cascading Style Sheetsを使用した、
より簡単で標準に準拠したWebデザインを可能にすることを目的としたフレームワークです。

フレームワークとはいわばレゴブロックですね。

レゴブロックはブロックを組み立てて何かを作り上げることが出来ます。

ブロックを積み上げて何かを作るために、わざわざブロックそのものから形成する人って基本的にいないですよね？

それと一緒で今時CSSを0から組み上げる人なんてかなり稀なのです。

私はどちらかというと頭おかしい部類の人間になりますのであえて1から組んでたりするのですが、
その分スピードが遅かったりしますし、それでも便利なCSSリセットは使っています。

フレームワークの欠点としては、ちゃんと理解していないと誰が組んでも同じようなデザインになる。

という事です。

これはデメリットにもメリットにもなりえるので人によっては欠点じゃないかもしれません。

私の場合、人と同じが嫌というワガママ体質なのでフレームワークは基本的に使いませんが、
それでもシステム開発の時に一々デザイン組む必要ないなと思う時はCSSフレームワークを利用します。

話を戻すと、誰が組んでも同じようになるっていうのは逆に考えると、
CSSフレームワークは素人でもプロのような見た目を組むことが出来るということです。

レイアウトデザインというのは知識が無いと、
文字の字詰め・ボックス同士の隙間などちぐはぐなものになってしまいます。

そういうのをすべて組み込んだのがCSSフレームワークです。

設計されているので素人でも気にせずカッコいいレイアウトと見た目を作ることが出来ます。

CSSを0から学ぶのしんどすぎ！って人にはかなり便利なツールだと思います。

CSSフレームワークってどう使うのさ

CSSフレームワークの使い方は何通りかあるのですが、一番楽なのは「CDN」という仕組みを使って
HTMLにスタイルシートを読み込ませるタグ「meta rel="stylesheet"」のhref属性にurlを張り付けるだけで
CSSフレームワークを使うことが出来るようになります。

しかもこの方法の良い所は、既にほかのサイトでも同じURLを使っている場合既に自分のパソコン側にキャッシュが作られており
最初から読み込む必要がなくなるので表示速度も上がるので読み込み時間を気にする人には最適です。

基本的に有名どころのCSSフレームワークは「CDN」という仕組みを利用できるようになっているので
特に理由が無い時はCDNを利用した方が良いでしょう。

CDNとは「Content Delivery Networks」の略ですが詳しい解説をすると、
1つの記事が出来上がるので各自ググってみてください。

簡単に言うと負荷を分散する仕組みです。とりあえず意味が分からないうちは使っておけば大丈夫です。

意味を詳しく知りたくなってきた時に調べるのが何でも頭に残るコツですよ。

とりあえずBootStrap使えばいいという話

CSSフレームワークの代表といえば書籍にもなったりしているBootStrapでしょうか。

とりあえず最初はこれをつかっておけば間違いないというやつです。

Bootstrapのほかにも有名どころのCSSフレームワークといえば

• Bluma
• UIkit
• Materialize
• Skelton(レイアウトのみ)

になります。

個人的なオススメはBootstrapとUIKitでしょうか。

一度色々使ってみて、自分にしっくりくるCSSフレームワークを使ってみると良いでしょう。

私はレイアウトが苦手だったので見た目は自分で作るからレイアウトだけを用意してくれてて、
それ以外の見た目は自分で実装するタイプのCSSフレームワーク(リストで言えばSkeltonが該当)を使ってみました。

レイアウト部分だけが用意されており、それ以外は何もないという一見ショボそうに見えますが
余計なものをそぎ落としているおかげか凄く軽量なのでサイトを軽くしたい人にはオススメです。

最初は気持ちよく使えてたのですが、結局細かい調整などをしようとすると面倒くさいことに気付き
気付けばCSSフレームワークを使わなくなってしまいました。

ですが、中身のファイルを覗いてどのように組んでいるかを見るとすごく勉強になるので
もし1から組みたいという人は一度CSSフレームワークを使ってみて、
どのように動いているか仕組みをしることができるので一度は使ってみましょう。

まずは解説も使っている人も多いBootStrapをオススメします。

基本的な使い方は、用意されたCSSのクラス名をHTMLタグに設定するだけです。

設定する文字列はCSSフレームワークによって異なりますが、
共通として一度CDNで読み込めば基本的にHTMLファイルだけを触るだけになるので
CSSとHTMLを行き来しなくてよくなるので効率が格段にアップします！

WordPress自作テーマ講座第18回まとめ

今回はCSSフレームワークの軽い紹介でしたが、次回はBootstrapを実際に使ってみましょう。

たぶん今までCSSを1から組んでたのがアホらしくなると思いますが、
結局CSSっていうのは微調整が必要になってくるケースが多いので弄れるようにはなっておいたほうがお得です。

私のようにCSSフレームワークはやっぱり肌に合わない！自分で組む！

ってなる人もいるので絶対に使えというわけではないです。

CSSフレームワークを使えば開発効率がグンとアップするので、とにかく早く仕上げたいという時に効果的ですね。

それでは。