iOSでinputのフォーカス時に画面がズームするのを防ぐ - Qiita最近のviewport指定 タッチデバイス用のviewport指定として、user-scalable=no にしない（ユーザの操作の任意性を奪わない）ことが最近では推奨されるようになっています。 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
Safari on iOS 7 and HTML5－firt.dev
Problems, changes and new APIs by Maximiliano Firtman Twitter @firt About Newsletter Published 11 years ago (18 Sep 2013) About 18 min reading time #ios #html5 #webview #homescreen webapps Apple has rolled out iOS 7 with iPhone 5S and iPhone 5C . As expected, Apple has published just 10% of the necessary information for web developers, and I can say without fear of mistake that this is the buggies
iPadに最適化したサイトがつくれるかもしれない5つの方法（基本編） - EC studio デザインブログ
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> /* 好ましくない例 */ これを使うことで横幅1024px以下のデバイスでアクセスされた場合に、ipad.cssを読み込むということはできるんですが、PCの場合でもこの程度の解像度のものはありますし、なおかつ利用しているブラウザが最近のものであれば、このコードを理解してしまいます。 つまり、「iPadだけ」に適用させるということは実質できないということになります。 この点はご注意ください。 デバイスの幅に左右されないリキッドレイアウトにする 前述のユーザーエージェントの話に次いで、レイアウトの話です。 iPadのデバイスとしての画面サイズはポートレート（縦向き）であれば 横
スマホ最適化、スマートフォン制作に関するメモ – T2
1．デバイス依存をどう乗り切るか。 エクスぺリア、iPhone、ギャラクシーはこれといった影響なくできていたのですが、 REGZAでFirefoxなどを使った時はもうね。泣きそうになりましたよね。 原因はmoz系に対応するjsとCSS3の記述を全て行っていなかった事だと思います。 初めにどのデバイスでどこまで対応するのかという仕様策定をしてから始めないと モバイル同様苦しむ事になるので注意が必要です。 androidのopera等。 2．横にした時の見え方。 これは意外と苦戦しました。縦だと綺麗なのにスマホサイトでよく見るwidth:100%とかを 適所に使わないといけない。 float:left; とかで2つの要素を詰めないと、縦では詰まっていたのに、横では両端に広がってしまうとか。 それによってhtmlの記述を変えないといけなくなったりとか。 2012/09/26 以前は上記の様に書い
iPhone Webアプリテンプレート（CSS Nite Vol.40 reprise） | Topics | DB - KAYAC Designer's Blog（カヤック デザイナーブログ）
こんにちは。意匠部ME課のtacamyです。 CSS Nite 4周年記念イベント（Vol.40 reprise）にてご紹介した iPhone Webアプリのテンプレートセットを配布します。 イベントの内容はこちらのエントリーをご覧ください。 ダウンロード iphone-tmpl.zip セット内容 index.html HTML5+iPhone用HTML css/iphone.css HTMLの新要素＋iPhone専用CSS js/iphone.js URL&検索バーを消す指定 js/lib/jquery.js jquery apple-touch-icon.png Webクリップアイコン cache.manifest マニフェストファイル .htaccess < dd style="margin-bottom:0.5em;">.manifestのMIMEタイプ設定 viewportにつ
iPhoneのclickイベントの挙動
iPhoneのclickイベントの挙動 本エントリーは軽めのjQuery Advent Calendar 2012最終日のエントリーです。 iPhoneはonメソッドを利用したclickイベントに結構クセがあるのでそれを解説したい思います。 <p class="target">ターゲット</p> このようなHTMLにclickイベントをバインドしていきます。 まずは次のようなコード。 $(".target").click(function(){ $(this).css("background","red"); }); sample これはちゃんと動きます。 次のコード。 $(".target").on("click",function(){ $(this).css("background","red"); }); これもちゃんと動きます。 sample これを踏まえた上で次からが動かないコ
必読！5分でわかるレスポンシブWebデザインまとめ 制作編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お久しぶりです。デザイナーの野田です。 まず、今回の記事を見ていただく前に、前回と前々回に書かせていただきました。 「必読！5分でわかるレスポンシブWebデザインまとめ」 「必読！5分でわかるレスポンシブWebデザインまとめ Pt.2」 を読んでいただけるとスムーズです。 今回で、【必読！5分でわかるレスポンシブWebデザインまとめ】のシリーズも最後にさせていただきますので、少しコンテンツ量が多くなります。 100％ 5分では分らないので、タイトルはスルーしてやってください。 様々なサイトでレスポンシブWebデザインについて紹介されていますが、制作方法が異なっていたり、内容が少し難しいと感じる部分がありました。 この記事は、ディレクターの方やデザイナーの方、どちらにも理解しやすいように書かせていただいてます。 また、これまでレスポンシブWebデザインについてやってきましたが、基本的な部分で
スマホサイトに入れると使いやすくなる！おすすめjQuery4選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ
HTML5/CSS3で作るスマートフォンサイトの基本 (1/5)
スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。 Photoshopでデザインカンプを作成する 最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。 デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、本連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。
iPhone Android など、スマートフォン向けhtmlコーディング/CSS : H.I. Art Works [ Web Technology ] – ウェブ制作技術情報 -
iPhone / iPod touch の画面サイズへの調整 画面サイズ：320×480px（Safariの表示領域は320×356ｐｘ） 横幅980pxまでのサイトは自動で320まで縮小する iPhone向けサイトを作成する場合は、meta name=”viewport”を指定すると、iPhoneでの最初の表示サイズ等を指定できます。 1 <meta name="viewport" content="width=320, "> 例えば上記のように書いた場合、横幅320ピクセル分までの領域をiPhoneの画面上に表示する事になります。 横幅を何も指定しない場合、横幅980ピクセルまでの領域が、画面上で表示されるように自動的に縮小します。 ※iPhoneでは画面サイズに合わせて文字が改行するわけではなく、PCのモニタなどで表示する横幅980pxまでの位置で文字を改行し、それを縮小すると
スマートフォン用（iPhone・Android）Webページデザイン、viewport の指定 : Serendip – Webデザイン・プログラミング
iPhone・Android 向けのサイトデザインをする際に meta タグに viewport を指定して、デバイスの表示領域に合わせたページデザインを行う。 メタタグでの指定の例 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes,"> 各パラメータと、その内容 width ビューポート（可視領域）の幅（ピクセル値）。 デフォルト値は 980。 200 から 10000 までの範囲を指定できる。 height ビューポートの高さ（ピクセル値）。 デフォルト値は width の値とデバイスのアスペクト比から算出される。 233 から 10000 までの範囲を指定できる。 initial-scale ページが可視領域内にフィットするように計算された値がデフォルト値とな
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
スマートフォン時代のWebサイト制作 第3回 スマートフォン向けのコーディング | デベロッパーセンター
コミュニティーリソース Flex cookbook* (コードの共有) CSS Advisor (ブラウザ別バグ修正) Exchanges* (コンポーネントの共有) Adobe Labs* ユーザフォーラム RSS フィード* Flex バグベース* ユーザグループの検索* ユーザグループについて* Adobe Community Experts (ACE)* デベロッパーイベント* ブログ MXNA* (ブログアグリゲータ) Adobe ブログ* スマートフォン向けサイトには、いくつかのデザインパターンが見られます。今回は、そのコーディング方法について、以下のサンプルサイトをもとに解説します。 ※このサンプルサイトは本連載用に作成したものであり、公式のページではありません。 図1 サンプルサイト。ページ上部に新着記事、中部に製品ロゴを使った記事カテゴリー、下部にリスト型ナビゲーショ
スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
webamb.com
html5-memo.com