Loading...

htmlコーディング 小棹制作所

この記事がよく読まれてます

tumblrでの企画など、お手伝いします
  • fullPage.js ページスクロールで紙芝居のように魅せるWebページが作れるjQueryプラグイン (37,642Views)
  • 初代から大幅にパワーアップして帰ってきた! Owl Carousel 2の紹介とかんたんな設置方法 (19,067Views)
  • 多分一番簡単!ドロワーメニューを実装するためのjQueryプラグイン「drawer」 (18,531Views)
  • [メモ]Macのメールアプリで自動転送(もしくはリダイレクト)設定をする方法 (16,635Views)
  • tumblrのオリジナルテーマ作成入門 tumblrの独自タグを理解しよう (16,069Views)
  • wow.jsとanimate.cssを組み合わせると、かんたんに、かっこいい動きがあるWebページを作れます。 (15,954Views)
  • スマートフォンサイトでよく見る横からニョキッと出現するスライドメニューの実装なら「Sidr」で (15,559Views)
  • 国産のtumblrポートフォリオ用テーマ “Illustfolio2″ がすごくいい! (11,889Views)
  • シンプルだから機能もデザインもかんたんにカスタマイズできるjQueryのカルーセルプラグイン “Owl Carousel” (11,284Views)
  • ミュージシャン・バンド・アーティスト用Webサイト作成のためのTumblrテーマを作ったので配布します (11,241Views)
  • さくっとヘッダー固定のhtmlテーブルが作れるjQueryプラグイン「Fixed Header Table」 (11,035Views)
  • 企業ホームページっぽいレイアウトのTumblrのテーマを作ったので無料配布します (10,719Views)
  • 翻訳機能をWebサイトに埋め込む方法 (10,426Views)
  • Twitter Bootstrapが3にアップグレードして、さらに使いやすくなった (10,333Views)
  • tumblrのオリジナルテーマをゼロから作るのは心が折れるので、スターターテーマを使おう (9,898Views)
  • Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで (8,922Views)
  • 細かいカスタマイズができるCSSフレームワーク、”Gumby FRAMEWORK” (6,895Views)
  • Twitter BootstrapベースのWordPress無料テーマ “Roots” (6,612Views)
  • tumblrのテーマに無限スクロール機能を追加する方法 (6,051Views)
  • 【Featherlight.js】テキストをライトボックスに表示できるjQueryプラグイン【jQueryプラグイン】 (5,748Views)
  • 【fitgrd】グリッドレイアウト作成だけに特化したCSSフレームワーク

    2014年08月25日(月)
    496Views

    この記事は執筆から1年以上経過しており、情報が古い可能性があります。

    レスポンシブ対応Webサイト制作のグリッドレイアウト作成だけに目的を絞ったCSSフレームワーク、「fitgrd」の紹介です。

    fitgrdとは

    fitgrdはCSSフレームワークです。
    (fridgrdを用いて作られた公式サイト .fitgrid – the sexy responsive css grid system)
    _fitgrid_-_the_sexy_responsive_css_grid_system 2

    CSSフレームワークで一番有名なのはおそらく「Twitter Bootstrap」でしょう。

    TwitterBootstrapとfitgrdの違い

    Twitter Bootstrapでは、あらかじめhtmlタグなどに細かくにスタイルがくっついています。
    たとえば、h1は太字で大きいフォントが設定されている等。

    このやり方は便利である反面、機能の一部だけを使いたいときには、不便です。

    fitgrdはBootstrapとは逆に、レスポンシブ対応Webサイト制作に用いられるグリッドデザインの作成だけに機能を絞ったフレームワークです。
    これによりfitgrdには、従来のフレームワークよりも、軽量&扱いやすい、というメリットがあります。

    fitgrdの使い方

    まずは、下記githubページよりfitgrdダウンロードします。
    jayalai/fitgrd

    jayalai_fitgrd

    ファイルの読み込み

    ダウンロードしたzipファイルを解凍後、フォルダ内「fitgrd.pack.css」をhtmlファイルに読み込ませます。

    完璧に動作するようなコード例

    以下、fitgrdを動作させるためのhtmlコードの書き方です。

    <header>
        <div class="center">
            <div class="row">
                <section class="fg2">
                    your logo
                </section>
                <section class="fg10">
                    page navigation would go here
                </section>
            </div>
        </div>
    </header>
    
    <article class="your-class-name">
        <div class="center">
            <div class="row">
                <section class="fg4"> lorem ipsum ... </section>
                <section class="fg4"> lorem ipsum ... </section>
                <section class="fg4"> lorem ipsum ... </section>        
            </div>
        </div>
    </article>
    
    <footer>
        <div class="center">
            <div class="row">
                <section class="fg6"> footer copyright </section>
                <section class="fg6"> footer navigation </section>
            </div>
        </div>
    </footer>
    

    コード例解説

    まず、大きくコンテナーを作成します。
    例:header div article footer 等

    次の上記コンテナーの中にclass名をcenterとしたdivを配置します。

    さらに、centerのなかにclass名をrowとしたdivを配置します。

    そのなかに、クラス名fg1〜fg12のdivを配置していきます。
    このfg1〜fg12は、コンテナーを12等分とし、そのなかのどのくらいの割合を1つのブロックとするかを指定します。

    _fitgrid_-_the_sexy_responsive_css_grid_system

    まとめ

    この記事のまとめはありません。

    おわりに

    この記事はあなたのお役にたてましたか?
    もしよろしければ・・・

    この記事をみんなに教える?


    筆者に何か教える?

    たとえば、 小棹制作所はこんなこと↓を知りたがっているようです。

    feedlyでブログを購読する?

    follow us in feedly

    筆者にメーッセージを送る?

    なんでもご自由に書いて送ってください。
    ご質問等返信を希望の場合は、メールアドレス等返信先の記載をお忘れなく。

    チェックを入れて送信してください

    Copyright (C) 2012 小棹制作所.
    All rights reserved.