2015.12.15
0からはじめるPHP#63【Bootstrap#1-CSSフレームワーク-】
僕の勉強帳として執筆しているこの
さて、掲示板に関しては、エラー対策は実は中途半端にしかやってないんですが、その辺はひとまず置いときましょう。
機能面ではほぼ完成に近づいているわけですが、実はまだもうひとつ重要なことをやってなくてですね。CSSフレームワークです。
もしかしたら以前にちらっと言ったかも知れませんが、CSSにもフレームワークって存在するんですよね。
CSSって、別に手打ちでもなんとかなるんですがいっちょ前のサイトを作ろうとなるとめちゃくちゃめんどいのが事実です。
で、その諸悪の根源って大体はレスポンシブデザインなんですよね。
うちのトップページも、環境(というかウィンドウの横幅)によって表示が3段階で変わるんですが、それを全部いちから作るのって思ったよりめんどくさいんですよ。
そこで、フレームワークの力を借りたい！ということで、元はtwitter社で作られたBootstrapというのを簡単に学習したいと思います。
このフレームワークの力を借りることで容易にレスポンシブデザインが実現できる！！！らしい。
ではまず最初に導入ですね。
<!DOCTYPE HTML>
<html>
<head>
<title>@yield('title')</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">//これを追加
</head>
<body>
<div class="container">//@yield('content')の前後にこのdivを追加
@yield('content')
</div>//これもお忘れなく
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>//こいつらも
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>//追加
</body>
</html>
※CDNのバージョンはHosted LibrariesとBootstrapCDNで随時新しいバージョンに修正してください。
また、jQueryに関しては、古いブラウザへの対応をするのなら1.x系の方が良いみたいです。
また、jQueryに関しては、古いブラウザへの対応をするのなら1.x系の方が良いみたいです。
導入は以上です。
うまくいくとこんな感じになります。カッコいいですね。（笑）
あ、ちなみに入力内容のリセットボタンってHTML側で標準サポートされてたんですね。これ知らなくてMuselではいちいちリダイレクトでリセット機能を実現してました･･････。虚しい努力･･････。
では実際に動かしてみましょう。基本的な知識をきちんと知りたい人はWebデザイン初心者でもできる、Bootstrapの使い方超入門とか自力で読みましょう。たぶん5分で理解できます。
このシンプルな掲示板レベルでは、実はCSSフレームワークなんて用いなくても、というかむしろ用いない方が良いのかも知れませんが練習として利用を考えてみましょう。
ドロップダウンメニューとか便利そうですけど、この掲示板では使えなさそうだなぁ･･････。
ただ、例えば仮に顔アイコンとかを使うのであればMedia objectなんかが有用に使えそうですね。
あとはフォーム周り(Input groups)なんかは使えそうですね。
他にもGlyphiconsなんかは便利そうですね。
で、探してみたんですがさすがにページの縦分割とかは自前で実装する必要がありそうですね。
いまリリースされているBootstrap4αでは、ろんぐさん大好きなflex(box)が使えるみたいですが、まぁα版を使わなければいけないってほど急を要してないので自前で実装します。
まず、理想となる掲示板のデザインを考えてみましょう。普通だと面白くないので、以下のようなものを作ってみます。
こんな感じで実装してみましょう。移動というのはhidden指定で擬似的にやります。うちのトップページでやってるのと同じような感じですね。
これがめちゃくちゃ簡単に、直感的にできるのでフレームワークを使う恩恵は十二分にあります。
とりあえず現状はこんな感じです。アイコンまじ便利です。
もう現段階では書くことがなくなってしまったので、現状報告のみで。
たぶん来年にもう少しこのフレームワークについて触れる機会はあると思うんですが、その時にドロップダウンメニューとかで遊んでみようかなと思います。少なくともこの掲示板にそんな高度な機能は要らないのでつけません（笑）
新規投稿画面はとりあえず左に別枠としてとってますが、一般的な掲示板のようにページ上部においた方がもしかしたらやりやすいのかも知れませんね。どうなんでしょう。
ちなみに設計の時(#41)は画面を上下で分割していましたが、一般的な横置きディスプレイの場合可読領域がちょっと狭い気がしたのでやめました。