webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

max-width:

大きめの画像 width: 3600pxと<h1> と <p>をセンター揃えで、body を狭くしても常にセンター揃えになるよう、レイアウトする。.

  • max-width: 100%
  • 親要素の幅100%に合わせて画像を縮小する。
  • 画像の大きさより表示するブロックが大きい時には、拡大しないで画像の大きさそのままで表示する。
  • 画像の大きさより表示するブロックが小さい時には、縮小がかかる。だだし、画像の表示領域に高さを指定しないこと。
  • 画像の解像度を下げない工夫。
  • フルードイメージはimgにしか使えない。background-imageには使えない。
  • <img>には幅高さを絶対に指定しない。そうすればスタイルシートで可変できる。
  • width: 100%=親要素の幅に対して100%になる。たとえ画素数うが少なくとも。表示するブロック中心。
  • max-width: 100%=画像の原寸よりも拡大はしない。画像中心
  • 100%に指定すれば、画像は常にセンタリングされて表示される。

html

<body>
<img src="max-width/pic03.jpg">
<div id="text">
<h1>記事のタイトル</h1>
<p>この文章は記事の本文です。この文章は記事の本文です。
この文章は記事の本文です。この文章は記事の本文です。
この文章は記事の本文です。この文章は記事の本文です。
この文章は記事の本文です。この文章は記事の本文です。</p>
<p>この文章は記事の本文です。この文章は記事の本文です。
この文章は記事の本文です。この文章は記事の本文です。
この文章は記事の本文です。この文章は記事の本文です。
この文章は記事の本文です。この文章は記事の本文です。</p>
</div>
</body>

 css 1

img, #text{
max-width: 100%;
padding: 2rem;
box-sizing: border-box;
}
h1{margin-bottom: 1rem;}
#text{line-height: 1.6;}                

f:id:ohta-felica:20160613220344p:plain

f:id:ohta-felica:20160613221057p:plain

  •  <img src="max-width/pic03.jpg" width="3600"height="2850">のように、htmlでimgの幅高さを指定すると、スクイーズがかかって縦に伸びた画像になります。(pcも同様。)

f:id:ohta-felica:20160613220950p:plain