読者です 読者をやめる 読者になる 読者になる

レスポンシブで縦方向の間隔をコントロールする

padding-topでアスペクト比をコントロールする img要素の場合はwidth:100%とすると、自動的にアスペクト比を維持してくれますが、他の要素の場合はheightの代りにpadding-topを使うことで、アスペクト比をコントロールすることができます。 アスペクト比を求…

widthを100%でborder、padding、marginを試す

widthを100%で使用した時に border、padding、margin を使用するとどのような表示になるのかを確認しました。 確認内容 親と子のdiv要素を作り、それぞれwidthを100%にしました。 親要素にpadding、border、marginを付けた場合の親子div要素の表示を確認しま…

レスポンシブでwidthとmax-widthを使った画像の表示を確認する

300px X 300px の画像を用意して、ウィンドウ幅を大きくした場合と小さくした場合の画像の変化を確認します。基本的な内容ですが、落とし穴がありそうなのでここで確認しておく必要を感じました。 確認は以下の4通り行います。 CSSで何も指定しない場合の表…

レスポンシブで画像表示を確認

レスポンシブで画像がうまく表示されない場合があって苦労しました。 今後苦労しないために、img要素とbackgroundの4パターンで画像の表示を確認しました。 パターン1 imgタグをdivタグ囲む max-width: 100%; height: auto; パターン2 ※パターン1と2の…

レスポンシブでcalc関数を利用する

レスポンシブWebデザインでマージンは可変させないで一定にし、コンテンツのみ可変にしたい場合があります。そんな時に便利な calc 関数の使い方についてまとめます。 参考Webページ developer.mozilla.org calc関数の書式 width:calc( boxSize% - fixedVal…

jQueryで画像を切り替える

スマホ用画像とPC画像を、スマホ画像のサイズ(640px)を境に切り替えます。 スマホ用画像 01_sp.png 640px×300px PC用画像 01_pc.png 960px×300px スマホ用画像(画面幅は640px) 画像ファイルは、スマホ用の ”01_sp.png” が使用されています。 PC用画像(画…

VHを使った全画面ページのスマホ対応

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のメディアクエリ

CSS3のメディアクエリについてまとめておきます。 メディアクエリとは、ウィンドウサイズ、画面密度など閲覧環境の特性(メディア特性)に応じてCSSを分岐させることができる機能です。 メディアクエリの記述方法 記述方法には次のような3つの方法があります。…

レスポンシブWebデザインの設計

レスポンシブ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>