background-size－CSS3リファレンス
background-sizeプロパティは、背景画像のサイズを指定する際に使用します。 長さやパーセンテージで指定する場合、値を２つ記述すると、それぞれ記述した順に幅と高さを表します。 １つだけ指定した場合には、もう１つはautoと解釈されます。負の値を指定することはできません。 ■値 auto 自動的に算出される（初期値） contain 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する cover 縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する 長さ 背景画像の幅・高さを指定する パーセンテージ 背景領域に対する背景画像の幅・高さのパーセンテージを指定する CSSソースは外部ファイル（sample.css）に記述 p.sample1 { width:300px; height:80px; padding:15px; bo
決定版?! スマホページ用のリストレイアウトHTMLテンプレートを書いてみた
こんにちは、鴨田です。 年の瀬ですね。 年をとる毎に一年があっという間に過ぎてしまうので、 もう今年も終わりかと嘆く日々です。 ということで、個人的には今年最後のブログとなります。 スマホサイトを作っていると、 見出しリストの作り方というのが、大分テンプレート化するので、 今日は自分メモも兼ねて、リストテンプレートを作りたいと思います。 ● デザイン こういう感じのいかにもなリストを作ります。 ポイントは特にありませんが、せっかくなので画像はどんなサイズが来ても対応できるように、 縦横中央揃えに出来るjQueryライブラリを使います。 画面サイズは、横320pxとします。 そろそろ640pxくらいにしておきたい気がするのですが、 広告が320px対応が多かったりしますので。 ● HTML <article> <h1><a href="#list">リストタイトル</a></h1> <ul>
スマホサイトの機能比較表はどうデザインするか？ | 秋葉秀樹個人ブログ
table要素で構成された表組のデザインを採用する際にはモバイルサイトでも成立するかどうかを先に検討するべきでしょう。 しかしそうは言ってもこのような機能比較表は都合上どうしても横に長く、項目で割って列挙されるのでモバイルサイトでは非常に難しい見せ方の一つとされています。 指でフリックして横スライドするUIもJavaScriptなどゴリゴリに書けばできないこともないのですが「対応／非対応」の場所などは、何が「対応／非対応」かわからなくなる場合があります。そうです、画面が狭いからです。
安藤日記
安藤日記 安藤日記：デジタルガジェット好き「安藤幸央」の日々のメモ ( yukio.andoh@gmail.com ) [ http://twitter.com/yukio_andoh ] Design Sprint Newsletter https://designsprint.substack.com/ @tommmmy 4回やってきて、今回が5回目。最後の総集編です。 これまで4回やってきた、Android App Desings というイベントでした。 結構たくさんの人に来ていただけました。 参加者内訳は、開発者が6割強。残り4割弱がデザイナー。 デザイナーズハックとうデザイナー中心のコミュニティを細々とやっています。 7月に大阪から引っ越してきたばっかりで、まだなじめていません..... サブタイトルが 「デザイナーがコードから読み解く、 Androidアプリのデザインの幅を広げ
Air Freshener｜スマホサイト WEBデザイン集 AGT smartphone design gallery
香りのある生活へ Air Freshener for Roomのスマートフォン対応サイト
スマートフォンサイトのデザイン確認をするための多分ベストな方法 | ryodesignblog
スマートフォンサイトのデザインの表示確認をするのが面倒だったので、手軽に確認ができるようにするためのサイトをPHP+jQueryで作りました。僕の環境では現時点で一番お手軽な方法かなと思います。 「sp_test」として適当な名前でファイルも公開しますので、ご自身のサーバに設置していただければ、簡単にデザインチェックができるようになります。たぶん便利。 制作の理由 スマートフォンサイトのデザイン確認が面倒だなぁと思ったので。 例えば、画像をサーバーに上げて、画像のURLに直接アクセスしても、iPhoneだとうまく表示できないんですよね。横640pxの画像を上げても、2倍に拡大されたボケボケの画像になります。 htmlを用意してimgタグで画像を表示すればちゃんとRetina対応した表示を確認することができますが、htmlを用意するのが面倒です。 Adobe Edge Inspectを使えば
スマートフォン(iPhone/Android)アプリ制作時に役立つ画像サイズのまとめ
こんにちは、鴨田です。 最近、スマートフォン関連の仕事が多いのですが、 スマートフォン絡みのデザインをするときに、 この画像はどんなサイズだったっけ、 っていうことが多いので、まとめておきたいと思います。 ■画面サイズ[画面解像度](単位：px) iPhone3G / 3GS 320×480 iPhone4 640×960 iPad / iPad 2 768×1024 HT-03A 320×480 Xperia (SO-01B) / Xperia arc (SO-01C) 480×854 HTC Desire (X06HT) 480×800 Nexus One 480×800 Galaxy S 480×800 IS03 640×960 Galaxy Tab 600×1024 主要な機種だけ載せておきます。 AndroidはWide対応が主流ですね。 ■Lancherアイコンサイズ(単位：p
「Dreamweaver CS5」でiPhoneサイトを作るテクニックを伝授(後編)
アドビの期間限定ギャラリー「station 5」にて、「Dreamweaver CS5」によるiPhoneサイト制作に関するセミナーが開催された。セミナーでは、iPhoneサイト制作のための様々なテクニックが解説された。 セミナー前半の伊藤学氏に続いて登場したたにぐちまこと氏は、バージョン8からずっと「Dreamweaver」を使い続けているWeb制作者&プログラマー。トークのテーマは「『Dreamweaver CS5』の便利な使い方」について。たにぐち氏は、ヘビーユーザーならではの様々な技を紹介してくれた。 たにぐち氏は、アドビと協力して開発した機能拡張パック「iPhone site extension for Dreamweaver CS4/CS5」を2010年5月に無償で公開した。この拡張パックをインストールすると、新規ドキュメントの作成で「iPhone用アプリ」と「iPhone用ペ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
King’s Hawaiian Bakery｜スマホサイト WEBデザイン集 AGT smartphone design gallery