記事一覧 12件中 1-10 を表示

レスポンシブWebデザインとは (2013-03-20)

このCMSサンプルは、管理画面およびWebページをレスポンシブWebデザインで作成しています。レスポンシブWebデザインとは、一つのHTMLコードで以下の3系統の端末全部に対応させる手法です。デスクトップPCタブレットスマート...

レスポンシブWebデザインの実体 (2013-03-18)

レスポンシブWebデザインとは、具体的には CSS(スタイルシート)を画面の幅ごとに指定する事によって行います。

1枚目画像

レスポンシブWebデザインの設定例:カラム幅 (2013-03-15)

例えばこのCMSサンプルページをデスクトップPCで見ると詳細ページでは本文を左側、画像を右側に寄せて表示させていますが、幅の狭いスマートフォンなどの端末では、画像は本文の下に回り込むようになっています。PC画面...

レスポンシブWebデザインの設定例:ボタン表示 (2013-03-15)

また、CMSサンプルの管理画面では、デスクトップPCのように幅が広い時は操作用のボタンは「アイコン+文字」で表示しますが、幅が狭くなると「アイコンのみ」に切り替わります。その他、幅を節約するためにテーブルヘッ...

レスポンシブWebデザインの具体的な手法 (2013-03-14)

これらのCSS設定を全て一から自前で行うのは、ページが複雑になると大変です。このサンプルでは、「Bootstrap」(ブートストラップ)というフレームワーク(※)のバージョン 3.x を利用して基本的なコーディングを省略して...

1枚目画像

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の設定を上書きしています。