レスポンシブデザイン
padding-topでアスペクト比をコントロールする img要素の場合はwidth:100%とすると、自動的にアスペクト比を維持してくれますが、他の要素の場合はheightの代りにpadding-topを使うことで、アスペクト比をコントロールすることができます。 アスペクト比を求…
widthを100%で使用した時に border、padding、margin を使用するとどのような表示になるのかを確認しました。 確認内容 親と子のdiv要素を作り、それぞれwidthを100%にしました。 親要素にpadding、border、marginを付けた場合の親子div要素の表示を確認しま…
300px X 300px の画像を用意して、ウィンドウ幅を大きくした場合と小さくした場合の画像の変化を確認します。基本的な内容ですが、落とし穴がありそうなのでここで確認しておく必要を感じました。 確認は以下の4通り行います。 CSSで何も指定しない場合の表…
レスポンシブで画像がうまく表示されない場合があって苦労しました。 今後苦労しないために、img要素とbackgroundの４パターンで画像の表示を確認しました。 パターン１ imgタグをdivタグ囲む max-width: 100%; height: auto; パターン２ ※パターン１と２の…
レスポンシブWebデザインでマージンは可変させないで一定にし、コンテンツのみ可変にしたい場合があります。そんな時に便利な calc 関数の使い方についてまとめます。 参考Webページ developer.mozilla.org calc関数の書式 width:calc( boxSize% － fixedVal…
スマホ用画像とPC画像を、スマホ画像のサイズ(640px)を境に切り替えます。 スマホ用画像 01_sp.png 640px×300px PC用画像 01_pc.png 960px×300px スマホ用画像（画面幅は640px） 画像ファイルは、スマホ用の ”01_sp.png” が使用されています。 PC用画像（画…
PCのウィンドウサイズ一杯のページからスマホ用のページを作成しました。 PC用の画面 PC用の画面（ウィンドウの横幅を狭くした状態） スマホ用の画面 HTML <html lang="ja"><head><meta charset="utf-8"><title>VOGUE模擬サイト</title><meta name="viewport" content="width=device-width"><link rel="stylesheet" href="css/style.css"></head> <body><h1></h1></body></html>
CSS3のメディアクエリについてまとめておきます。 メディアクエリとは、ウィンドウサイズ、画面密度など閲覧環境の特性(メディア特性)に応じてCSSを分岐させることができる機能です。 メディアクエリの記述方法 記述方法には次のような3つの方法があります。…
レスポンシブWebデザインは、制作の前の設計が大切です。 どこまで対応するかを決める すべてのデバイスとOSとブラウザ、そしてその各バージョンに対応することは事実上不可能です。どこまで対応するのかを事前に決めておくことで、以降の作業がやりやすくな…
2カラムでレスポンシブなページを作成 ソースファイル HTML <html lang="ja"><head><meta charset="utf-8"><title>RWD枝豆</title><meta name="viewport" content="width=device-width"><link rel="stylesheet" href="css/style.css"></head> <body><div id="container"><header><h1><img src="img/logo.png" alt="枝豆隊ロゴ"></h1><h2>豆はカ…</h2></header></div></body></html>
