Foundation 5でWebサイトを超高速に構築する[Aガイド]
フロントエンドフレームワークを使用すると、Webデザインのワークフローをさまざまな方法で向上させることができます。できる 現代のデザイン原則に従うのを手助けする モバイルファーストアプローチ、セマンティックマークアップ、レスポンシブデザインなど。あなたはできる すぐに使える多くのCSSおよびJavaScript要素を活用する そしてかなり 開発プロセスをスピードアップ, ビジュアルデザインとユーザーエクスペリエンスデザインに集中するための時間をもっと増やす.
Zurb Foundation 5は、市場で最も強力なフロントエンドフレームワークの1つです。論理的に構築されており、使いやすく、完全に無料です。それはあなたが利用することができます 柔軟なCSSグリッド それ きれいでユーザーフレンドリーなレイアウトの作成を容易にします. Foundationフレームワークも十分にテストされているので、ブラウザ間およびデバイス間の互換性を考慮します。.
このチュートリアルでは紹介します Zurb Foundation 5でどのようにして超高速Webサイトを構築することができますか. デモページで最終結果を見ることができます.
私はウェブサイトのレイアウトを作成します、微妙なデザイン要素を追加するタスクはあなたを待っています。このチュートリアルで一緒に作成するWebサイトは、現代のUXデザイナーの夢を実現するでしょう。それは、レスポンシブ、モバイルファースト、ユーザーフレンドリー、そしてセマンティックです。.
このガイドの長さのため、ここにあなたがすぐに欲しいセクションに到達するための近道があります：
- Foundation 5をダウンロード中
- グリッドを理解する
- Large-N、Medium-N、Small-Nクラスを使用する場合
- トップメニューバーを追加する
- 本編を作成する
- 人気の投稿用のパネルを追加する
- 人気のパネルにさらに3件の投稿を追加する
- CSSの準備
- さらにコンテンツを追加する
- ページ付けを追加する
- サイドバーの作成
- ニュースレターフォーム
- フレックスビデオ
- サイドバーメニュー
- 結論
1. Foundation 5をダウンロードする
Foundation 5は4つの異なる形式でダウンロードできます。
- 完全なコード
- 必須コードのみを含む軽量バージョン
- 必要なものとそうでないものをカスタマイズできるカスタムバージョン
- SCSSで変数とミックスインを設定したい場合はSassバージョン.
このチュートリアルでは、私はバニラCSSで完全なコードを選びますが、あなたがあなたのサイトを合理化し、あなたが本当に必要なものだけを使いたいなら、もちろんあなたは他のバージョンを選ぶことができます.
zipファイルをダウンロードして解凍したら、ブラウザでindex.htmlファイルを開くと、次のように表示されます。
うん、devsはインデックスファイルに便利なリンクを含めました。このままにして、プロトタイプのためにhome.htmlのような名前の新しいファイルを作ることができますが、いつでも財団のドキュメンテーションに簡単にアクセスできるので、それを保存する必要はありません.
お気に入りのコードエディタでindex.htmlファイルを開き、 内のすべてを削除 セクションの終わり に追加するスタイルルール app.css 私たちのプロトタイプをきれいにするためのファイルはこれらです： 財団5は相対的な単位を使っているので, 使用する必要があります “em”-sまたは “レム”-ピクセルの代わりにs 規則についていくために。 FirefoxのFirebug拡張機能を使用して、Foundation 5のCSSルールをオーバーライドする場所を決定しました。必要に応じて他のWeb開発ブラウザ拡張機能を使用することもできます。. この短いCSSスニペットでは、最後の規則（.row .row.popular-main）で、FoundationのデフォルトCSSを一度だけオーバーライドするだけでした。これがデモサイトの外観です。 以前と同じ規則を使用して、ページのメインセクションにさらにコンテンツを追加します。これから追加するコンテンツは、 最新の投稿 小さなサムネイル付き. Foundation 5には、このステップで使用する予定の、非常にクールな事前作成されたサムネイルスタイルがあります。財団サムネイルはaを使用します 事前に構築されたCSSクラスと呼ばれる “番目” 下のコードスニペットで見られるように、サムネイルとして表示する画像に追加する必要があります。. 最新の投稿ごとに、人気のパネルの下に新しい行を追加します。 呼び出されたカスタムCSSクラス “最新の投稿”. タブレットとデスクトップのサイズでは、左側にFoundationのサムネイルクラス、右側にタイトルと簡単な説明を使用して小さなサムネイルを表示します。携帯電話では、見出しと説明はサムネイルの下に表示されます. 今私は使用しました “中3列” そして “中9列” 画面を1：3に分割するためのクラス。画像は25％、テキストは75％中サイズから上に. 以下のコードスニペットをPopularパネルの下に3回挿入します（3つの最新の投稿に対して）。ここでは最新の投稿の1行のコードを含めるだけです。それらはすべて同じHTMLマークアップを使用しているため、内容だけが異なります。. 最新の投稿の内容… ステップ4.3で作成したカスタムCSSファイル, app.css また、デモの外観を整頓するためのいくつかの新しいスタイル規則を取得します。. 注意：あなたがFoundationにあなた自身のカスタムCSSを追加したいなら、あなたがデフォルトの規則を無効にしなければならないところで、Web開発ツールでチェックすることを忘れないでください. 以下のCSSスニペットでは、最初のルール（.row .row.latest-post）でそれらをオーバーライドする必要があります。 2番目のルールでは、独自のカスタムセレクタを使用するだけで十分です（.latest-post h4）。. 私たちのプロトタイプは今このようになっています： このステップでは、Latest Postsの下にクールなページ付けを追加します。 Foundation 5では、便利ですぐに使えるページネーションクラスを使って手助けをしています。このステップでは、で見つけることができるのと同じコードを使用します。 “高度な” ページネーションドキュメント内のセクション. これが新しく追加されたページ付けセクションの最新の投稿です。 これでデモサイトのメインコンテンツの準備が整いました。次に右側のサイドバーを作成します。右側のサイドバーは、モバイルおよびタブレットサイズのメインコンテンツの下に表示されます. このセクションにすべてのコードスニペットを挿入する必要があります。 左側のサイドバーには、ニックネームの下にニュースレター登録フォーム（1）、最新のビデオ（2）、およびアコーディオンスタイルのサイドバーメニューが表示されます。 “私たちの料理本” （3）. このステップの終わりに、デモの準備が整います。デモは次のようになります。 Foundation 5でフォームを作成するには、他に何もする必要はありません。グリッドを HTMLタグ. 以下のコードスニペットを見てみると、フォームが3つのグリッドすべてに異なるCSSセレクタを設定している行に配置されていることがわかります。 “小12”, “ミディアム9”, そして “大12”. 100％幅のニュースレターフォームはモバイルサイズでは見栄えが良いため、このソリューションを選択しましたが、タブレットサイズでは実際には扱いにくいです。 非常に ワイド。幸運なことに、Foundation 5では使用できます “不完全な行”：追加するだけです “終わり” 不完全な列のCSSクラス定義へのクラス. それで、これはここで起こることです：携帯電話のサイズでサイドバーはスクリーン全体をカバーするニュースレターサインアップフォームでメインコンテンツの下に表示されるでしょう. 中規模のサイドバーはメインコンテンツの下に表示されたままになりますが、ニュースレターフォームは画面の75％だけをカバーし、残りの25％は空白のままになります。. デスクトップサイズでは、サイドバーはメインコンテンツの隣にあり、ニュースレターフォームはサイドバーの全幅をカバーします。. 不完全な行の詳細については、グリッドドキュメントを参照してください。. 今内側を見てみましょう header margin-bottom：2em; h4 フォントサイズ：1.125em;マージントップ：0.4em。 row .row.popular-main margin-bottom：1.5em;。
4.4さらにコンテンツを追加する
最新の記事のタイトル
.row .row.latest-post margin-bottom：1.5em; h4 .latest-post h4 margin-top：0;;フォントサイズ：1.125em。
4.5ページ付けを追加する
5.サイドバーを埋める
5.1ニュースレターフォーム
ニュースレターを購読する
Foundation Formsには、Prefix Label、Prefix Radius Label、Postfix Button、Postfix Labelなど、他にも多くのレイアウトオプションがあります。ここではPostfix Buttonオプションを選択しました。ユーザーが使いやすいためです。ユーザーはそれをクリックして一度にフォームを送信できます。.
フォーム内に、画面を2：1に分割する新しい入れ子の行を追加します。テキスト入力は8列になり、後置ボタンは4になります。モバイル画面でもこのレイアウトにしたいので、次のように設定します。 “スモール8カラム” そして “小4列” ここにCSSセレクターがあります、Small Markはこのマークアップを実装したい最小のサイズです.
上記のHTMLコードには、もう1つ新しいことがあります。 “行の崩壊” クラス。これがFoundation 5の組み込みスタイルです。デフォルトでは、2つの隣接する列の間に溝がありますが、 追加すると “崩壊” 私たちの列にクラス、溝が消えます. これは、ボタンをテキスト入力のすぐ横に、それらの間にスペースを空けずに配置したいためです。.
今度はこのコードスニペットを
5.2フレックスビデオ
ニュースレターセクションの下に、私たちのサイドバーにデイリービデオレシピを追加します。財団5は私たちを助けます 埋め込みビデオをレスポンシブにし、自動的に拡大縮小させる Flex Video機能付き.
フレックスビデオは内蔵を使用 “フレックスビデオ” CSSクラスDaily Video Recipeサイドバーセクション用に新しい行を作成し、その中に1つの幅の広い列を配置します。 “小12中9大12列終わり” 前の手順で中グリッドで不完全な行を使用したのと同じ理由でCSSセレクタ.
これが、Newsletter Sectionの下に貼り付ける必要があるコードです。あなたはYouTube、Vimeoなどから任意のビデオを使用することができます.
デイリービデオレシピ
5.3サイドバーメニュー
サイドバーメニューには、Foundation 5のアコーディオン機能を使用します。アコーディオンは、コンテンツを展開して論理的なセクションに折りたたむWeb要素です。.
私たちのデモサイトでは、これらの論理的なセクションは3つの異なる食品グループ（メインディッシュ、サイドディッシュ、デザート）であり、そして各グループは以下のようなより小さなグループを含んでいます。 “家禽”, “豚肉”, “牛肉”, “ベジタリアン”.
サイドバーのアコーディオン全体を、前の5.1および5.2の手順と同じロジックで1つの幅の広い列に配置します。次のような適切な組み込みCSSクラスを使って、その中にアコーディオンを番号なしリストとして入れます。 “アコーディオン” そして “アコーディオンナビゲーション”.
Foundation AccordionsはJavaScriptと連携して動作するので、必要に応じて、あらかじめ作成されたJavaScript変数を使用してその動作をカスタマイズできます。そうするには、 “オプションのJavaScript設定” アコーディオンドキュメントのセクション。次のコードスニペットは、index.htmlファイル内のFlex Videoセクションの下にあります。.
結論
デモサイトの準備が整いました。次に、Foundation 5で他に何ができるかを見てみましょう。このデモで使用した要素は、Foundationフレームワークのほんの一部の機能です。カスタマイズ可能なアイコンバー、ブレッドクラム、ライトボックス、範囲スライダ、フォーム検証など、デザインに使用できるものは他にもたくさんあります。 Docsはかなりよく書かれており、多くのコード例で開発者を助けます.
Sassに慣れている人は、Docsの各セクションでどのようにあなた自身のmixinを作ることができるか、そしてあなたのサイトをカスタマイズするためにどのSass変数を使うことができるかを説明しているのでさらにもっと選択肢があります。 Webページのデザインを始める前に、Foundationフレームワークの互換性をチェックして、必要なすべてのブラウザで動作することを確認してください。.
- デモを見る
- ソースをダウンロード
