スマートフォン対応でよく使う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
スクリプトが無効の場合のスタイル
たとえばホームページのビジュアル要素など、いったん非表示にしておいてスクリプトでふわっとフェードインさせたい、みたいなことはよくある。そのとき非表示にする操作も JavaScript にやらせると一瞬見えてしまうことがあるので CSS で非表示化したいが、それだとスクリプトが無効の場合に何も表示されなくなってしまう… というような、スクリプトによる操作を前提にしたスタイルのフォールバックをどうするかという問題。 ここのところよく使っていたのは、JavaScript で html 要素の class 属性を操作し、それをもとに CSS を書くという手。Modernizr でも使われてるあれ。 (function () { var root = document.documentElement; root.className = root.className.replace(/\bno[-_]
[CSS/JS]単一の記事にCSS/JSを適用する方法を調べた
jQueryプラグインtinyTips このマウスオーバーしたらツールチップがふわっと出てくるのはskuare.netさんで紹介されていたjQueryプラグインのtinyTipsを使用しています。 jQuery利用の軽量吹き出しJavaScript「tinyTips」｜skuare.net skuare.netさんのjQueryプラグイン紹介記事は、設置の仕方がシンプルに紹介してあって、いつも重宝しています。特にwebcre8のような、JavaScriptに明るくないデザイナーさんが参考にするにはぴったりのサイトだと思いますのでオススメしておきます☆ このプラグインを選んだ理由はツールチップの中に画像を含めたりすることもできるからですね。若干実装の仕方は手間があったりするのですが、画像を出すこともあるだろうなーと思ったので。 CSS/JSの記事ごとの実装(HTML5の場合) で、このページ
![[CSS/JS]単一の記事にCSS/JSを適用する方法を調べた](https://cdn-ak-scissors.b.st-hatena.com/image/square/90b1317c0d6b9c6ecf1438c0de247763c5305c45/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F09%2Fsingle-page-css-150x150.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
