💃🏿 📑 ⚛️ 設計図 👰🏻 🤱🏿 🤲🏽

ブループリントは非常に興味深いグリッドレイアウトフレームワークです。IEを考えなくても非常に複雑なページを簡単に作成できるため、個人的には便利です。

Google Codeのプロジェクトページからアーカイブをダウンロードします。

アーカイブにはブループリントフォルダーがあり、そこにフレームワークのメインファイルが含まれ、それらをページに接続します。

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

フレームワークは、スペース全体を縦縞に分割します。デフォルトでは24ですが、コンテンツは幅に1つ以上の縦縞を占める列（列クラス）に分割されます。

すべての列はコンテナクラス内にある必要があります

 <div class="container showgrid"> </div>

また、かなり興味深いshowgridクラスにすぐに注意を払う必要があります。これはレイアウト中に使用され、コンテナまたは他の要素の背景に対してグリッドを表示します。

クラスcols-14、cols-15 ... cols-23。列の数を示します。ページ幅（私が言ったように、24列がデフォルトで設定されます）。

次に列を扱いましょう：

 <div class="container showgrid"> <div class="column span-24 last"> <h1></h1> </div> </div>

ご覧のとおり、列は列クラスによって示されます。クラスspan-1、span-2 ... span-24は、列の幅を示すために使用されます。最後のクラスは、列が右側の次の要素で補完されないことを意味します。

その結果、見出しのあるページの幅全体の列を取得しました。それでは少し複雑にしましょう。いくつかの情報も右側に記載しましょう。

 <div class="container showgrid"> <div class="heading container"> <div class="column span-20"> <h1></h1> </div> <div class="column span-4 last"> <p>-</p> </div> </div> ... </div>

これで、ヘッダーが2つの部分に分割されました。 cssでヘッダー全体の背景を設定できるように、見出しクラスを追加しました。

 .heading { background:#88D; padding-top:10px; }

prepend-xクラスとappend-xクラスを使用して、列をそれぞれ左と右の空の列で補うことができます（xは列の数です）。

たとえば、4列の左列にインデント列を作成してみましょう。

 <div class="container"> <div class="heading container"> <div class="prepend-4 column span-16"> <h1></h1> </div> <div class="column span-4 last"> <p>-</p> </div> </div> </div>

列幅の合計がコンテナの幅を超えてはならないことに注意する必要がありますが、追加と追加も幅に含まれます！

次に、左右のメニュー、2列のコンテンツ、およびフッターを含むページを作成します。

 <body> <div class="container"> <div class="heading container"> <div class="prepend-4 column span-16"> <h1></h1> </div> <div class="column span-4 last"> <p>-</p> </div> </div> <hr class="space"/> <div id="view"> <div class="vp container"> <div class="menu prepend-1 column span-3"> <h3></h3> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div class="content column span-16"> <h2>Content</h2> <div class="prepend-1 span-6 colborder"> <p>Lorus...</p> </div> <div class="span-7"><p>Ipsium...</p></div> </div> <div class="menu2 prepend-1 column span-3 last"> <h3>2</h3> <ul> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div> </div> </div> <hr class="clear"/> <div class="span-24 prepend-1 column last">  </div> </div> </body>

hrタグでクリアクラスを使用して、ワイドギャップストリップを作成しました。コンテンツの左半分で歌姫に渡すコルボーダークラスは、列の右側に太い（列全体）分割バーを追加します。境界線もあります-ちょうど右側の線です。

push-1 ... push-4およびpull-1 ... pull-4クラスを使用すると、現在の列を次のプッシュ（プッシュ）にプッシュしたり、その逆に前の列（プル）にプルしたりできます。

次回は、ブループリントの活版印刷クラスとフォームを設計するためのクラスについて説明します。

著者からの例：

PS グリッドを使用したレイアウトのトピックは、すでにハブで取り上げられています。

設計図

More articles: