[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js
マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。 デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.horizonScroll.js"></script> </head> スマホなどタッチデバイス対応にする場合は、touchSwipe.jsも加えます。 <head> ... <script type="tex
![[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/87c79333735eb75d10033e33d194426b66f5def3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015031609.png)
CSSだけでお手軽なフリック&ドラッグスライダーを作る | バシャログ。
今年のベスト映画はやっぱりガーディアン・オブ・ギャラクシーなminamiです。 左右にスクロールするスライダーのようなUIを作る機会は未だ多いですが、今回は主にタッチデバイスで便利なフリック&ドラッグで動くスライダーをCSSだけで作ります。 Amazonのスマートフォンサイトなどでも同じように実装されています。 作り方 PC用のブラウザではoverflow: autoやscroll を設定した要素の中にそれよりも大きな要素が含まれる場合、スクロールバーを表示させてスクロールすることができますが、iOSやAndroidなどのスマートフォン用のブラウザではうまくスライドしなかったり、スライドそのものができなかったりします。 今回ご紹介する方法だとCSSだけで慣性スクロールをつけることができます。 HTMLのマークアップは下記のようにしました。 <div class="slider-wrappe
[CSS]iOS で滑らかなスクロールを実現する「-webkit-overflow-scrolling」プロパティの使い方｜CSSスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
overflow で要素内をスクロールさせると、iPhone やiPad などのiOS で見た場合にスクロールがぎこちなくなります。 そんな時は、iOS 5.0 より実装されたSafari CSS の -webkit-overflow-scrolling プロパティを使うことで、iOS でもスムーズなスクロール（慣性スクロール）を実現できるようになります。 -webkit-overflow-scrolling の指定 -webkit-overflow-scrolling に指定する値は「auto」と「touch」の2 つです。 「auto」はデフォルトで、慣性スクロールしません。 指定した高さの要素内をoverflow: scroll でスクロールさせる際に、以下のように .content { height: 200px; overflow: scroll; -webkit-overflo
![[CSS]iOS で滑らかなスクロールを実現する「-webkit-overflow-scrolling」プロパティの使い方｜CSSスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/08b792dc919b5df541e06c5e157286ce8e586603/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2014%2F02%2Fios.png)
CSS Nite LP27「スマートフォン対応サイト制作」フォローアップを公開しました｜CSS Nite公式サイト
CSS Nite LP27「スマートフォン対応サイト制作」フォローアップを公開しました 記事公開日：2013年8月22日（木） 2013年5月25日（土）、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作（3）」のすべてのセッションのフォローアップ（スライドなど）を公開しました。 フォローアップ（1）『スマートフォン今昔物語』神森 勉さん フォローアップ（2）『モバイルデザインパターンの取り入れかた』矢野 りんさん フォローアップ（3）『スマートフォン向けサイト制作の基本』益子 貴寛さん フォローアップ（4）『レスポンシブWebデザイン実践編』こもり まさあきさん フォローアップ（5）『スマートデバイス時代のWebサイト構築術 LIVE』たにぐち まことさん、田代 豊さん フォローアップ（6）『スマートフォンサイトにおける画像の最適化と使いどこ
[Web] スマートフォンのびよーんと伸びるスクロールの動きを止める方法 - YoheiM .NET
今日はライトなネタを(*´∇｀*) スマートフォンでWebサイトを見た際に、指でスクロールすると、 画面外までびよーんとスクロールできます。iPhoneとか。 でも時には、その動作をして欲しくない事も。指で絵書くサイトとか。 そのびよーん動作を防ぐ方法をブログに残したいと思います。 びよーん動作を防ぐスクリプト ひっぱって戻る動作を防ぐ為に、横スクロールの禁止と縦スクロールの禁止に分けて対応します。 横スクロールを禁止する 横スクロールを禁止する為には、metaタグでviewportの設定を行うとできるようです。 <meta name="viewport" content="width=500px ,initial-scale=0.64 ,user-scalable=no"/> 横幅指定と、初期表示倍率指定と、ユーザーによる倍率変更の禁止です。 縦スクロールを禁止する びよーん動作を防ぐた
![[Web] スマートフォンのびよーんと伸びるスクロールの動きを止める方法 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/dec74d500d491387e21b41cc1fad38d9634c1600/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F038.png)
いまさら聞けないCSS3入門＆スマホ対応6つの問題点
いまさら聞けないCSS3入門＆スマホ対応6つの問題点：スマホ向けサイト制作で泣かないための秘伝ノウハウ（4）（2/2 ページ） CSSのスマホ対応におけるOS／機種依存事例6選 では、スマートフォン向けWebサイトを制作するに当たって、CSSのOS／機種依存事例をご紹介します。 【1】position: fixedを利用する場合には注意が必要 これはCSSの依存事例としては有名なものです。サイト上で、メニューなどを固定位置に配置するためにpositionプロパティを利用することがあります。画面のスクロールの状態に関係なく固定位置にするには、fixedを指定しますが、これはすべてのスマートフォンで有効なわけではありません。 まずOSバージョンとして完全に対応しているのは、iOS 5.1.1以上、Android 3.1以上となります。Android 2.3でも設定はできますが、viewport
Mobile Safariで最後の１文字が改行されてしまうバグ - くらげだらけ
スマートフォンブラウザ関係のバグは（Android browserを中心に）たくさんありますが、今回はかなりレアケースなバグの話と回避方法についてです。 タイトルどおり、iPhone/iPadのmobile safariやWebViewで日本語文字列の最後の１文字が不自然に改行されて表示されてしまうバグなのです。 どういうことかというと↓下のように表示されるということです。 くだくら げサンプルページも作りましたので、以下のページをiPhone, iPadで表示してみてください。 Sample: http://kudakurage.com/test/mobile_safari_line_break/ 発生条件 発生条件は少し複雑なため、そんなに遭遇することはありません。 （ただその分googleで検索しても、遭遇した例など出てきません） mobile safariで閲覧している PCブラウ
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
CSS Nite LP25（Shift 6）のフォローアップを公開しました｜CSS Nite公式サイト
2012年12月15日（土） 、ベルサール神田で開催したCSS Nite LP25（Shift 6）のすべてのセッションのフォローアップ（スライド、音声）を公開しました。 （1）『基調講演：未来をプロトタイプしよう』（長谷川 恭久さん） （2）『2013年に向けて押さえておきたいマークアップ・トレンド20』（益子 貴寛さん、小山田 晃浩さん） （3）『CodeGrid総集編2012「2012年の必読記事＆2013年の注目記事」』（中村 享介さん、山田 順久さん、外村 奈津子さん） （4）『アクセシビリティ：AccSellポッドキャストLIVE収録』（植木 真さん、中根 雅文さん、山本 和泉さん） （5）『ツールと制作環境、電子書籍2012-2013』（鷹野 雅弘） （6）『ソーシャルメディア：2012年のトピック振り返りと2013年に向けた活用の押さえどころ』（大月 茂樹さん、井出 一誠さ
Foundation for Sites | The most advanced responsive front-end frameworks in the world.
Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, includi
HTML5によるハイブリッドアプリ開発に関する雑記 - id:anatooのブログ
HTML5でiPhoneやAndroid向けのハイブリッドアプリを作るのが最近の流行りみたいです。ハイブリッドアプリとは、外面は普通のアプリとしてAppStoreやGoogle play marketでインストールできるものの、その中身や一部がHTML5で記述されているアプリです。 最近の有名な例だと、CookpadやLinkedIn、はてなスペース、少し前にネイティブに移行してしまいましたがfacebookのモバイルアプリもHTML5を使って記述されていました。GREE界隈で言われているらしいガワネイティブっていう言葉もハイブリッドアプリを指します。ちょっとググってみると、2016年には企業向けのアプリの50%がハイブリッドアプリになるという予測もあります。 ハイブリッドアプリの何がいいかというと、Objective-CとかJavaとかがわからなくてもウェブ系技術者であればAndroid
iOS6 スクロール中のタイマー発火絡みのバグ備忘
Fxck iOS6!!! と思っている方々も少なからずいらっしゃるのではないでしょうか。ぼくは今わりとそう思っています。 だって、Androidでposition: fixedとか、z-indexとか、怪しげなモノって使わずに避ける、慎重に触れるとかまだ何とかなるじゃないですか。伝家の宝刀「Androidですから…」って言い訳も少なからず使えますし。けれども、AjaxとかTimer周りって、必須すぎて避けようがないんですよ。任意のタイミングで再描画起こすためにsetTimeoutとか使いますよね。遅延描画的な溜め込みとか、ほら、いろいろ。しかもそれ、iOSの最新版ですよ。 そんなわけで、ぼくはiOS6があまり好きではありません。（前置き） でまぁ、Ajaxについては下記によくまとまっていますし、9月ごろの情報ですね。 Understanding the iOS6 AJAX bugs | G
CSS Techniques for Retina Displays — SitePoint
As many people use their highly portable devices for work and play, device manufacturers seek to enhance their user experience, making their devices simultaneously more powerful and easier to use. Apple gave us a completely new line-up of products that introduced double density pixel screens, creating sharper images on smaller screens. Other device manufacturers are following suit with their own v
愛宕山太郎坊/Staff
愛宕山太郎坊 アニメーション制作進行支援ソフト 愛宕山太郎坊 ログイン 会社id ユーザー名 パスワード ユーザー名またはパスワードが正しくありません。 閉じる ログイン
Webサイト＆WebアプリのRetina対応方法まとめ
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map
Responsive Boiler Plate Australia | The trickiest parts of online purchases that you need to understand before purchasing things online in Australia
The trickiest parts of online purchases that you need to understand before purchasing things online in Australia There are multiple ways of shopping online through the online stores in Australia. People either shop online by using the stores that offer some specific products and options from the brands that are popular and some are authorized sellers of a single brand. Online purchases require som
Michiel de Graaf - Retina for web workflow - Designer and writer of CSS & HTML
The biggest pain of retina becoming the standard for computer displays is the extra work that's involved in making it work on the web. But it's possible to automate your retina (@2x) for web workflow thanks to Slicy, CSS preprocessors like Sass or Less and retina.js. Slicy A beautiful and very clever app by MacRabbit. Slicy turns photoshop layers into normal and retina images by simply naming a la
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
タブレット向けWebデザインのノウハウ40選 ―― 第1章 タブレットの機能を知る | タブレット向けWebデザインのノウハウ40選
めしおのアフィリエイト教材レビューブログ
ウェブサイト作成の勉強になった日本語スライドのまとめ
