Foundation5 チュートリアル

Foundation はレスポンシブな HTML, CSS and JavaScript フレームワークを開発するためのものです。

Foundation は、あらゆるデバイス上で Web アプリを構築するための、使いやすく、強力で柔軟なフレームワークです。

Foundation はモバイルファーストのポピュラーなフレームワークです。


オンラインサンプル

サンプル には何百もの Foundation サンプルが含まれています。

当社のオンラインエディタを直接使用して、「送信して実行」ボタンをクリックすると結果を表示できます:

Foundation サンプル

<div class="row"> <div class="medium-12 columns"> <div class="panel"> <h1>Foundation ページ</h1> <p>ウィンドウサイズをリセットして、効果を確認してください!</p> <button type="button" class="button small">私はボタンです!</button> </div> </div> </div> <div class="row"> <div class="medium-4 columns"> <h3>サンプル</h3> <p>学ぶのは技術だけではなく、夢でもあります!!!</p> </div> <div class="medium-4 columns"> <h3>サンプル</h3> <p>学ぶのは技術だけではなく、夢でもあります!!!</p> </div> <div class="medium-4 columns"> <h3>サンプル</h3> <p>学ぶのは技術だけではなく、夢でもあります!!!</p> </div> </div>

試してみる »

「試してみる」ボタンをクリックして、オンラインサンプルを表示します。


Foundation の特徴

以下の効果は iframe タグ内でのデモです。「試してみる」をクリックするとオンラインサンプルを表示できます:

ボタン

試してみる »


テーブル:

試してみる »


画像ポップアップ:

試してみる »


警告:

試してみる »



グリッド:

試してみる »


プログレスバー:

試してみる »


パネル:

試してみる »


ドロップダウンメニュー:

試してみる »


アコーディオン効果:

試してみる »


トップナビゲーション:

試してみる »


モーダル:

試してみる »


スイッチ:

試してみる »


スライダー:

試してみる »


その他の拡張