foundationを使ってサイトをリニューアルしました

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

竜胆Webデザインのサイトをリニューアルしました。

http://rriinnddoouu.com/

フレームワークとしてfoundationを使いました。

以前のサイトはbootstrapを使っていましたが、今回は、foundationを使いました。

HTMLとCSSのコーディングに限っては、bootstrapよりfoundationのほうが、直感的にできると思います。

bootstrapのクラス
class=”col-xs-6 col-sm-3″

foundationのクラス
class=”large-6 medium-6 columns”

ヘッダーを固定させたい場合、foundationだと判りにくい

bootstrapだと、ヘッダーの固定を直感的に実装できました。foundationはわかりにくかったです。結局、独自に固定用のCSSを書いて固定させました。

スマホのサイズの時のハンバーガーメニューの設定が難しい

foundationの機能に、横からスライドして出てくるハンバーガーメニューが付いているのですが、これが微妙な動きで、結局、この機能も使いませんでした。別のjQueryプラグインを使いました。

bootstrapは、横からではなく、上から出てくるタイプですが、わりと簡単にできました。

次はbootstrapを使います

foundationは、フレームワークのCSSの書き方を理解するためには、bootstrapより親切だと思います。jsは使わず、HTML、CSSだけの部分を使うなら、foundationのほうがいいかもしれません。

でも、日本語の情報が、foundationは少ないということもあり、広く使われてるもののほうが、何かと安心な気がしました。

それにしてもテーブルレイアウトみたいだと思いました

フレームワークを使うと、楽だし、これからも使っていきますが、不要なdivはたくさん書いた気がします。ほとんどテーブルレイアウトみたいだと思いました。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。