今回はブロック、段落、改行について
最初にも話しましたが、htmlは文書なので段落や改行が必要になります。
ブロック要素として<div>というタグを使用します。
<div> – ブロック要素
※とほほのWWW入門の説明がわかりやすいのでタグの詳しい説明はリンク先を参考にしてください。
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset="UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-language" content="ja" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプル1-3</title>
</head>
<body>
<div>
HelloWorld!
</div>
<div>
<img src="images/sampleImg01.jpg" />
<div>
</body>
</html>
これをブラウザで表示すると以下のようになります。
HelloWorl!と画像は別のブロックになりました。
また、文書内で段落を分けるときは<p>タグを使用します。
<p> – 段落
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset="UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-language" content="ja" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプル1-3</title>
</head>
<body>
<div>
<p>
HelloWorld!
</p>
<p>
こんにちわ、世界！
</p>
</div>
<div>
<img src="images/sampleImg01.jpg" />
<div>
</body>
</html>
全体を文書として考えたときにブロック、段落、改行を小学校の頃国語で習ったようなことを考えながら作成するとイメージしやすいと思います。
なお、段落内で改行をしたいときには<br />タグを使用します。
<br> – 改行
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset="UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-language" content="ja" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプル1-3</title>
</head>
<body>
<div>
<p>
HelloWorld!
</p>
<p>
吾輩わがはいは猫である。名前はまだ無い。<br />
どこで生れたかとんと見当けんとうがつかぬ。<br />
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br />
吾輩はここで始めて人間というものを見た。<br />
しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。<br />
この書生というのは時々我々を捕つかまえて煮にて食うという話である。<br />
しかしその当時は何という考もなかったから別段恐しいとも思わなかった。<br />
ただ彼の掌てのひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。<br />
掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始みはじめであろう。<br />
この時妙なものだと思った感じが今でも残っている。<br />
第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶やかんだ。<br />
その後ご猫にもだいぶ逢あったがこんな片輪かたわには一度も出会でくわした事がない。<br />
のみならず顔の真中があまりに突起している。<br />
そうしてその穴の中から時々ぷうぷうと煙けむりを吹く。<br />
どうも咽むせぽくて実に弱った。<br />
これが人間の飲む煙草たばこというものである事はようやくこの頃知った。
</p>
<p>
この書生の掌の裏うちでしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。<br />
書生が動くのか自分だけが動くのか分らないが無暗むやみに眼が廻る。<br />
胸が悪くなる。<br />
到底とうてい助からないと思っていると、どさりと音がして眼から火が出た。<br />
それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。
</p>
</div>
<div>
<img src="images/sampleImg01.jpg" />
<div>
</body>
</html>
