内容へ移動
メモとかメモのようなものとか(By ルーキーの中のひと)
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
ODT 出力
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
トレース:
web:html_css:bluetrip
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== Blue Trip ====== 最近はやりのグリッドレイアウトのCSS フレームワークです。 {{:web:html_css:bluetrip_demo_img.png|Blue Trip }} もう、これなしでのweb作成は考えられません。 まぁ、今でもテーブルレイアウトで良いじゃないかという化石のような方もいらっしゃるようです…むろん禁止されているわけではありませんが、個人的には勘弁して欲しい。 [[http://bluetrip.org/|公式サイト]]によると、Blueprint、 Tripoli (hence the name)、 Hartija、 960.gs、Elementsなどに影響されたとのことです。 これらのうち、Blueprint、960.gsなども使ってみましたが、私はBrueTripが一番しっくりと来ました。 ===== 使い方 ===== HTMLのhead部に以下を記述します。 <code> <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="css/print.css" type="text/css" media="print" /> <!--[if IE]> <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" /> <![endif]--> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" /> </code> BrueTripでは全体を24列で構成します。 ヘッダーを横幅一杯、本体を3:1の2ペインで構成する場合は、以下の様になります。 <code> <div class="container"> <div id="header" class="span-24"> ヘッダーはここ </div> <div id="wrapper" class="span-24"> <div id="main" class="span-18"> メインがここ </div> <div id="sidebar" class="span-6 last"> サイドバーがここ </div> </div> </div> </code> ===== 参照 ===== [[http://bluetrip.org/|公式サイト]]
web/html_css/bluetrip.txt
· 最終更新: 2017/04/14 14:21 (外部編集)
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
ODT 出力
文書の先頭へ