スマホの横スクロールUIをCSSで実装する方法
スマホページで最近増えているのがフリックできる横スクロールです。リストで表示するより小スペースで一覧を表示できる便利なUIです。 楽天市場やYahooショッピングのページでも使われていて、自分でも同じような横スクロールを実装したいと考え作ってみました。 基本的なHTMLとCSSだけで作成できるので、コピペで簡単に実装することができます。 それでは具体的な方法を順を追って説明していきます。サクッとデモだけ確認したい方は目次より移動してください。 参考にした横スクロールUI僕が参考にしたのは楽天市場のスマホページに載っている横スクロールです。 商品ページの下の方に「この商品を買った人はこれも」、「ショップの人気商品ランキング」といった横スクロールがあります。 今回はこれらの横スクロールデザインを参考に作っています。 実装する横スクロールのポイントレスポンシブに対応スマホとPCで表示方法を変えた
スマホ対応の入力フォームのデザインに役立つ7つのポイント
パソコン、スマートフォン、タブレット。10年前と比べ、私たちは画面サイズの異なる多くの端末に囲まれて生活するようになりました。そして2016年以降、スマートフォンの普及率はパソコンに接近しており、自社のキャンペーン運用時にもスマートフォンユーザーを意識しなければならなくなった企業の数も増えているのではないでしょうか。 そこで今回は、スマートフォン対応の入力フォームデザインを行う際に知っておきたい6つのポイントをまとめてみました。皆さんはいくつご存知でしょうか。 レスポンシブ・デザインを採用する 最も理想的でシンプルな解決方法は、レスポンシブ・デザインを採用することです。レスポンシブ・デザインとは、画面の幅に応じてページレイアウトが自動的に変わる技術です。この技術を採用すれば、ひとつのページで様々な大きさのディスプレイに最適なレイアウトをそれぞれ表示させることができます。 Googleは「検
ロゴはSVGにして使いまわそう！簡単スマホ対応。｜ビリオンプランのスタッフブログ
せっかくのスマホサイト、高解像度デバイスで見たらロゴや見出し画像が粗くて残念。 なんてことはよくある話。というわけでロゴだけでもSVGでスマートフォン対応しましょう！ ロゴはSVGで使いまわそう。 サイト内で複数回の使用が想定されるロゴ画像は、いちいちサイズ別に画像を用意するのは面倒です。 ひとつベクターデータのSVGロゴを用意しておけば、使いまわせますし何より高解像度デバイスにも対応できます。 参考：各ブラウザの対応状況 http://caniuse.com/#search=SVG SVGとは？ SVG（エスブイジー）【 Scalable Vector Graphics 】とは、ベクター形式の画像フォーマット／画像記述言語です。ベクター形式なので、画像品質を維持したまま拡大縮小を行うことができます。そのため高品質なグラフィックでも、ファイルサイズが小さいのが特徴です。JPEGやPNGデー
開坑1200年、国の重要文化的景観である兵庫県生野銀山が面白い【前編】。 | ホームページ制作 大阪【インフォメーションメディアデザイン株式会社】
【Adobe XD】ホバーアニメーションの応用編～パララックス風の動きを再現してみよう～ 前回の記事では、Adobe XDの「ホバーステート機能」を使った画像のホバーアニメーションの作り方をご紹介しました。今回の記事では、･･･ View More
スマホに適したlightbox系javascriptプラグイン「PhotoSwipe」 | スターフィールド株式会社
var initPhotoSwipeFromDOM = function(gallerySelector) { var parseThumbnailElements = function(el) { var thumbElements = el.childNodes, numNodes = thumbElements.length, items = [], figureEl, linkEl, size, item; for(var i = 0; i < numNodes; i++) { figureEl = thumbElements[i]; // <figure> element // include only element nodes if(figureEl.nodeType !== 1) { continue; } linkEl = figureEl.children[0]; //
viewportの書き方でピンチによる拡大・縮小ができるのがいいのかできないのがいいのか - ディレイマニア
サイトを作る際、スマホでの表示を最適化するためにmeta name="viewport"を使ってコントロールします。 だいたい定番の書き方があってコピペで使いまわせるんですが、ピンチインアウトで拡大縮小できるようにするかしないか、どちらを選ぶのが良いか判断に迷うところです。 この2種のソースと、拡大縮小をできるようにするかしないか、僕なりの見解を書き留めておきます。
スマホサイト構築に便利なドロワーメニュー・スワイプのjQueryプラグインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのはるえです。 もうほとんどの案件でPC＋スマホ制作がセットになってきましたね。 LIGに入社したての1年前まではスマホの制作経験を聞かれてうつむき気味だった私も、おかげさまで今じゃスマホサイトを喜んで作るようになりました。 ありがとうございます！！ そこで今回は、スマホサイトで使われやすいドロワーメニューやスワイプ実装の際に必要となるプラグインをご紹介させていただきます。 【こちらもおすすめ】 ☞ 高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた Facebookでもおなじみのドロワーメニュー3選 今じゃ基本中の基本となっているドロワーメニュー。 Facebookなどで使われている、横からぬるっと出てぬるっと引っ込むあれです。動きが気持ちよくて、実装も簡単にできるものを中心にまとめてみました。 jQuery slimMenu
スマートフォン・タブレット・PCの場合の条件分岐(JavaScript)
例えばスマートフォンでアクセスした時に、スマートフォン用のアドレスに飛ばすなどユーザーエージェントで判別して処理を変える方法のメモです。 ▼スマホ（iPhone,iPod touch,Android）の場合の条件分岐 if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)) { //スマホ（iPhone,iPod touch,Android）の場合 alert('おっす、スマホちゃん！'); }
レスポンシブでスマホもOKで軽量なLightBox系jQueryプラグイン - JETBABY
おはようございます。JETBABY管理人です。 今回はさらっと更新しちゃいます。 LightBox系のjQueryプラグインは色々ありますが、PCでもスマホでもきれいに動くのはあまり多くないですね。 今回紹介する「IMAGE LIGHTBOX」はレスポンシブ対応で最初かスマホを意識作られているプラグインになります。 iOSでもAndroidでも動きますし、日本ではあまりなじみないというか関係ないと思いますがWindowsPhoneでも動作します。 もちろんPCでも普通に動きます。 しかもminで4kbと軽量。 画像に特化しているので、iframeで別HTML呼び出したりなどの機能はないのが残念。 ですが、ギャラリー系や画像を見せたいコンテンツではありだと思います。 使い方はこちらのサイトから。 Demoはこちらからご覧ください。 スマホでもご覧ください。
jQueryのlightbox系のプラグインColorboxをiPhone(スマホ)で使う : kagzugiの備忘録
Colorboxのダウンロードはこちら。 Colorboxはlightbox風の動作をするJavaScriptで、jQueryのプラグインとして動作します。 CSSのMedia Queriesを使ってレスポンシブなページを作っていると、lightbox系のJavaScriptでつまずきました。 iPhoneで幅480pxで作っています。 画像をクリックして「みよ～ん」と拡大されるのはいいのですが、画像の元の幅が480pxを超えてるとサイトのサイズをはみでて画像が表示されます。 当然の動きです。 でも、それだとかっこわるいです。 今作ってるサイトの幅は超えないでほしいです。 そこで英語のドキュメントとにらめっこしてみました。 で、解決方法です。 まず、Colorboxの設置作業は他のサイト等で情報がたくさんあるので省略します。 Colorboxが動くようにしてください。 次に<head>~<
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホで閲覧した時だけJavaScriptを一部無効化したり有効化したりする - Qiita
http://2ndidea.com/accessibility/pros-cons-of-user-scalable-no/
Engadget | Technology News & Reviews