ラック
Home > ブログ > 記事 > 2016年3月 > Foundationを使ってみた

Foundationを使ってみた

カテゴリ: ホームページ

この週末で兼ねてより気になっていたFoundationに手を付けてみました。

使い勝手としては、Bootstrapと同じような感覚で使えました。

 

最初は最新のFoundation6をダウンロードしたのですが、5と大きく勝手が変わったのか、5用のドキュメントを見ながらだと上手く行きませんでした。

そこで5をダウンロードし直して触りました(まず公式ドキュメント読め、という話ですが)。

今回はBootstrapにはない「オフキャンバス」と「ブロックグリッド」の両方を使うことを念頭に作成、その感触を確かめられたのが収穫です。

オフキャンバスに関しては、デフォルトだとオフキャンバス内のリスト項目が上端に張り付いて動かなかった(個人的にはBootstrapのアフィックスのように追尾してくれると嬉しかった)ので、そこは自前で書きました。

ブロックグリッドは画像をul要素で列挙するだけでグリッドシステムになるので便利だと思いました。

画像ギャラリーとかで活躍しそうです。モーダルウインドウだったらデフォルトのものが使えますが、ギャラリーでしたらLightBoxに連携ですかね。

 

が、色々盛り込んだ(Foundationだけでなく、演出系のjQueryプラグインも盛ったり、そもそも画像が多かったりetc)結果、表示に時間がかかるのがネックになってしまいました。

ローディング画面も用意したので、ある程度はビジターのストレスが緩和はされると思うのですが…作った人間としては気になります。

その辺りを踏まえて今後の課題は「表示速度の向上」。Foundationでいえば、丸ごとではなくSass版を使って必要なコンポーネントのみを読み込むようにして負荷軽減させること。

…と意気込んだのは良いものの、rubyはともかく、grunt(Node.js上で動作)とかgitも必要なのですか…。

しかも6だと新機能も含めてだいぶ変わっている感じ…?

うーん、まだまだ先は険しそうです。

Bootstrapに関しても必要なコンポーネントだけ読み込むことができるようになりたいので、まだまだ勉強しないといけませんね。

 

Font Awesomeも必要なもののみ読み込ませることができる模様。

こっちは楽そうなのでまずはこちらから挑戦してみましょうかね。

 

ということで、収穫と共に新たな課題も得た有意義な週末でした(なおその反動で月曜日から既に疲労困憊…)。

 

これらを踏まえると、html+cssのみの状態を前提するならば…まずSass(Scss)に手を付けてみるのが良いのかな、と思います。cssができれば(環境の準備も最低限ならばそこそこですし)学習コストが低い上に、こうしたフレームワークを使う上でも武器になるでしょう(最低限のみを読み込ませて少しでも容量圧縮したい、となれば上記の通り。Font Awesomeもそうですし)。

あと、個人的にはタスクランナーも近々覚えていかないといけないと感じました。

 

うーん、やればやるほど課題が山積していく感。勉強しないといけないことはまだまだありますね…。

タグ: css, Foundation, Sass(Scss)

 



関連する記事一覧