本をめくるような自然な操作感を持ったページめくりUIWebサイトで「本のようなページめくりUI」を見かけることは、以前より増えてきました。 デジタルメニューやカタログ、資料ビューアなど、紙の体験に近いUIが求められる場面は意外と多くあります。 一方で、実際に実装してみると次のような課題に直面しがちです。 ・動きが重たく見える ・操作方法が分かりづらい ・クリックとドラッグが混在して誤操作が起きる
CSS Flexbox(フレックスボックス)は、要素を「横並び」や「縦並び」に柔軟に配置できる、CSSの1次元レイアウトシステムです。 従来のfloatベースのレイアウトでは、要素を横に並べるだけでもclearfixなどの工夫が必要でした。Flexboxを使えば、ナビゲーションの横並び、ボタン群の均等配置、要素の上下左右中央揃えなどが、数行のCSSで直感的に実装できます。 「1次元」とは、横方向か縦方向のどちらか一方を主軸として制御するという意味です。行と列の両方を同時に制御したい場合は、CSS Gridが適しています。Flexboxは「1列の中での並び方」を柔軟にコントロールすることに特化しており、Web制作においてCSS Gridと並ぶ最も使用頻度の高いレイアウト手法です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く