1からのCSSフレームワークこの広告は、90日以上更新していないブログに表示しています。2015-08-071からのCSSフレームワークWordPressでWebサイト構築しようと様々なテーマを探していたのだが、どれもしっくり来ない。マガジンタイプのテーマを購入してみたが、やはり既存のテーマである。カラム数であったり、表示するコンテンツであったり、コンテンツ間のスペースであったり、様々な制約がある。『内容をテーマの設計に合わせてしまおう』となればよいが、新しいサービスを始めるからには、ああしたいこうしたい、という思いが出てくるものだ。WordPressのテーマはカスタマイズ可能だ。改変が許されているテーマであれば、デザインが崩れないようにカスタマイズすればよい。いえ、カスタマイズするにはゴリゴリとCSSをいじらなければならない。WordPressのウィジェットをはめ込むだけの作業から、CSSのコーディングとなれば、一気に難度が上がる。教本をチラチラと眺めるが、うーん...。自分でCSS書いたほうが早くない?というわけで、WordPressのテーマを使うのは止めて、代替案を探していたところ、たどり着いたのがCSSフレームワークである。CSSフレームワークって?端的に言えば、ナビバーやボタンといったWebの基本的なコンポーネントに予めデザインが施されたCSSファイルとJavaScriptファイルの一式である。"navbar"だとか、"jumbotron"とか名前のついたclassを指定してタグで囲んでいけば、あっというまに素敵にデザインされたWebサイトが出来上がる。Twitter社が提供しているBootstrapが最も有名で、日本語サイトも充実している。LiteなんていうCSSフレームワークもある。モノが違えど、考え方は一緒だ。どのCSSフレームワークにも素敵なデザインのクラスが沢山用意されているので、htmlファイルから呼び出すだけで、統一されたデザインのWebサイトを構築できる。筆者は現在構築中のサイトでBootstrapを用いることにした。流行りのCSSフレームワークなので、『Bootstrap臭がする』などと書かれることもあるが、そこはカスタマイズするなりして、デザインをいじっていけばよいだろう。以下のような教本が出ているのも嬉しい。見るCSSフレームワークを使う利点CSSフレームワークを使う利点の一つは、これらのクラスが予めレスポンシブにデザインされていることだ。スマホ画面サイズ、通常PC画面サイズ、大PC画面サイズの横幅に合わせて、異なるスタイルが適用するように予め設計されている。CSSフレームワークを用いてhtmlファイルを書けば、自動的にレスポンシブ対応できる。サイト閲覧時にPCよりもスマホを利用する人が大半だ。CSSフレームワークのクラスを使えば、画面サイズ毎に1からスタイルを仕上げていく手間が省ける。一つの利点はグリッドシステムだ。Webサイトはコンテンツをページに配置することで作り上げていく。上にはナビバーがあって、その下にスライダーがあって、その下にお知らせがあって、という具合だ。綺麗なデザインは、コンテンツが秩序に従って配置されている。コンテンツの端が綺麗にそろっていて、見やすいように余白が一定量確保されている。CSSフレームワークのグリッドシステムを使えば、簡単にコンテンツを配置できる。ページ横幅が12分割されていて、『このコンテンツは7マス、次のコンテンツに5マス使ってください』と指定すれば、7:5の比率の2カラムのデザインが簡単にできる。rowという行指定用のクラスを用いれば、『このコンテンツには7マス使って、次のコンテンツ3個を5マスの横幅で縦に並べてください』という指定もできる。Pareckiとはいえ、コンテンツの位置を調整するためのmargin、paddingといったCSSの基本が分からない初心者にはちょっと難しい。クラス指定が重複してしまって、スタイルがうまく適用されないなんてことも茶飯事だ。筆者は以下の本のグリッドシステムの説明を手元におきながら、ゴリゴリとコーディングしている。見るWebサイト構築のハードルは低くなっているカスタマイズとか大変そうだな、CSSを勉強するのに時間がかかるな、とか思っていたのだが、CSSフレームワークは非常にとっつきやすい。面倒くさがりの人は、Bootstrapのページからファイル一式をダウンロードして、index.htmlファイルを作って、head情報を全部コピペして、body情報もコンポーネントのソースをコピペして作れば、あっという間にWebサイトが出来上がる。ブログの普及に伴って、個人のWebページの数が莫大に増えたが、WordPressをはじめとするCMS、BootstrapをはじめとするCSSフレームワークが出てきたことで、ある程度カスタマイズされたWebページを作る人も増えてきている。CMSやCSSフレームワークの普及は、若しくは紙粘土で全てのパーツを作っていたのが、レゴのパーツを組み合わせて作れるようになった、そんなイメージである。0から全てを作れ、と言われると途方に暮れてしまうが、ある程度出来上がったものを組み合わせるのであれば、とっつきやすいし、どんどんイメージも湧いてくる。超初心者の筆者はBootstrapでデザインに励む毎日である。喫緊の課題は、いかに『Bootstrap臭』を無くすかだ。いわゆるフラットデザインって、そんなにバリエーションが無いんである。ちなみに、筆者のデザインのテーマは"ロシアン・アヴァンギャルド"である。『え、何それ...』という人は、前田敦子のシングルCDのジャケ写を参照するように。NetEaseに対する訴状内容まとめ2010年代の海外ドラマ革命と、映画、ゲーム。ついてid:ktadakiこのブログについてはてなブログをはじめよう!ktadakiさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。