0
シンプルなベースから
作り始めたい人のための
!
スターターテーマ考察
pictron
サイトを新規で構築するのにベースとなるテーマには
デザイン要素がなるべく含まれていないほうが
効率がいいと思っている方。

ただグリッドシステムやスタイルシートのリセットな
んかはあったほうがいいかも?
そんなスターターテーマの考察あれこれ…
Blank HTML5 Reset Template
FREE
http://html5reset.org/の仕様に基づいたhtml5仕様でリセットした

まさに真っ白なテーマ
Modernizr,IE7/8 classなどをデフォルトで実装。...
• 条件付きコメント(for IE)
• CSSを初期化はreset.css
• Modernizr.js
• モバイル対応のviewportなどはコメントで併記
• 右サイトバーの2段組みのみ
Blank HTML5 Reset Template
レイアウトはすべて自分で構築していきたいので
テーマのベースになるのはHTML5ベースのひな形のみの
まさに真っ白なテーマがいい人
Blank HTML5 Boilerplate
FREE RESPONSIVE
グリッドシステムではなく、一般的なメディアクエリーでのカラム指定。

主な仕様はhttp://html5boilerplate.com/参照
• 条件付きコメント(for IE)
• CSSを初期化はnormalize.css
• Modernizr.js
• 480px, 768px,960pxの段落ち

画像のmax-widthなどは設定されていない
• ページタイプは全幅と右サ...
Blank HTML5 Boilerplate
faviconやアプリアイコン、条件付きコメントなどの
セオリーはおさえつつ
基本的な段落ちのメディアクエリーのひな形を参考にしながらも
シンプルなテーマがいい人
Blank 960 Grid System Theme
FREE
http://960.gsの仕様に準拠。レスポンシブは考慮されていないが

モバイルを別テーマにする場合などPCのみで考えると
オーソドックスなグリッドシステムでレガシーブラウザ...
• 条件付きコメント(for IE)
• Reset CSS
• 960.cssでのグリッドレイアウト
• 画像のmax-widthなどは設定されていない
• デフォルトでコンテナの12分割のグリッド
• ブレイクはclearクラス
960.cssでのグリッドレイアウト
12 grid
<div class="container_12">
.grid_12
</div>
.clear
.grid_8.grid_4
.clear
.grid_4 .grid_4 .grid_4
グリッドクラスをブロックCSS
スタイルで設定
クリアクラスをHTMLブロッ
クで入力
Blank 960 Grid System Theme
スマホ用のテーマを別にするかPCだけのテーマなどで
レイアウトをIEの下位互換まで求められた場合に
以外に有用かもしれません。
段組みをタグ囲みでなくclearでブレイクする仕様ですので
...
Basic Bootstrap
FREE RESPONSIVE
http://archive.goradiantweb.com/blog/design/free-basic-bootstrap-theme/20$の有料テーマFlatstrapの...
• 初期化および仕様はBootstrap2.3.2仕様
• ページタイプ6種類、オートナビブロック、サーチブロック付属
• ページタイプhomeのカルーセル部分はブロック化されていないソースに記述。
• ナビはカスタムテンプレートFlatstr...
Bootstrap2.3.2でのグリッドレイアウト
12 grid
<div class="container">
.span12
</div>
.span8.span4
.span4 .span4 .span4
<div class="row...
Basic Bootstrap
前バージョンながらCSS Frameworkの恩恵を受けれて
ページタイプやブロックのテンプレートなど
無料テーマとしてはきちんと実装されている。
2.3.2でいいのであれば選択肢のひとつ。
Bootstrap
40$ RESPONSIVE
そのものずばりの名前の40$の有料テーマ。
Bootstrap 3でありBootstrapのテンプレートのレイアウトも
ページタイプとして選択してすぐレイアウトできる。
ページタイプ、ブロック、...
• 初期化および仕様はBootstrap3に準拠
• Theme Settingで仕様を決定
• BootstrapのPresetもDashbordから変更可能
• ページの設定のカスタム属性からスキンやナビゲーションタイプ、エディタ
へのクラ...
Bootstrap3でのグリッドレイアウト
12 grid
<div class="container">
.col-md-12
</div>
.col-md-8.col-md-4
.col-md-4 .col-md-4 .col-md-4
<...
Bootstrap3でのグリッドレイアウト
Max container
width
None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
...
Bootstrap3でのページタイプのコードサンプル
<div class="row">!
 <div class="col-md-3 col-sm-3 col-lg-3">!
 <?php !
 $a = new Area('Sidebar'...
Bootstrap
有料だけあって、Bootstrap3の標準テンプレートレベルの
実装はすぐできるようにページタイプ、テンプレートなども
充実、メジャー有料プラグイン対応も
ただBootstrapボタンのクラスや、カルーセルなどをGUIで入れ...
セットで125$→82.5$
自分でコードやクラスを追加してしまえば
すぐできますが
左にセットを購入すれば、コードレスで
Bootstrapの仕様を実装できます。
Foundation 5
45$ RESPONSIVE
http://foundation.zurb.com/
CSSフレームワークFoundationに準拠したテーマ。
ページタイプ、ブロック、カスタムテンプレートなども充実。
GRID
Foundation 5でのグリッドレイアウト
12 grid
<div class="container">
.large-12
</div>
.large-8.large-4
.large-4 .large-4 .large-4
<div ...
Foundation5でのグリッドレイアウト
Range 0, 640px 641px, 1024px 1025px, 1440px 1441px, 1920px
Class prefix .small- .medium- .large- .x...
• 初期化および仕様はFoundation5に準拠
• Foudation5の
• オリジナルブロックが16個テーマに付属
• ページタイプ15種類
• オートナビのテンプレート4種類
• プロブログのテンプレート対応
• IE8以下は未対応
Foundation 5
有料だけあって、Foundation 5の標準仕様を
すぐ実装できるようにページタイプ、テンプレートなども
充実。各パーツを挿入して設定するだけで実現できる
オリジナルのブロックも多数実装。
Foundation5の機...
Upcoming SlideShare
Loading in...5
×

Concrete5スターターテーマ考察

2,831

Published on

シンプルなベースから作り始めたい人のためのConcrete5スターターテーマ考察

Published in: Technology

Transcript of "Concrete5スターターテーマ考察"

  1. 1. シンプルなベースから 作り始めたい人のための ! スターターテーマ考察 pictron
  2. 2. サイトを新規で構築するのにベースとなるテーマには デザイン要素がなるべく含まれていないほうが 効率がいいと思っている方。
 ただグリッドシステムやスタイルシートのリセットな んかはあったほうがいいかも? そんなスターターテーマの考察あれこれ…
  3. 3. Blank HTML5 Reset Template FREE http://html5reset.org/の仕様に基づいたhtml5仕様でリセットした
 まさに真っ白なテーマ Modernizr,IE7/8 classなどをデフォルトで実装。 主な仕様はhttp://html5reset.org/参照
  4. 4. • 条件付きコメント(for IE) • CSSを初期化はreset.css • Modernizr.js • モバイル対応のviewportなどはコメントで併記 • 右サイトバーの2段組みのみ
  5. 5. Blank HTML5 Reset Template レイアウトはすべて自分で構築していきたいので テーマのベースになるのはHTML5ベースのひな形のみの まさに真っ白なテーマがいい人
  6. 6. Blank HTML5 Boilerplate FREE RESPONSIVE グリッドシステムではなく、一般的なメディアクエリーでのカラム指定。
 主な仕様はhttp://html5boilerplate.com/参照
  7. 7. • 条件付きコメント(for IE) • CSSを初期化はnormalize.css • Modernizr.js • 480px, 768px,960pxの段落ち
 画像のmax-widthなどは設定されていない • ページタイプは全幅と右サイトバーの2段組みの2つ • Boilerplateサイトのベースのコードとは異なるナビ用のスタイルは
 割愛されている。
  8. 8. Blank HTML5 Boilerplate faviconやアプリアイコン、条件付きコメントなどの セオリーはおさえつつ 基本的な段落ちのメディアクエリーのひな形を参考にしながらも シンプルなテーマがいい人
  9. 9. Blank 960 Grid System Theme FREE http://960.gsの仕様に準拠。レスポンシブは考慮されていないが
 モバイルを別テーマにする場合などPCのみで考えると オーソドックスなグリッドシステムでレガシーブラウザにも対応 GRID
  10. 10. • 条件付きコメント(for IE) • Reset CSS • 960.cssでのグリッドレイアウト • 画像のmax-widthなどは設定されていない • デフォルトでコンテナの12分割のグリッド • ブレイクはclearクラス
  11. 11. 960.cssでのグリッドレイアウト 12 grid <div class="container_12"> .grid_12 </div> .clear .grid_8.grid_4 .clear .grid_4 .grid_4 .grid_4
  12. 12. グリッドクラスをブロックCSS スタイルで設定 クリアクラスをHTMLブロッ クで入力
  13. 13. Blank 960 Grid System Theme スマホ用のテーマを別にするかPCだけのテーマなどで レイアウトをIEの下位互換まで求められた場合に 以外に有用かもしれません。 段組みをタグ囲みでなくclearでブレイクする仕様ですので ブロックデザインのCSSクラス名にgrid_8などを追加し hrやdivでclearで段をクリアすればレイアウトすることが可能。
  14. 14. Basic Bootstrap FREE RESPONSIVE http://archive.goradiantweb.com/blog/design/free-basic-bootstrap-theme/20$の有料テーマFlatstrapのマイナーバージョン、カスタムテンプレートで グリッドやメニューを適用できる。Bootstrapのバージョンはv2.3.2 GRID
  15. 15. • 初期化および仕様はBootstrap2.3.2仕様 • ページタイプ6種類、オートナビブロック、サーチブロック付属 • ページタイプhomeのカルーセル部分はブロック化されていないソースに記述。 • ナビはカスタムテンプレートFlatstrap headerが適用できる • pbpostというページタイプはProblogというブログ作成の有料プラグイン • typegrapfyはBootstrapの解説ページ
  16. 16. Bootstrap2.3.2でのグリッドレイアウト 12 grid <div class="container"> .span12 </div> .span8.span4 .span4 .span4 .span4 <div class="row"> </div> <div class="row"> </div> <div class="row"> </div>
  17. 17. Basic Bootstrap 前バージョンながらCSS Frameworkの恩恵を受けれて ページタイプやブロックのテンプレートなど 無料テーマとしてはきちんと実装されている。 2.3.2でいいのであれば選択肢のひとつ。
  18. 18. Bootstrap 40$ RESPONSIVE そのものずばりの名前の40$の有料テーマ。 Bootstrap 3でありBootstrapのテンプレートのレイアウトも ページタイプとして選択してすぐレイアウトできる。 ページタイプ、ブロック、カスタムテンプレートなども充実。 GRID
  19. 19. • 初期化および仕様はBootstrap3に準拠 • Theme Settingで仕様を決定 • BootstrapのPresetもDashbordから変更可能 • ページの設定のカスタム属性からスキンやナビゲーションタイプ、エディタ へのクラスも追加される • home4種類を加えたページタイプ13種類 • オートナビ、ページリスト、コンテントなどのテンプレート • eCommerceプラグイン(有料)向けのテンプレート • オートナビプロ、ページリストプロのテンプレート • IE8に対応させる場合はhtml5shiv.jsとrespond.min.jsを追加して対応。
  20. 20. Bootstrap3でのグリッドレイアウト 12 grid <div class="container"> .col-md-12 </div> .col-md-8.col-md-4 .col-md-4 .col-md-4 .col-md-4 <div class="row"> </div> <div class="row"> </div> <div class="row"> </div>
  21. 21. Bootstrap3でのグリッドレイアウト Max container width None (auto) 750px 970px 1170px Class prefix .col-xs- .col-sm- .col-md- .col-lg- おおまかな分類 スマートフォン タブレット デスクトップ ラージ col-xs-6 col-md-4 <div class="row"> </div> col-xs-6 col-md-4 col-xs-6 col-md-4 モバイルサイズでは50%幅の2列、デスクトップサイズになると3列
  22. 22. Bootstrap3でのページタイプのコードサンプル <div class="row">!  <div class="col-md-3 col-sm-3 col-lg-3">!  <?php !  $a = new Area('Sidebar');!  $a->display($c);!  ?>!  </div>!  <div class="col-md-9 col-sm-9 col-lg-9">!  <?php !  $a = new Area('Main');!  $a->display($c);!  ?>!  </div>! </div>
  23. 23. Bootstrap 有料だけあって、Bootstrap3の標準テンプレートレベルの 実装はすぐできるようにページタイプ、テンプレートなども 充実、メジャー有料プラグイン対応も ただBootstrapボタンのクラスや、カルーセルなどをGUIで入れる ところは別売!
  24. 24. セットで125$→82.5$ 自分でコードやクラスを追加してしまえば すぐできますが 左にセットを購入すれば、コードレスで Bootstrapの仕様を実装できます。
  25. 25. Foundation 5 45$ RESPONSIVE http://foundation.zurb.com/ CSSフレームワークFoundationに準拠したテーマ。 ページタイプ、ブロック、カスタムテンプレートなども充実。 GRID
  26. 26. Foundation 5でのグリッドレイアウト 12 grid <div class="container"> .large-12 </div> .large-8.large-4 .large-4 .large-4 .large-4 <div class="row"> </div> <div class="row"> </div> <div class="row"> </div>
  27. 27. Foundation5でのグリッドレイアウト Range 0, 640px 641px, 1024px 1025px, 1440px 1441px, 1920px Class prefix .small- .medium- .large- .xlarge おおまかな分類 スマートフォン タブレット デスクトップ ラージ small6 medium4 <div class="row"> </div> small6 medium4 small6 medium4 モバイルサイズでは50%幅の2列、デスクトップサイズになると3列
  28. 28. • 初期化および仕様はFoundation5に準拠 • Foudation5の • オリジナルブロックが16個テーマに付属 • ページタイプ15種類 • オートナビのテンプレート4種類 • プロブログのテンプレート対応 • IE8以下は未対応
  29. 29. Foundation 5 有料だけあって、Foundation 5の標準仕様を すぐ実装できるようにページタイプ、テンプレートなども 充実。各パーツを挿入して設定するだけで実現できる オリジナルのブロックも多数実装。 Foundation5の機能を使うことでコードレスである程度の サイト構築が可能。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×