画像の表示の勉強

今日は画像の表示の勉強です。

まず＜img src="画像パス" alt="代替テキスト"＞

をHTMLに記述するのですが。

画像のサイズも一緒に決めてしまいます。

＜img src="画像パス" alt="代替テキスト" height="" width=""＞

前回作成した、トップページ画面に画像を挿入してみます。

今回私の記述はこんな感じです。

↓

HTML

＜img id="photo" src="./画像名" alt="ミニピン" width="80" height="80" /＞

CSS

#photo {

float:left;

}

画像となりの記述は＜p＞タグを使っています。

インライン要素とブロックレベル要素

インライン要素とブロックレベル要素

HTMLには大きく分けてインライン要素とブロックレベル要素の２つに分類されます。

インライン要素は基本１行の中に並べて配置することができます。

ブロックレベル要素は一個で１行を構成しますから、ブロックレベル要素同士を並べて配置することが基本できません。

ブロックレベル要素は他のブロックレベル要素・インライン要素・テキストを内側に含むことができます。

けれど、インライン要素にブロックレベル要素を含むことができません。

最初に本だけを読んでいるときは？？？

なんのことやら？理解するのが難しかったのですけど、実際自分でHTMLとCSSを書いていじってみると

よく解る！！！

というのは、float要素を教わったから。

float要素の説明も、だいたい回り込ませるって表現されていますけど「浮かせる」っていう表現があてはまるようです。

インライン要素

a

img

span

input

textarea

ブロックレベル要素

h１〜h６

table

div

p

ol・ul

hr

form