Wazly
Web Apps
headlines

Nore

概要


Nore(ノア)は、レスポンシブWebデザイン(RWD)を実現するために必要となるメディアクエリやフルードグリッドを採用したCSSフレームワークです。CSSプロパティの衝突を防ぎ、拡張性を高めるため、必要最小限で構成されています。

導入方法


ダウンロードしたファイルを展開し、nore.cssを読み込ませます。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width" initial-scale="1" maximum-scale="1" user-scalable="no">
        <link rel="stylesheet" href="/css/nore.css">
    </head>
</html>

グリッドによる可変幅


可変レイアウトにする要素に.g-*を、またその親要素に.noreを付加します。

例えば、1カラムレイアウトは次のようにします。

<div class="nore">
    <div class="g-1">
        <p>100%</p>
    </div>
</div>

水平に2つのブロックを並べたい、すなわち2カラムレイアウトにしたいときは次のようにします。

<div class="nore">
    <div class="g-1-2">
        <p>50%</p>
    </div>
    <div class="g-1-2">
        <p>50%</p>
    </div>
</div>

横幅1/3と2/3で埋めたい場合は次のようになります。

<div class="nore">
    <div class="g-1-3">
        <p>33.33333%</p>
    </div>
    <div class="g-2-3">
        <p>66.66667%</p>
    </div>
</div>

この分数方式の命名規則はPureのものと似ています。但し、約分はしてください。.g-2-5は許されますが、.g-4-10ではダメです。分母の最大値は16です。また、.g-0を指定した要素は非表示になります。

メディアクエリによる分岐


例えば、PCやタブレットでは3つのブロックを水平にならべ、スマートフォンでは垂直に並べたいという場合、次のように.g-*に続けて.sm-*で上書きします。

<div class="nore">
    <div class="g-1-3 sm-1">
        <p>Block 1</p>
    </div>
    <div class="g-1-3 sm-1">
        <p>Block 2</p>
    </div>
    <div class="g-1-3 sm-1">
        <p>Block 3</p>
    </div>
</div>

メディアクエリの命名規則は次の表に示す通りです。ブレイクポイントを示す各変数は変更することもできます(後述)。

名前 意味 適用範囲 (px)
g 全幅 any width
xs $xs以下 < 321
sm $sm以下 < 541
md $md以下 < 721
lg $lg以下 < 961
xl $xl以下 < 1201
sx $xs+1以上 > 320
ms $sm+1以上 > 540
dm $md+1以上 > 720
gl $lg+1以上 > 960
lx $xl+1以上 > 1200
sxsm $xs+1以上$sm以下 321 - 540
sxmd $xs+1以上$md以下 321 - 720
sxlg $xs+1以上$lg以下 321 - 960
sxxl $xs+1以上$xl以下 321 - 1200
msmd $sm+1以上$md以下 541 - 720
mslg $sm+1以上$lg以下 541 - 960
msxl $sm+1以上$xl以下 541 - 1200
dmlg $dm+1以上$lg以下 721 - 960
dmxl $md+1以上$xl以下 721 - 1200
glxl $lg+1以上$xl以下 961 - 1200

最外殻Nore


Noreのカラム幅は相対値指定にしてあるため、幅が無限に広がり、デザインの美しさを損なう可能性があります。これを防ぐためには、最も外側にあるNoreブロック(= 最外殻Nore)に.nore-outermostを指定してやります。次の例は、$outermost-width: 920pxの場合のコードになります。

<div class="nore nore-outermost">
    <div class="g-1-5">
        <p>このカラム幅は184pxより大きくなりません</p>
    </div>
    <div class="g-4-5 nore">
        <div class="g-1-4">
            <p>このカラム幅は184pxより大きくなりません</p>
        </div>
        <div class="g-3-4">
            <p>このカラム幅は552pxより大きくなりません</p>
        </div>
    </div>
</div>

変数


Noreの変数設定はSCSSから行います。/nore/_breakpoints.scssおよび/nore/_variables.scssが対象ファイルです。コンパイルにはCompassを使用してください。

応用例


このサイト全体がNoreを応用したものになっています。好例を見たい場合は、私のイラスト詳細ページのソースコードを参照してください。