foundation

レスポンシブなヘッダーとフッターを作ろう 

前回は、ページ全体をセンタリングしました。さらに各部を作っていきます。まずは、ヘッダーとフッターです。 1カラムのページですが、企業ページなどでよく見るような連絡先をヘッダーとフッターに入れてみます。 FoundationのGrid
foundation

FoundationのGrid Centered Columnsでページをセンタリングします

さらにサイトの制作を進めていきます。FoundationのGridを利用して1カラムのページを組み立てていきます。 まず、FoundationというかCSSフレームワークの一番の使いどころだと思ってますが、ページ全体をセンタリングします。
Partials

サイト制作の下準備 PaniniのPartialsを使ってレイアウトしてみる

Foundationの機能にあるPaniniのPartialsを使って、サイト制作の下準備をしていきます。詳細は以下を参照してください。 作業手順 1. foundation newでZurb Templateを選んで、
browsersync

Foundation 6.2で開発すると、ウェブサーバーが勝手に立ち上がる 超便利な特典です

foundation watchでコンパイラを起動して、ふと下の画像の赤丸に目が行きました。 Foundationのテンプレートが立ち上がるのは知っていましたが、URLまで気にしていませんでした。表題はFoundation 6.2でな
foundation

Foundation 6.2 が出たのに遅すぎ・・ 外部ディスクはHDDではなくSSDにすべき

Foundation 6.2 がリリースされた件を前回書きました。検証も含めてZurbのTemplateでProjectを作り直してみたのですが、驚愕の事態が起こりました。 まあ、原因は分かっているんですけど。実は、Foundatio
foundation

Foundation 6.2がリリースされました ES2015 codebaseとかflexboxとかすごいらしい

Foundation 6.2がリリースされた旨、ZURBのBlogでアナウンスされていますね。正確には、Foundation for Sites 6.2がリリースされたと書かれています。 『Foundation for Sites 6
bower

foundation6でhtml5shivを使う bowerでインストールしよう

foundation6のテンプレートを見て、最初に思ったこと。「htmlshiv.js」はどう使うのだろう。 そういえば、Google codeのCDNも終了していたなとググってみる。どうやら、今年の1月25日でサイトが閉鎖されてGi
foundation

まちがいないfoundationの制作環境 Windows10のインストールからやり直す

foundationの制作環境をうっかり、壊してしまいました。せっかくエラーが出なくなったのに痛恨のミスです。 次の記事で書く予定のbowerのPathを通そうと、Windowsの環境設定をいじっていたら、なぜかPathが切れてしまい
foundation

foundation6のHTMLテンプレートを見てみよう

まずは、foundation6のHTMLテンプレートを見てみましょう。 下記は、foundationのinstallationのサイトで公開されている「HTML Starter Template」です。 CSS版のfou
foundation

foundation6のwatchオプション コンパイラの使い方 起動と終了

foundation6のwatchオプションでコンパイラが使えます。 SassやCompassと同じで、Project/srcフォルダのファイルの変更を監視して、必要があれば/distに書き出してくれます。 1. コマンドプロン