PCサイトをスマホ対応 CSSテク自己まとめ（１・２回まとめ） - Kaleidoscope
PCサイトをスマホ対応するという記事を１・２回と続けてみて、意外とボリューム満載になってしまったので、 一旦ここまでのCSSテクについてまとめます。 ■第1回 メニュー編 ■記事はこちら ★タグでViewportの設定。メディアクエリによるCSS振り分け。 スマホサイトを作る上で欠かせない準備。 … <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--viewportの指定--> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <!--/viewportの指定--> <!--メディアクエリでPC用・
「スマホ対応サイト制作 初心者向け」-2.画像をCSSで操る編（後編）- - Kaleidoscope
【目次】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 前編の続きです。（前編はこちら） 3．CSS3グラデーションの活用 ヘッダはできあがりましたが、まだメニューの画像がヘンです。 こちらも、ヘッダでおこなったような方法が取れなくもないのですが、 さすがにメニューは５個もあるし、その分HTMLソースに記述するのは、なんだか気が引けます。。。 幸い画像がただのグラデーションなので、どうにかCSSを使って対応できるかもしれません。 CSS3には、グラデーションを描く機能があるため、それを活用してみたいと思います。 ★まず、メニュー画像は全てdisplay:none; この手法はもうおなじみ。 imain.cssに追記 #globalNav li>a>img{ display:none; } すると… 当然なのですが、メニューが無くなった。。。 メニュー画像を消してしまったので、
スマートフォン向けサイトの作り方エントリのまとめ:phpspot開発日誌
スマートフォン向けサイトの作り方エントリのまとめ。 スマートフォン元年といわれる2011年ですが、注目を集めているせいか、サイト作成法についてのエントリも盛り上がりをみせていますね。 個人的にもしっかり覚えておきたかったのでまとめてみました。 基本的には解像度が大きく異なるので、それにあったインタフェースに変えましょうね、という点と、HTML5/CSS3が使えるので駆使して楽にＵＩデザインしましょうという点、ユーザインタフェースがマウスではなくタッチである、という３点以外は、普通のサイト作りと変わりませんが、クセやバグがあったり、テクニックもあるので、しっかり押さえておきたいですね。 基本 スマートフォン向けサイトの作り方｜ユージック サイトの幅、高さ viewportによるズーム指定の方法 便利なJSライブラリ ユーザエージェント シュミレーター 等の有用情報 Androidサイトは横幅
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
