レスポンシブWebデザインとは (2013-03-20)
このCMSサンプルは、管理画面およびWebページをレスポンシブWebデザインで作成しています。レスポンシブWebデザインとは、一つのHTMLコードで以下の3系統の端末全部に対応させる手法です。デスクトップPCタブレットスマート...
レスポンシブWebデザインの実体 (2013-03-18)
レスポンシブWebデザインとは、具体的には CSS（スタイルシート）を画面の幅ごとに指定する事によって行います。
レスポンシブWebデザインの設定例：カラム幅 (2013-03-15)
例えばこのCMSサンプルページをデスクトップPCで見ると詳細ページでは本文を左側、画像を右側に寄せて表示させていますが、幅の狭いスマートフォンなどの端末では、画像は本文の下に回り込むようになっています。PC画面...
レスポンシブWebデザインの設定例：ボタン表示 (2013-03-15)
また、CMSサンプルの管理画面では、デスクトップPCのように幅が広い時は操作用のボタンは「アイコン＋文字」で表示しますが、幅が狭くなると「アイコンのみ」に切り替わります。その他、幅を節約するためにテーブルヘッ...
レスポンシブWebデザインの具体的な手法 (2013-03-14)
これらのCSS設定を全て一から自前で行うのは、ページが複雑になると大変です。このサンプルでは、「Bootstrap」（ブートストラップ）というフレームワーク（※）のバージョン 3.x を利用して基本的なコーディングを省略して...
Bootstrapの画像表示機能 (2013-03-13)
Bootstrapではまた、簡単に画像表示の設定ができます。例えばこのページでは、3つの画像をそれぞれ「角丸」「円内」「枠内」に表示していますが、これらは<img> タグにクラス付するだけで行えます。もちろん、この表示...
Bootstrapのその他の便利な機能 (2013-03-13)
その他、管理画面のボタンの色の指定や、マウスをかざすと色が変わる表の構成なども Bootstrap の機能を使うと制作時にはCSSクラス付をするだけで実現できます。ややもすると没個性なページになってしまいますが、ある程度...
Bootstarpを使ったページネーション（前後移動リンク）のカスタマイズ (2014-03-03)
Bootstrapには「ページネーション（前後移動リンク）」を簡単に表示するためのクラス定義もされています。このサンプルでは、「全一覧」のページの上の方にはページ番号でのページ移動リンクを、下の方には「前へ」「次へ...
Bootstrapのクラスによる全一覧（目次）のページネーションデザインの変更 (2014-03-03)
ページ移動リンクは、クラス設定により簡単にセンタリンクや右寄せ、サイズの変更が可能です。全一覧の初期設定のテンプレート（templates/article/article_list.html）には「<ul class="pagination">」というクラスでページネ...
サイトのCSSでBootstrapのスタイルを上書きする方法 (2013-03-10)
このCMSサンプルの新着情報（短い一覧）では、Bootstrapの表示をほとんど使わずに、サイト独自の設定を webdir/parts/css/site.css に定義してBootstrapの設定を上書きしています。