スマホの横スクロールUIをCSSで実装する方法
スマホページで最近増えているのがフリックできる横スクロールです。リストで表示するより小スペースで一覧を表示できる便利なUIです。 楽天市場やYahooショッピングのページでも使われていて、自分でも同じような横スクロールを実装したいと考え作ってみました。 基本的なHTMLとCSSだけで作成できるので、コピペで簡単に実装することができます。 それでは具体的な方法を順を追って説明していきます。サクッとデモだけ確認したい方は目次より移動してください。 参考にした横スクロールUI僕が参考にしたのは楽天市場のスマホページに載っている横スクロールです。 商品ページの下の方に「この商品を買った人はこれも」、「ショップの人気商品ランキング」といった横スクロールがあります。 今回はこれらの横スクロールデザインを参考に作っています。 実装する横スクロールのポイントレスポンシブに対応スマホとPCで表示方法を変えた
知らないと損！CSSのvh/vwの使いこなしでレスポンシブなサイト制作が捗る
CSSの値に指定できる単位といえば、pxや%などがおなじみ。でもレスポンシブなサイト制作では、vhやvwといったViewport単位がとても便利です。基本と使いどころを解説します。 CSSにViewport単位（Viewport Uints）が導入されてから数年になります。ブラウザーのサイズが変更されるたびに値が変わるという意味で、真にレスポンシブな単位と言えます。Viewport単位について聞いたことはあるものの、詳しいことはまったく分からないという人は、この記事で理解を深めてください。 単位とその意味 CSSにはViewportを基準とした単位が4つあります。vh、vw、vmin、vmaxです。 Viewport Height（vh）：viewportの高さに基づく。1vhはviewportの高さの1%に相当する Viewport Width（vw）：viewportの幅に基づく。1v
★レスポンシブデザインで使うメディアクエリの設定方法とブレークポイント最適値について
スマホファーストでおまけ的にPC対応という案件が以前よりも増えていますが、やっぱり多いのはPC優先でスマホ表示も確保するというもの。で、このような複数デバイス間の表示を最適化する手法としては以下のものがあります。 モバイル用とデスクトップ(PC)用を別々に用意してアクセスする端末で切り替えるブラウザのウィンドウサイズによって表示内容を変える1はユーザーエージェント(何を使ってアクセスしているか)で判別する形式で、Wordpressではwp_is_mobile()という関数を用いてif文で条件分岐させれば簡単に実現可能です。 2はレスポンシブウェブデザインと言われ、メディアクエリを用いて制御する手法。これについては、Googleがモバイル フレンドリーなサイトを構築するガイドラインを出しています。 参考1: はじめる - ウェブマスター向けモバイルガイド ↑ 知らない人は必須なので目を通して
レスポンシブWebデザインをIE8に対応させる方法 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
InternetExplorerは昔かサイト制作者を悩ませ続けてきました。せっかくレスポンシブサイトを作ろうとしても、レスポンシブサイトというとセットでついてくるメディアクエリ、これにはIE8以下の下位バージョンが対応しておらず、表示は見事に崩れます。 未だ切り捨てられないIEへの対応 モバイルファーストかつレスポンシブということを思えばIE、しかも下位バージョンなら切り捨ててもいいのではないかと思いますが、様々な事情から切り捨てられないシーンもあるでしょう。以前に比べれば低くなったとは言え、特に日本ではIE8のブラウザシェアはまだまだ残っています。 そういった時のために、比較的手軽にIE向けの対応を行える方法があります。 1.「css3-mediaqueries.js」を読み込む こちらはGoogleが推奨している比較的有名なスクリプトです。html5.jsやIE9.jsなどと併用しても
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
要素の横幅と高さの比率を保つ | 集の一期一会
