Concrete5スターターテーマ考察
Upcoming SlideShare
Loading in...5
×
 

Concrete5スターターテーマ考察

on

  • 578 views

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

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

Statistics

Views

Total Views
578
Views on SlideShare
309
Embed Views
269

Actions

Likes
4
Downloads
0
Comments
0

3 Embeds 269

http://www.pictron.net 256
http://s.deeeki.com 9
https://twitter.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Concrete5スターターテーマ考察 Concrete5スターターテーマ考察 Presentation Transcript

  • シンプルなベースから 作り始めたい人のための ! スターターテーマ考察 pictron
  • サイトを新規で構築するのにベースとなるテーマには デザイン要素がなるべく含まれていないほうが 効率がいいと思っている方。
 ただグリッドシステムやスタイルシートのリセットな んかはあったほうがいいかも? そんなスターターテーマの考察あれこれ…
  • Blank HTML5 Reset Template FREE http://html5reset.org/の仕様に基づいたhtml5仕様でリセットした
 まさに真っ白なテーマ Modernizr,IE7/8 classなどをデフォルトで実装。 主な仕様はhttp://html5reset.org/参照
  • • 条件付きコメント(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などは設定されていない • ページタイプは全幅と右サイトバーの2段組みの2つ • Boilerplateサイトのベースのコードとは異なるナビ用のスタイルは
 割愛されている。
  • Blank HTML5 Boilerplate faviconやアプリアイコン、条件付きコメントなどの セオリーはおさえつつ 基本的な段落ちのメディアクエリーのひな形を参考にしながらも シンプルなテーマがいい人
  • Blank 960 Grid System Theme FREE http://960.gsの仕様に準拠。レスポンシブは考慮されていないが
 モバイルを別テーマにする場合などPCのみで考えると オーソドックスなグリッドシステムでレガシーブラウザにも対応 GRID
  • • 条件付きコメント(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でブレイクする仕様ですので ブロックデザインのCSSクラス名にgrid_8などを追加し hrやdivでclearで段をクリアすればレイアウトすることが可能。
  • Basic Bootstrap FREE RESPONSIVE http://archive.goradiantweb.com/blog/design/free-basic-bootstrap-theme/20$の有料テーマFlatstrapのマイナーバージョン、カスタムテンプレートで グリッドやメニューを適用できる。Bootstrapのバージョンはv2.3.2 GRID
  • • 初期化および仕様はBootstrap2.3.2仕様 • ページタイプ6種類、オートナビブロック、サーチブロック付属 • ページタイプhomeのカルーセル部分はブロック化されていないソースに記述。 • ナビはカスタムテンプレートFlatstrap headerが適用できる • pbpostというページタイプはProblogというブログ作成の有料プラグイン • typegrapfyはBootstrapの解説ページ
  • 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>
  • Basic Bootstrap 前バージョンながらCSS Frameworkの恩恵を受けれて ページタイプやブロックのテンプレートなど 無料テーマとしてはきちんと実装されている。 2.3.2でいいのであれば選択肢のひとつ。
  • Bootstrap 40$ RESPONSIVE そのものずばりの名前の40$の有料テーマ。 Bootstrap 3でありBootstrapのテンプレートのレイアウトも ページタイプとして選択してすぐレイアウトできる。 ページタイプ、ブロック、カスタムテンプレートなども充実。 GRID
  • • 初期化および仕様はBootstrap3に準拠 • Theme Settingで仕様を決定 • BootstrapのPresetもDashbordから変更可能 • ページの設定のカスタム属性からスキンやナビゲーションタイプ、エディタ へのクラスも追加される • home4種類を加えたページタイプ13種類 • オートナビ、ページリスト、コンテントなどのテンプレート • eCommerceプラグイン(有料)向けのテンプレート • オートナビプロ、ページリストプロのテンプレート • IE8に対応させる場合はhtml5shiv.jsとrespond.min.jsを追加して対応。
  • 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>
  • 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列
  • 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>
  • 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 class="row"> </div> <div class="row"> </div> <div class="row"> </div>
  • 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列
  • • 初期化および仕様はFoundation5に準拠 • Foudation5の • オリジナルブロックが16個テーマに付属 • ページタイプ15種類 • オートナビのテンプレート4種類 • プロブログのテンプレート対応 • IE8以下は未対応
  • Foundation 5 有料だけあって、Foundation 5の標準仕様を すぐ実装できるようにページタイプ、テンプレートなども 充実。各パーツを挿入して設定するだけで実現できる オリジナルのブロックも多数実装。 Foundation5の機能を使うことでコードレスである程度の サイト構築が可能。