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

レスポンシブデザイン

300px X 300px の画像を用意して、ウィンドウ幅を大きくした場合と小さくした場合の画像の変化を確認します。基本的な内容ですが、落とし穴がありそうなのでここで確認しておく必要を感じました。

 

確認は以下の4通り行います。

  1. CSSで何も指定しない場合の表示
  2. CSSでimg要素を [width:100%] にした場合の表示
  3. CSSでimg要素を [max-widt:100%]にした場合の表示
  4. CSSでimg要素を [max-width:ピクセル指定] した場合の表示

 

１．CSSで何も指定しない場合の表示

HTML

<img src="img/mazda_axela300-300.jpg" alt="#">

 

元の画像　300px X 300px

f:id:develog:20161204184206p:plain

 

ウィンドウの横幅を300pxを超えるサイズにしても画像は拡大されません。

f:id:develog:20161204184225p:plain

ウィンドウの横幅を300pxより小さくしても画像は縮小されません。

縦幅を同時に小さくしても画像は縮小されません。

f:id:develog:20161204184247p:plain

 

２．CSSでimg要素を [width:100%] にした場合の表示

HTML

<img src="img/mazda_axela300-300.jpg" alt="#">

 

CSS

img {
width: 100%;
}

元の画像　300px X 300px

f:id:develog:20161204184206p:plain

 

ウィンドウの横幅を300pxを超えるサイズにすると、画像は縦横同じ比で拡大されます。

img要素に [width:100%] とすると、画像はウィンドウの横幅と同じになるように拡大します。

ウィンドウの縦幅は大きくしても画像は拡大されません。

f:id:develog:20161204185341p:plain

 

ウィンドウの横幅を300pxより小さくすると画像は縦横同じ比で縮小されます。

img要素に [width:100%] とすると、画像はウィンドウ幅と同じになるように縮小します。

ウィンドウの縦幅は小さくしても画像は縮小されません。

f:id:develog:20161204185349p:plain

 

３．CSSでimg要素を [max-width:100%]にした場合の表示

 

HTML

<img src="img/mazda_axela300-300.jpg" alt="#">

 

CSS

img {
max-width: 100%;
}

 

元の画像　300px X 300px

f:id:develog:20161204184206p:plain

 

ウィンドウの横幅を300pxを超えるサイズにしても、画像は拡大されません。

img要素を [max-width:100%] にすると、画像は元画像の300pxを超えて拡大しません。

f:id:develog:20161204193854p:plain

 

ウィンドウの横幅を300pxより小さくすると画像は縦横同じ比で縮小されます。

img要素を [max-width:100%] にすると、[width:100%] にしたのと同じ表示になります。

f:id:develog:20161204194041p:plain

 

４．CSSでimg要素を [max-width:ピクセル指定] した場合の表示

 

HTML

<img src="img/mazda_axela300-300.jpg" alt="#">

 

CSS

img {
max-width: 400px;　　<=これだけではCSSに何も指定しなかったのと同じ表示
}

 

[max-width:ピクセル指定] を指定しただけでは、CSSに何も指定しなかった場合と同じ表示になります。例えば [max-width:400px] としても、元画像の300pxを超えて拡大はしません。また、縮小もしません。

400pxまで画像を拡大させ縮小も可能にするには、同時に [width:100%] の指定が必要になります。

 

CSS

img {
max-width: 400px;
width: 100%;
}

 

元の画像　300px X 300px

f:id:develog:20161204184206p:plain

 

ウィンドウの横幅を300pxを超えるサイズにすると、画像は縦横同じ比で400pxまで拡大されます。

f:id:develog:20161204195932p:plain

 

ウィンドウの横幅を300pxより小さくすると画像は縦横同じ比で縮小されます。

img要素を [width:100%] にしたのと同じ表示になります。

f:id:develog:20161204195944p:plain

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

レスポンシブデザイン

レスポンシブで画像がうまく表示されない場合があって苦労しました。

今後苦労しないために、img要素とbackgroundの４パターンで画像の表示を確認しました。

 

パターン１

　imgタグをdivタグ囲む

　　max-width: 100%;
　　height: auto;

パターン２　　　　　　　※パターン１と２の違いは青い部分

　imgタグをdivタグで囲む

　　width: 100%;
　　height: auto;

パターン３

　divタグの中でbackgroundを使用

　　background: #C00;
　　width: 100%;
　　height: 400px;
　　background: url(img/400-400.png) no-repeat 0 0/contain;

パターン４　　　　　　※パターン３と４の違いは赤い部分

　divタグの中でbackgroundを使用

　　background: #C00;
　　width: 100%;
　　height: 400px;
　　background: url(img/400-400.png) no-repeat 0 0/cover;

 

画像はすべて同じ縦400px、横400pxを使用しました。

 

ウィンドウ幅を786pxにした時の表示

f:id:develog:20161202175314p:plain

パターン１

　ウィンドウ幅が画像より大きい400pxを超えた場合でも、画像は400px以上には拡大されません。これは「max-width: 100%」の設定があるからです。

パターン２

　ウィンドウ幅が画像より大きい400pxを超えた場合は、画像はウィンドウ幅に拡大されます。これは「max-width: 100%」ではなく、「width: 100%」の設定があるからです。画像を本来のサイズを超えて表示させると、画質を劣化させて表示させることになりのでやってはいけません。

パターン３

　ウィンドウ幅が画像より大きい400pxを超えた場合でも、画像は400pxを超えて拡大されていません。「width:100%」でも拡大されないのは、heightが400pxのままだからです。横幅を401px以上にすると画像は拡大されます。

一番注意しなければならないのは、widthを大きくして画像サイズを超えると画像はそれ以上拡大されないですが、widthの領域は存在しているということです。

パターン４

　ウィンドウ幅が画像より大きい400pxを超えた場合は、画像はウィンドウ幅に拡大されます。元画像の縦横比を維持したまま拡大されれば、きれいに画像全体が表示されます。縦横比が異なる場合の表示は、エリアをすべて覆うように拡大表示されますが画像全体は表示されません。

画像を本来のサイズを超えて表示させると、画質を劣化させて表示させることになりのでやってはいけません。

 

 

 

ウィンドウ幅を250pxにした時の表示

f:id:develog:20161202175326p:plain

 

パターン１

　ウィンドウ幅を画像より小さい250pxにした場合は、画像は縦横均等に縮小されています。

パターン２

　ウィンドウ幅を画像より小さい250pxにした場合は、画像は縦横均等に縮小されています。

パターン３

　ウィンドウ幅を画像より小さい250pxにした場合は、画像は縦横均等に縮小されています。

横幅を400px以下に縮小したい場合は、横幅または縦幅を400px以下にします。ここでは横幅だけを250pxにました。

一番注意しなければならないのは、縮小しなかったほうの領域は存在しているということです。widthを小さくしてもheightはその時の幅で領域として存在します。この例の場合は、heightは400pxで存在しているため、その下のp要素がその領域分下に表示されています。

パターン４

　ウィンドウ幅を元画像の400pxより小さくすると、画像はウィンドウの右から隠れていきます。

 

 ソースファイル

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>RWD　画像の扱い</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
html,body,p {
margin: 0;
padding: 0;
}
img {
vertical-align: bottom;
}
p {
font-size:18px;
font-weight: bold;
margin: 20px 0;
}
/*パターン１
-----------------------------------------------------------*/
#img1 img {
max-width: 100%;
height: auto;
}
/*
img1{width:100%;}としたのと同様の動き
img1 img{width:100%;}とするとパターン２と同様の動き
*/

/*パターン２
-----------------------------------------------------------*/
#img2 img {
width: 100%;
height: auto;
}
/*
widthが200pxまでの動きはパターン１と同じ
widthが200pxを超えると画像200pxを超えて拡大される
*/

/*パターン３
-----------------------------------------------------------*/
#bac1 {
background: #C00;
width: 100%;
height: 400px;
background: url(img/400-400.png) no-repeat 0 0/contain;
}

/*パターン４
-----------------------------------------------------------*/
#bac2 {
background: #C00;
width: 100%;
height: 400px;
background: url(img/400-400.png) no-repeat 0 0/cover;
}
</style>
</head>

<body>
<p>↓パターン１</p>
<div id="img1"><img src="img/400-400.png" alt="#"></div>
<p>↑<br>#img1 img {max-width: 100%;height: auto;}</p>

<p>↓パターン２</p>
<div id="img2"><img src="img/400-400.png" alt="#"></div>
<p>↑<br>#img2 img {width: 100%;height: auto;}</p>

<p>↓パターン３</p>
<div id="bac1"></div>
<p>↑<br>#bac1 {background: #C00;<br>width: 100%;<br>height: 400px;<br>background: url(img/400-400.png) no-repeat 0 0/contain;
}</p>

<p>↓パターン４</p>
<div id="bac2"></div>
<p>↑<br>#bac2 {background: #C00;<br>width: 100%;<br>height: 400px;<br>background: url(img/400-400.png) no-repeat 0 0/cover;
}</p>
</body>
</html>

flexboxのプロパティ

flexboxのプロパティ

flexboxコンテナプロパティ

  flex-direction

　　flexコンテナの主軸方向を決める

　　row | row-reverse | col |col-reverse

 

  flex-wrap

　　flexアイテムを1行か複数行かを決める

　　nowrap | wrap | wrap-reverse

 

  flex-flow

　　flex-directionとflex-wrapのショートハンド

　　<flex-direction> <flex-wrap>

 

  justify-content

　　flexコンテナの主軸に沿って1行のflexアイテムの配置を決める

　　flex-start | flex-end | center |space-between | space-around

 

  align-items

　　flexコンテナのクロス軸に沿って1行のflexアイテムの配置を決める

　　stretch | flex-start | flex-end | center | baseline

 

  align-content

　　flexコンテナの主軸に沿って複数行のflexアイテムの配置を決める

　　stretch | flex-start | flex-end | center | space-between | space-around

 

 flexboxアイテムプロパティ 

　order

　　flexアイテムの表示順をコントロールする

　　整数

 

　flex-grow

　　flexアイテムの伸びる倍率を指定

　　整数

 

　flex-shrink

　　flexアイテムの縮む倍率を指定

　　整数

 

　flex-basis

　　flexアイテムの主軸方向のサイズを指定

　　auto | 単位付きの数値

 

　flex

　　flex-grow、flex-shrink、flex-basisのショートハンド

　　<flex-grow> <flex-shrink> <flex-basis>

 

　align-self

　　flexアイテムのクロス軸方向の整列をalign-itemsの指定より優先させる

　　auto | stretch | flex-start | flex-end | center

 

 

 

flexboxを使う 1

CSS3

フレキシブルボックスレイアウト（flexible Box Layout Module）

flexboxはWebページを柔軟にレイアウトするために作られたもので、 親要素（Flexboxコンテナ）の中に子要素（Flexboxアイテム）を並べていくという考え方でレイアウトします。

flexboxの特徴

  • アイテム同士の高さを自動で揃える
  • アイテム同士の上下方向位置揃えをする
  • アイテム同士を均等配置する
  • アイテム同士の水平・垂直方向への整列ができる
  • CSSだけでアイテム表示の順番を指定できる
  • 仕様が複雑で学習難易度が高い

 

flexboxを試す

ulを使って子要素のliを並べるには、通常はulにoverflow:hidden、liにfloatを使っていますが、 flexboxを使って同様のことを行います。

 

左から横に並べる（flex-direction: row;）

f:id:develog:20161201084908p:plain

 

右から横に並べる（flex-direction: row-reverse;）

f:id:develog:20161201084913p:plain

 

上から下に並べる（flex-direction: column;）

         f:id:develog:20161201084916p:plain

 

下から上に並べる（flex-direction: column-reverse;）

         f:id:develog:20161201084920p:plain

 

ソースファイル

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>flexboxを使ったレイアウト</title>
<style>
html,body,ul,li {
margin: 0 ;
padding: 0;
}
ul {
list-style: none;
width: 80%;
margin: 10px auto;
/*---------------------------------------------*/
display: flex;　　　　　　　　　　/*liの親要素であるulに記述*/
flex-direction: row;　　　　　　　　/*左から右に並べる*/
/*flex-direction: row-reverse;*/　　　/*右から左に並べる*/
/*flex-direction: column;*/　　　　　/*上から下に並べる*/
/*flex-direction: column-reverse;*/　/*下から上に並べる*/
/*---------------------------------------------*/
}
li {
width: 20%;
height: 100px;
background: #F30;
text-align: center;
line-height: 100px;
font-size: 20px;
font-weight:bold;
color: #FFF;
}
li:nth-child(even) {
background: #FC0;
}
</style>
</head>

<body>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>
</body>
</html>

ポジションレイアウト　fixed

CSS HTML

positionを使って表示位置を指定

 

表示位置の指定方法の種類

  • static　　　ポジションレイアウトを行わない
  • relative　　通常の表示位置を基点にした位置指定
  • absolute　　親要素を基点にした位置指定
  • fixed　　　ブラウザ画面を基点にした位置指定
  • page　　　ページボックスやリージョンボックスを基点にした位置指定

 

fixedはbodyを基点にした位置指定

baseをfixedにすると、親要素のcontainer基準ではなくbodyが基準になります。そして、baseの子要素であるbox1からbox5までが親要素に合わせてfixedになります。子要素のz-index指定はbaseの内側の関係では有効ですが、baseの外との関係では親と同じになるため、box6がbox4の上に表示されます。

 

f:id:develog:20161130102737p:plain

 

ウインドウを縦スクロールした状態

f:id:develog:20161130102750p:plain

 

baseのz-indexを4にすると、box6の上に表示されます。

f:id:develog:20161130105204p:plain

 

HTML,CSSのソース

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>position</title>
<style>
html,body {
margin: 0;
}
body {
background: #555;
color: #FFF;
}
#container {
background: #AAA;
width: 500px;
height: 800px;
margin: 50px;
position: relative;/*positionの基点にする*/
}
.box {
width: 200px;
height: 200px;
}
.base {
background: #24B989;
position: fixed;/*fixedは親要素基準ではなくbody基準*/
top: 100px;
left: 100px;
}
.box1 {/*実行結果の番号1*/
background: #8BC10E;
position: absolute;/*base基準*/
top: 50px;
left: 65px;
z-index: 1;
}
.box2 {/*実行結果の番号2*/
background: #BEC819;/*base基準*/
position: absolute;
top: 100px;
left: 120px;
z-index: 2;
}
.box3 {/*実行結果の番号3*/
background: #B79317;/*base基準*/
position: static;
width: 75px;
height: 75px;
}
.box4 {/*実行結果の番号4*/
background: #98531D;/*base基準*/
position: absolute;
top: 150px;
left: 170px;
z-index: 4;
}
.box5 {/*実行結果の番号5*/
background: #AB391F;/*box3基準*/
position: static;
width: 75px;
height: 75px;
}
.box6 {/*実行結果の番号6*/
background: #CD171D;/*body基準*/
position: absolute;
top: 300px;
left: 150px;
z-index: 3;
}
</style>
</head>

<body>
body
<div id="container">
container
<div class="box base">base(fixed) body基準
<!--親要素がfixedならその子要素のbox1～box5もfixedになる-->
<!--子要素のz-index指定はbaseの内側の関係では有効だが、baseの外との関係では親と同じになるため、box6がbox4の上に表示される。-->
<div class="box box1">box1 base基準 z-index:1</div>
<div class="box box2">box2 base基準 z-index:2</div>
<div class="box box3">box3 base基準</div>
<div class="box box4">box4 base基準 z-index:4</div>
<div class="box box5">box5 base基準</div>
</div><!--/.box .base-->
</div><!--/#container-->
<div class="box box6">box6 body基準 z-index:3</div>
</body>
</html>

ポジションレイアウト　absolute

CSS HTML

positionを使って表示位置を指定

 

表示位置の指定方法の種類

  • static　　　ポジションレイアウトを行わない
  • relative　　通常の表示位置を基点にした位置指定
  • absolute　　親要素を基点にした位置指定
  • fixed　　　ブラウザ画面を基点にした位置指定
  • page　　　ページボックスやリージョンボックスを基点にした位置指定

 

absoluteは親要素を基点にした位置指定

 

f:id:develog:20161130095125p:plain

 

HTML,CSSソース

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>position</title>
<style>
html,body {
margin: 0;
}
body {
background: #555;
color: #FFF;
}
#container {
background: #AAA;
width: 400px;
height: 400px;
margin: 50px;
position: relative;/*positionの基点にする*/
}
.box {
width: 150px;
height: 150px;
}
.base {
background: #24B989;
position: absolute;/*container基準*/
top: 50px;
left: 50px;
}
.box1 {/*実行結果の番号1*/
background: #8BC10E;
position: absolute;/*base基準*/
top: 50px;
left: 65px;
z-index: 1;
}
.box2 {/*実行結果の番号2*/
background: #BEC819;/*base基準*/
position: absolute;
top: 100px;
left: 120px;
z-index: 2;
}
.box3 {/*実行結果の番号3*/
background: #B79317;/*base基準*/
position: static;
width: 75px;
height: 75px;
}
.box4 {/*実行結果の番号4*/
background: #98531D;/*base基準*/
position: absolute;
top: 150px;
left: 170px;
z-index: 4;
}
.box5 {/*実行結果の番号5*/
background: #AB391F;/*box3基準*/
position: static;
width: 75px;
height: 75px;
}
.box6 {/*実行結果の番号6*/
background: #CD171D;/*body基準*/
position: absolute;
top: 300px;
left: 150px;
z-index: 3;
}
</style>
</head>

<body>
body
<div id="container">
container
<div class="box base">base container基準
<div class="box box1">box1 base基準 z-index:1</div>
<div class="box box2">box2 base基準 z-index:2</div>
<div class="box box3">box3 base基準</div>
<div class="box box4">box4 base基準 z-index:4</div>
<div class="box box5">box5 base基準</div>
</div><!--/.box .base-->
</div><!--/#container-->
<div class="box box6">box6 body基準 z-index:3</div>
</body>
</html>

Webページの画像を一括ダウンロードする

その他

Mozilla Firefoxで画像をダウンロードする手順

１．Firefoxでダウンロードしたい画像があるページを表示

２．表示したページ上でマウスを右クリック

３．「ページの情報を表示」を選択

f:id:develog:20161127190801p:plain

 

４．「メディア」を選択し、「すべて選択」をクリック

f:id:develog:20161127190805p:plain

 

５．「名前を付けて保存」をクリック

f:id:develog:20161127190809p:plain

 

６．「フォルダの選択」

画像をダウンロードするフォルダを指定します。f:id:develog:20161127190814p:plain

以上