たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） - Design Color
もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせる まずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにする スマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし
スマフォサイトにも対応可能の、インタラクティブなプロトタイプを作成する為のツールキット・「FRAMER.JS」
FRAMER.JSはスマフォサイトにも対応したプロトタイプ作成の為のフレームワークです。アニメーションを取り入れることでインタラクティブなプロトタイプを作成できる、という事を目的としているようです。使い慣れるまで少し掛かるかもしれませんが、慣れれば便利かも。 FRAMER.JS
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
スマートフォン用の横から出てくるナビゲーションCSS(テクニカルノート)
スマートフォンでよくある横からピロッと出てくるナビゲーションメニューをCSSだけで実現するとこうなる。 2013-11-03 というようなネタ。私はJavascriptでやりますけどね。レスポンシブWebなどでjsをあまり絡めたくない場合、擬似クラスって本当に便利ですよね。擬似クラスのtargetを利用してハッシュが付いた時にfixedの座標をズラしているだけですが。 まー個人的にはjavascriptでやったほうが良いとは思いますけど、ちょっとした事で使いたい場合なんかはCSS3のtransitionをつければアニメーションにもなるし、割りと良い出来栄えなんじゃないかなと。CSS3って本当に便利。そういやCSS3が出始めたころはJavascriptいらなくなるんじゃね？なんて話もありましたっけ。 と、いうことで手軽にサクッとスマートフォン用のぴろっと横から出てくるアニメーションメニューを
ジャイロセンサーに対応したパララックス（視差効果）のあるコンテンツを実装するスクリプト・parallax.js
スマフォサイト用のパララックス実装スクリプトがあったので一応メモ。使用は未定ですけど、ちょっと面白かったので覚えておこうと思います。 ジャイロセンサーの値を取得してパララックス効果をスマフォで実装する、というもの。用途は限られそうですけど、使い方次第では面白いコンテンツが作れるかもしれませんね。 PCサイトではマウスの位置で、スマフォでは本体の傾きに応じてパララックス効果を確認出来ます。 $('#foo').parallax();jQueryまたはZeptで使えるみたいです。 <ul id="foo"> <li class="layer" data-depth="0.00"><img src="layer6.png"></li> <li class="layer" data-depth="0.20"><img src="layer5.png"></li> <li class="layer"
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
CSS Media Queriesについてまとめてみた - ぺーぺーエンジニアのおぼえがき
Media Queriesとは 画面サイズに応じて、適用させるスタイルを限定させることのできる記述方法 基本記述方法 CSS内での記述方法 ZZZpx以上、XXXpx以下 @media only [対応メディア] and (max-width: XXXpx) and (min-width: ZZZpx) { Style:Style; } HTMLの読み込みソースでの指方法 <link rel="stylesheet" type="text/css" href="style.css" media="only [対応メディア] and (max-width: XXXpx) and (min-width: ZZZpx)"> メディアごとのサイズ 801px以上：PC 601px~800px：ネットブック 481px~600px：タブレット、iPhon4(ポートレート) 321px~480px：ス
iPhoneかAndroidかを判定してbodyにクラスを付けるjavascript｜クロノドライブ
iPhoneとAndroidに搭載されているブラウザは同じWebkitですが、バージョンの違いから表示が若干異なる部分があるようです。そこでiPhoneで表示された場合はbodyにclass=”iphone”、Androidで表示された場合はbodyにclass=”android”を付与するjavascriptをご紹介します。 サンプル サンプル ※iPhone/Androidで見てみてください。 ダウンロード ip-ad.zip 動作確認機種 docomo xperia、softbank desire iPhone3G、iPod touch 使い方 ダウンロードしたip-ad.jsをjquery.jsと一緒に読み込むだけで動作します。 HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。 現場で求められる人材となるためには、何を知っていて、何ができなけ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.webcreatornote.com/2012/02/%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E7%94%A8%E3%82%B5%E3%82%A4%E3%83%88%E3%81%A7%E9%9B%BB%E8%A9%B1%E7%99%BA%E4%BF%A1%E6%A9%9F%E8%83%BD%E3%82%92%E6%89%8B%E5%8B%95%E3%81%A7/
iPhoneデザインボックス