Foundationを使ったレスポンシブ対応Webサイトの作り方（画像篇）

サイトを作ろうかと思って、ハテ画像はどうすればレスポンシブ対応になるんだろうと考えましたが、誰しも思いつくように
「最大画像幅の時のグリッド幅よりも大きな幅の画像を用意してwidthの指定を無くす」
というのが正解のようです。おそらくこれは他のレスポンシブフレームワークでも同様でしょう。

例えばFoundationの場合、

<div class="row">
<div class="large-6 columns">
<div class="panel"><p>Six columns</p></div>
</div>
<div class="large-6 columns">
<div class="panel"><p>Six columns</p></div>
</div>
</div>

とすると、ラージサイズの場合にちょうど半分のカラムを設定出来ます。
imgタグに必要な属性はaltのみですので、width,heightは取っ払いましょう。
width,heightの指定がないと描画が遅いとされますが、cssでの指定はどうなんでしょう。
今度機会があったら試してみます。

<div class="row">
<div class="large-6 columns">
<div class="panel"><p><img src="img/2d66ad07.jpg" alt="" /></p></div>
</div>
<div class="large-6 columns">
<div class="panel"><p>Six columns</p></div>
</div>
</div>

とすると
ちょっと大きさがあっていないのでわかりにくいかもしれませんが

こうなって・・・

スモールサイズ幅に入るとフルカラムになる設定なので、一度画像が大きくなり・・・

最後には

こうなります。
ちなみに、カラム幅よりも小さいwidthを指定すると効きますが、カラム幅よりも大きいwidthを指定すると強制的にカラム幅にリサイズされます。

で、面白いのがブロックグリッドという機能です。

ブロックグリッド
ブロックグリッドは、ひとつのグリッドの中に均等に画像を配置したい、なんて場合に便利です。
通常だと

<div class="large-12 columns">
<div class="large-3 columns"<>img></div>
<div class="large-3 columns"><img></div>
<div class="large-3 columns"><img></div>
<div class="large-3 columns"><img></div>
</div>

としなければいけないところを、

<div class="large-12 columns">
<div class="panel">
<ul class="small-block-grid-4">
<li><img></li>
<li><img></li>
<li><img></li>
<li><img></li>
</ul>
</div>
</div>

と書くことができます。
small-block-grid-4が、1カラム内を何カラムにわけるかの指定で、
small-block-grid-4の場合は、

small-block-grid-3の場合は、

small-block-grid-2の場合は、

のようになります。
なかなか便利ですね。

Foundationを使ったレスポンシブ対応Webサイトの作り方（ヘッダ周りの調整篇）

自分のサイトをリニューアルしようと考えていまして、私自身はレスポンシブ反対派なんですが、まともに作ったこともないのに反対ってのもなーと思って、レスポンシブフレームワークを試してみることにしました。
とはいえ、Bootstrapはデザインがもうありあり過ぎて嫌なので、良さげなフレームワークないかなーということでFoundationにたどり着きました。
ただ、探し方が悪いのか元のDocumentがしっかりしているから不要なのか、あまり日本語サイトでチートシートのようなものを提供しているサイトも少ないので、しばらくサイトリニューアルをしながらFoundationネタで攻めて行きたいと思います。
現在構築中のFoundationのバージョンは4.2.3です。

さて、Foundationのことを調べると必ず出てくるのがカラムを12に区切って合計で12になるようにクラス指定をしてあげる、って話ですが、その辺の解説は余所のサイトにお願いして、今回はヘッダを掘り下げて行きたいと思います。

あたりまえですがFoundationにもドキュメントはしっかり用意されていまして、Foundation 4 Documentationを先に読んでから作業することをオススメします。
ヘッダに関してはTop Barに記述されています。

このヘッダは、このドキュメントにも使われている黒帯のヘッダ部分です。

シンプルと言えばシンプル、イマ風と言えばイマ風。

このドキュメントページにある、「Sticky Top Bar」のコードを一度置いてみるとわかりやすいですが、ヘッダ内にいろいろ配置できます。
・見出し（左位置固定アイテム：class名がtitle-area）
・普通のメニュー（<li>の中に記述）
・下層メニューがアコーディオンで表示されるリンク
・検索窓
・ボタン
・右位置固定


全体
全体は、
<nav class="top-bar">~</nav>で囲みます
デフォルトでは黒背景にaタグで囲んだ部分は白文字、aタグがない部分はグレー文字になります。

見出し
サイトのタイトルやロゴを配置することが前提のものと思いますが、Boldがかかったものになります。
ここでの記述は

<ul class="title-area">
<li class="name">
<h1><a href="#">Top Bar Title</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>

となります。
あれ？Menuって記述あるけど表示されないじゃん。と思った方。さらにピン！ときた方。するどい。
Menuはブラウザの幅が狭くなった時に表示されます。


普通のメニュー（階層なし）
上記タイトルエリア以外は、
<section class="top-bar-section">~</section>
内に記述します。
さらに後述しますが、左寄せ、右寄せが可能なので、左寄せの場合は
<ul class="left">~ </ul>
右寄せの場合は
<ul class="right">~ </ul>
になります。
つまり全体的には

<nav class="top-bar">
<ul class="title-area">
　左側固定の見出し
</ul>
<section class="top-bar-section">
<ul class="left">左側配置のメニュー</ul>
<ul class="right">右側配置のメニュー</ul>
</section>
</nav>

という構造になります。
下層がない普通のメニューは
<ul>~</ul>内に<li><a>~</a></li>
を記述します。

さらに、メニューとメニューの仕切り棒「｜」を表示したい場合は
<li class="divider"></li>
を入れます。
この
<li class="divider"></li>
は、次の「下層メニューあり」の場合、間に挿入すると、横の区切り線になります。

下層メニューありのリンク
下層（hoverで下部にメニューが表示される）がある場合は、<ul><li></li></ul>を入れ子にします。
さらに、下層があるliにhas-dropdownクラスを付与することで▼の記号を追加します。
（has-dropdownがないとメニューが展開されません。）
また、下層側のトップのulにdropdownクラスを付けないとメニューが縦一列に並んでくれません。
と書くと面倒そうですが、

<ul><li class="has-dropdown"><a>~</a>
<ul class="dropdown"><li><a>~</a></li></ul>
</li></ul>

というルールを守っていれば問題ないかと。

右位置固定
先に書いてしまいましたが、ヘッダーバーの右側にメニューを固定して表示させることもできます。
ulにrightクラスを付与します。

改造
実際に作ってみるとわかりますが、このヘッダバーは本文カラムの幅と異なり、フルカラムで表示します。
これを本文カラムと同じ幅に設定したい場合は、全体を
<div class="row">~</div>
で囲めばOKです。
背景が切れるので

<div style="width:100%;background:#000">
<nav class="top-bar row">
~
</nav>
</div>

と、すると仕上がりもキレイです。