レスポンシブWebデザインとは 2013-03-20 (水)
このCMSサンプルは、管理画面およびWebページをレスポンシブWebデザインで作成しています。
レスポンシブWebデザインとは、一つのHTMLコードで以下の3系統の端末全部に対応させる手法です。
- デスクトップPC
- タブレット
- スマートフォン（スマホ）
レスポンシブWebデザインの設定例：画像サイズ 2013-03-15 (金)
例えばこのCMSサンプルページではサムネール画像はデスクトップPCでは「縦150ピクセル」に揃えて表示していますが、幅の狭い端末では横に3つ並ぶように縮小して表示します。
PC画面上でもブラウザの幅を変更すると表示が切り替わりますので表示を試してみて下さい。
レスポンシブWebデザインの設定例：ボタン表示 2013-03-15 (金)
また、CMSサンプルの管理画面では、デスクトップPCのように幅が広い時は操作用のボタンは「アイコン＋文字」で表示しますが、幅が狭くなると「アイコンのみ」に切り替わります。その他、幅を節約するために「曜日」や「西暦年」も非表示にしています。
これも、PCでのブラウザの幅を変更すると表示が確認できますので試してみて下さい。
レスポンシブWebデザインの具体的な手法 2013-03-14 (木)
これらのCSS設定を全て一から自前で行うのは、ページが複雑になると大変です。このサンプルでは、「Bootstrap」（ブートストラップ）というフレームワーク（※）を利用して基本的なコーディングを省略しています。
※ページ制作用プレハブキットのようなものとお考えください。「CSSライブラリ」と呼ぶこともあります。
例えば、管理画面では入力中のフィールドに色の枠が表示されますが、これは Bootstrap の機能です。
また、そのような飾りの他、画面の横幅に従って項目を最適な配置に自動的に並べ替えしてくれる点が大変便利な点です。
Bootstrapの画像表示機能 2013-03-13 (水)
Bootstrapではまた、簡単に画像表示の設定ができます。
例えば「全一覧」では、3つの画像をそれぞれ「角丸」「円内」「枠内」に表示していますが、これらは<img> タグにクラス付するだけで行えます。
もちろん、この表示はサンプルですので、実際の運用ではどれかに統一して使用する事が可能です。
Bootstrapのその他の便利な機能 2013-03-13 (水)
その他、管理画面のボタンの色の指定や、マウスをかざすと色が変わる表の構成なども Bootstrap の機能を使うと制作時にはCSSクラス付をするだけで実現できます。
ややもすると没個性なページになってしまいますが、ある程度汎用の操作性を保ったまま、独自のCSSスタイルで上書きする事が可能です。
例えばこのCMSサンプルでは、webdir/parts/css/admin.css や webdir/parts/css/site.css といったファイルで自作のCSS定義をしています。
Bootstarpを使ったページネーション（前後移動リンク）のカスタマイズ 2013-02-18 (月)
Bootstrapには「ページネーション（前後移動リンク）」を簡単に表示するためのクラス定義もされています。このサンプルでは、「全一覧」のページの上の方にはページ番号でのページ移動リンクを、下の方には「前へ」「次へ」という順次移動リンクを付けています。
ページ移動リンクは、クラス設定により簡単にセンタリンクや右寄せ、サイズの変更が可能です。
Bootstrapのクラスによるページネーションデザインの変更 2013-02-18 (月)
初期設定のテンプレートには「<div class="pagination">」というクラスでページネーション（ページの上の方にあるリンク）が定義されています。このクラスを付けておくだけで、サンプルのようにページのリンクがボックス内に並んで表示されますが、これを変更するには以下のようにクラスを足していきます。
大きなサイズでページ番号を表示
<div class="pagination pagination-large">
小さなサイズでページ番号を表示
<div class="pagination pagination-small">
ミニサイズでページ番号を表示
<div class="pagination pagination-mini">
ページ番号をセンタリング
<div class="pagination pagination-centered">
ページ番号を右寄せ
<div class="pagination pagination-right">