★タグ
<img src="～" alt="～" width="～" height="～" />
WEBページに画像を貼り付けるタグです。
src属性で画像のパス（※住所みたいなものだと思います。）
altは画像の説明を簡単に明快に書きます。アクセシビリティの観点からみて視覚に障害ある人とかの事も考えられてるんだと思います。意味のない記号や模様の画像などの場合には
alt=""（※属性名なし）でも可だそうです。
widthは画像の横のサイズ
heightは画像の縦のサイズを指定します。
（※単位はpxと決まっているので書きません。）
width、heightは現在のブラウザ類では指定しなくても大丈夫だそうです。
（※指定しないと画像の本来のサイズで貼り付けられます。）
でも指定しておいたほうがレイアウトの崩れを防げるので指定しておきましょう。
（※たぶんブラウザの読み込みの助けにもなると思います。）
widthとheightはCSSでも指定できますので、おなじサイズの画像がいっぱいあるときは
CSSで一括指定したほうが楽だそうです。
CSSでの記述は、
{ width: ～; height: ～; }みたいな感じです。
例えば
●<p><img src="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347266869" alt="猫” width="300" height="225" /></p>だと・・・
と指定した原寸大のサイズで表示されます。
●<p><img src="http://blog.cnobi.jp/v1/blog/user/50c7fe0bb94d9aff445a7fb29619ca3a/1347266869" alt="猫” /></p>でも・・・
画像そのままのサイズが表示されます。
●srcのパスをわざと間違えて
<p><img src="http://file.oyassanb.blog.shinobi.jp/85e62678aaa.jpeg" alt="猫" width="300" height="255" /></p>だと
画像のパス（※住所的なところ）が間違っているので画像は表示されませんがサイズは指定しているのでサイズの枠みたいなところは表示されます。猫はaltの属性値が表示されます。
●srcのパスをわざと間違えて、画像のサイズも指定しないと
<p><img src="http://file.oyassanb.blog.shinobi.jp/85e62678aaa.jpeg" alt="猫" /></p>だと
サイズをしていないのでこんな感じに表示されます。これだと、その後につづくレイアウトが崩れてしまうので可能性大なので、widthとheightは指定したほうがよさそうです。
★CSS
borderを使って、マークや下線を作る。
CSSを
●{ border-left: solid 16px #66aa66; pdding-left: 5px; }
等と指定してマークを作ります。そうすると・・・
HTMLについて
とborderをマーク的に使えます（※padding-leftで余白をHTMLについての右に5px空けています。）
●{ border-bottom: solid 2px #66aa66; pdding-bottom: 3px; }と指定すれば・・・
HTMLについて
こんな風に下線を付けられます。（※padding-bottomで余白をHTMLについての下に3px空けています。）
（※この二つはあくまでも例です。いろいろ自分でやってみましょう。）
↓先生がJPEGを軽量化しれくれるサイトを教えてくれました。使ってみると結構便利です。
JPEGmini
PR
