Mobile Website Library

blend-mode や filter

折り重なるイメージの配置はアスペクト比をCSSグリッド上で設定すればレスポンシブのメディアクエリは不要になる。 2021/9/15

AOSのトリガーを解決する

CSSだけでスワイプするスライダーを作る。前編のアニメーションの続編。

ピンチアウトが効かなくなる。追加したJavaScriptが原因なのだろう。そこでそこからのひとつの解決策として「フォントサイズを任意のサイズに変更する」というボタンを付けてみる。

ピンチアウトが効かなくなる。解決策として「フォントサイズを任意のサイズに変更できる」ボタンを付けてみる。

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オマケ。