スマホの横スクロールUIをCSSで実装する方法
スマホページで最近増えているのがフリックできる横スクロールです。リストで表示するより小スペースで一覧を表示できる便利なUIです。 楽天市場やYahooショッピングのページでも使われていて、自分でも同じような横スクロールを実装したいと考え作ってみました。 基本的なHTMLとCSSだけで作成できるので、コピペで簡単に実装することができます。 それでは具体的な方法を順を追って説明していきます。サクッとデモだけ確認したい方は目次より移動してください。 参考にした横スクロールUI僕が参考にしたのは楽天市場のスマホページに載っている横スクロールです。 商品ページの下の方に「この商品を買った人はこれも」、「ショップの人気商品ランキング」といった横スクロールがあります。 今回はこれらの横スクロールデザインを参考に作っています。 実装する横スクロールのポイントレスポンシブに対応スマホとPCで表示方法を変えた
[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll
デモページ：3番目のパネルを表示 各パネルへの直リンクやURL表示にも対応しています。 One Page Scrollの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.onepage-scroll.js"></script> <link href='onepage-scroll.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML mainはコンテナで、各パネルはse
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
