Mobile Website Library

Swiper

Swiperの水平方向のスワイプ機能を既存のレイアウトに差し込んで使ってみた。スワイプ可能をデザインで表示。

Grid Layoutを使って3カラムレイアウトを作ってみた

Grid Layoutを使って3カラムレイアウトを作ってみた。モバイルでのレイアウトは3カラムまでは行けるだろう。

tableタグのデータをソートさせ、覚えづらいものはチェックを付ける実践日常英会話

実践レイアウト:電車の中で日常英会話をtableでsortして覚えるのはとても楽しいと思う今日この頃。

イメージの縦方向と横方向の中央に文字を配置するレイアウトの必修パターン

実践レイアウト:写真の縦と横方向の中央に文字を配置するレイアウトの必修パターン。

整列した商品リストのレイアウトパターン

整列した商品リスト。こういうレイアウトはフルスクリーンいっぱいの表示が良いだろう。

reveal.jsを使ってプレゼンテーションをスワイプしてみる

reveal.jsを使ってにスワイプ(上下左右)してみる。※pinch in(Esc)とpinch out(Esc)で一覧の開閉ができる

モバイルで使うなら Swiper だろう

Swiperを使ってスワイプ(上下左右)してみる。reveal.js と Swiper を比較する。モバイルで使うなら Swiper だろう。デザインがし易い。

2カラムレイアウトをGrid Layoutで作る

Grid Layoutを使って2カラムレイアウトを作ってみた。基礎的なものだが使い回すものだから拘りたい。

hover action

pure-css-tabというらしい、タブをタップすると動きを伴ってページが移動するサンプル。

hover action

hover actionオマケ。

グリッドレイアウトで複雑なレイアウトを実行してみよう。ここでは文字と文字を重ねてデザインしてみた

グリッドレイアウトで複雑なレイアウトを実行してみよう。ここでは文字と文字を重ねてデザインしてみた。

スワイプしてタブを切り替えるレイアウトを再作成してみた

スワイプしてタブを切り替えるレイアウトを再作成してみた。

実践レイアウトに2カラムレイアウトを差し込んでみた

Grid Layoutを使って実践レイアウトに2カラムレイアウトを差し込んでみた。

flipboadのようにページを捲りたい

「BookBlock」を使って「Flipboad」のようにページを捲ってみた。