レスポンシブデザイン簡単導入法02 – よく使う項目まとめ編 | SEO Packブログ by ディーボ
ビューポートとメディアクエリを設定した後は、スマホ用のcssを調整しながら各デバイスに対応していくわけですが、その際によく使う、cssのポイントをご紹介します。 画像を可変にする レスポンシブデザインは、ビューポートの設置によって表示されるサイトの表示領域がデバイスのサイズへと変わります。その横幅に対して画像を可変にします。 下記の設定で、最大でも実寸サイズとなり、画面サイズからはみ出すことを防ぐことができます。それ以下のサイズの場合は画面幅に合わせて縮小されます。 img {max-width:100%;} スマホを横にしても文字サイズを変えない デフォルトでは、スマホを横にすると横幅に応じて、文字サイズが大きくなります。これはこれで見やすいですが、文字数が多い時など、デザイン上フォントサイズを変えたくない場合は、スマホ用cssに下記タグを追記します。 body {-webkit-te
商品デザインがどれだけ大切かがよく分かる「パッケージ変えてみた」7つの商品写真
カラフルでポップな箱に入った「トゥインキー」を、葉巻でも入っていそうな高級感溢れる箱に入れ、缶に入った炭酸飲料「フォー・ロコ」をワインボトルに入れ。 ジャンクフードに分類されるお菓子や飲料も、パッケージデザインを変えることで、少なくとも見かけに関しては高級食品の仲間入りを果たすことができる。 商品のデザインってこんなに大事なんだなぁというのがよく分かるビフォア・アフター写真。 お値段が2倍、3倍になっていても普通に売れそう。 【関連】 アイデア満載！工夫をこらした面白デザインの買い物袋 写真28枚 衝動買いしたくなるほどに素敵な、デザイン性溢れるキッチンツール 写真15枚 デザイン優先、お洒落で可愛い本のしおり14種 写真22枚 【画像】もしも大昔にツイッターやフェイスブック、スカイプ、ユーチューブがあったらというポスター4枚 1. トゥインキー 2. フォー・ロコ 3. ナーズ 4. キ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
