レイアウト

これらのサンプルレイアウトで、次の Web プロジェクトをすぐ始めましょう。

一般的なレイアウト

Pure は、あらゆる Web プロジェクトで使用できるよう目指して作られました。Pure を活用した一般的なレイアウトをいくつか作成して、このことを実現しました。これらのレイアウトはレスポンシブであり、(特定のメニュー操作を除いて)JavaScript は不要です。

Screenshot of Blog example layout

ブログ

投稿のリストを表示するブログページのレイアウトサンプル。

表示ソース

Screenshot of Email example layout

メール

レスポンシブなメールレイアウトを表示するレイアウトサンプル。

表示ソース

Screenshot of Photo Gallery example layout

フォトギャラリー

レスポンシブなフォトギャラリーを表示するレイアウトサンプル。

表示ソース

Screenshot of Landing Page example layout

ランディングページ

レスポンシブな製品ランディングページを表示するレイアウトサンプル。

表示ソース

Screenshot of Pricing Table example layout

料金表

レスポンシブな料金表を表示するレイアウトサンプル。

表示ソース

Screenshot of Responsive Side Menu example layout

レスポンシブサイドメニュー

Pure Web サイトのように、モバイルの場合は非表示になるサイドメニューを使用したレイアウトサンプル。

表示ソース

Screenshot of Responsive Horizontal-to-Vertical Menu example layout

レスポンシブ水平から垂直メニュー

水平から垂直に切り替わり、ウィンドウ幅が狭い場合は非表示になる一連の水平メニュー。

表示ソース

Screenshot of Responsive Horizontal-to-Scrollable Menu example layout

レスポンシブ水平からスクロール可能メニュー

小さなウィンドウ幅では非表示で、表示された際にはスクロールする水平メニューを展示しています。

表示ソース