勉強サイト

コリス
http://coliss.com/

無料オンライン学習・講座で資格取得・スキルアップするならLivoo!
http://www.livoo.ac/

teratail【テラテイル】|思考するエンジニアのためのQAプラットフォーム
https://teratail.com/

WPJ - デザイナー、エンジニア、マーケターの「掛け算」のスキルアップを応援する パスファインディング・メディア
海外サイトを翻訳してる。有料でセミナーや他記事がみられる。
https://www.webprofessional.jp/

コムテブログ
http://commte.net/blog/

Webクリエイターボックス | WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。
http://www.webcreatorbox.com/

HTMLやCSSCMSなどのWeb関連のコース - lynda.com
https://www.lynda.jp/web

シラバス(Cyllabus) - キュレーション型 eラーニングシステム
https://cyllabus.jp/

Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]
https://prog-8.com/

CodeCombat - Learn how to code by playing a game jsの練習
https://codecombat.com/

img画像のwidth指定について<レスポンシブ/float>

imgタグのwidth指定の方法によって見える結果がかなり違ってくるので注意。

width/max-widthをimgに指定する場合、imgを囲うdivに指定する場合のそれぞれの

動きの変化を検証してみる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>floatの検証</title>
<style>
html, body, p {
  margin: 0;
  padding: 0;
  line-height:1.0;
}
img {
 border:none;
  vertical-align: center;
}    
    
/*①-----------------*/
p.a {
  float: left;
  max-width: 50%;
}
/*②-----------------*/
p.b {
  float: left;
  width: 50%;
}
/*③-----------------*/
p.aa img{
  float: left;
  max-width: 50%;
}
/*④-----------------*/
p.bb img {
  float: left;
  width: 50%;
}
</style>
</head>
<body>
<p class="a"><img src="img/01.png"></p>
<p class="a"><img src="img/02.png"></p>
    
<p class="b"><img src="img/01.png"></p>
<p class="b"><img src="img/02.png"></p>
    
<p class="aa"><img src="img/01.png"></p>
<p class="aa"><img src="img/02.png"></p>
    
<p class="bb"><img src="img/01.png"></p>
<p class="bb"><img src="img/02.png"></p>
</body>
</html>

pタグでimg(400X400px画像)を囲った場合、

①pにmax-width:50%;

  PC…400X400px画像が横に2つ並ぶ
  SP…widthがウィンドウサイズの50%  
  heightは400pxそのまま
  画像は縮小されず見切れる

②pにwidth:50%;

  PC…ウィンドウサイズの50%のpが2つ横に並ぶ。
     各々のpの中に400X400px画像がある。
  SP…①と同じ

③imgにmax-width:50%;

  PC…①と同じ
  SP…widthがウィンドウサイズの50%  
  画像が全て見える状態で見切れず縮小される

④imgにwidth:50%;

  PC…widthがウィンドウサイズの50%
  SP…③と同じ


つまり、
画像サイズより表示される範囲が小さくなった時に…

img画像にwidthもしくはmax-widthどちらで指定した場合でも、
widthもしくはmax-widthで指定したサイズが確保され、それに従ってheightも縮小される。⇒backgroundのcontainと似ている。


逆に、
imgを囲うpにwidthもしくはmax-widthどちらで指定した場合でも、
widthもしくはmax-widthで指定したサイズは確保されるが、heightは画像サイズ縦幅を保持し画像が見切れる。⇒backgroundのcoverと似ている。


また、
max-widthは、画像サイズより表示される範囲が小さくなった時に初めて効果があらわれるため、PCサイト時はimg画像のサイズで表示される。


※ちなみにpはdivにしても結果は同じになる。
※imgはwidth,height指定をしなくても画像が表示されるが、backgroundは指定しないと表示されない。