JavaScriptのスマホ対応時に知らないと損する16のコト
JavaScriptのスマホ対応時に知らないと損する16のコト：スマホ向けサイト制作で泣かないための秘伝ノウハウ（3）（3/3 ページ） JavaScriptでのOS／機種依存事例5選 ここからは、JavaScriptでのハマリどころを紹介していきます。 【1】AndroidとiOSでは、イベントの発生タイミングが異なる JavaScriptでは、ユーザーの操作に合わせてコンテンツを操作するコードを書くことが多くありますが、そのユーザー操作の検知タイミングがOSによって異なります。 scrollイベント コンテンツがスクロールされたときに発生するイベントです。最近、画面のスクロールに合わせて、サイドメニューが追従するような動きをするWebサイトが存在しますが、こういった動きを実現するときに利用するイベントになります。このイベントの発生タイミングが、iOSとAndroidで異なります。 iO
HTML5のスマホ対応の基礎知識とハマリどころ3選
HTML5のスマホ対応の基礎知識とハマリどころ3選：スマホ向けサイト制作で泣かないための秘伝ノウハウ（2）（2/3 ページ） HTML5でのOS／機種依存事例3選 では、HTML5でのOS/機種依存事例を3つ紹介していきましょう。 【1】viewportの指定と端末回転時の挙動が、OSやそのバージョンによって違う スマートフォン向けWebサイトでは、仮想的に画面のサイズを決定する「viewport」という概念があります。viewportを使用することで、それぞれの端末が持つ解像度および画素密度を気にすることなく、Webサイトのコンテンツ幅、高さ、拡大・縮小の許容範囲を指定可能です。 端末を回転させて横に持つと、スクリーンの縦横比が変わりますが、このとき「Webサイトの横幅をどのように処理するか」というのは、OSやバージョンによって異なります。 iPhoneの基本的な動きは、縦横回転時に、「
スマホ向けサイト制作3手法の基礎知識と課題、OS／機種依存のハマリどころ3選
スマホ向けWebサイト制作、3つの有名なハマリどころ ここからは、前ページで紹介した3つの手法にかかわらず、スマートフォン向けにWebサイトを見せていくうえで考慮しておいた方がいいハマリどころを紹介します。 【1】Androidの日本語フォントで太字が表現できない Androidでは有名な事象の1つです。Androidの日本語標準フォント「Droid Sans Japanese」は、Android上で太字のフォントが利用できません。そのため、フォント追加のカスタマイズがされた端末（国内メーカー製の一部端末など）を除いて、Android標準ブラウザでの日本語表示では、CSSで太字が指定されていても太字として表示できません。 <!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="UTF-8"> <title>フォント</title>
Swipebox | A touchable jQuery lightbox
What is Swipebox ? Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet. Main Features Swipe gestures for mobile Keyboard Navigation for desktop CSS transitions with jQuery fallback Retina support for UI icons Easy CSS customization Basic Usage Javascript Include jquery and the swipebox script in your head tags or right before your body closing tag. <script src="lib/jquery-2.0.3.j
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
スマホサイト制作センスをアップする！見本・素材・WPテーマ・JS・その他全部丸ごとまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ライターの内藤です！ 前回の記事（美しいWebデザインをタイプ別に！見ないと損する目的別厳選Web見本サイトのまとめ）ではWebデザインのタイプ別にわけた見本サイトのまとめを行いました。 今回はその続編として、スマホ・タブレット最適化サイトのデザインまとめをご紹介致します。 目次 ※もちろん順番に読む必要はありません。 スマホ専門デザイン見本 部品別に見られるサイト その他スマホサイトの部品作りの参考になるサイト スマホサイト素材になるキット フリック用JavaScriptプラグイン スマホ対応の無料WordPressのテーマ スマホサイト制作参考 スマホ専門デザイン見本 iPhoneサイトデザイン集のiPhoneデザインアーカイブ http://iphonedesignarchive.jp/ 登録数が半端ないです。 カテゴライズは業種別のみですが、年月アーカイブがあるので、い
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://repopgl.org/