今回は、段落分けをします。
その前に作ろうと思うレイアウトを思い出して
このレイアウトの各段落の名前を付けます
こんな感じで名前をつけました
名前は何でも好きなものをつけて構いませんが
半角英文字でわかりやすいものにしましょう
daikakomi(大囲み)とsyoukakomi(小囲み)は
レイアウト崩れを防止するため囲みました
次に、HTMLを記述します。
段落は<div>～</div>で囲みます
<div>～</div>で囲まれたらブラウザが段落として認識します
段落の名前は「id」で付けています。
id＝"名前”は省いてもいいのですが
名前をつけていた方が後あと便利なので付けます
たとえば「header」に何かを設定するときは
headerという名前を指定するだけで設定できるのです
ここまでは、段落分けをしただけで
何かを表示させる命令ではないので
ブラウザで見ても、何も表示されません
基本的に、< と > に挟まれたものは
プラウザに命令する言語で、ブラウザには表示されません
ブラウザに表示させるものは > と < の外に記述します
試しに何かを表示させるため文字を入力してみます。
赤いラインが引いてあるものが表示されます
段落分けをしましたが、レイアウトは調節していないので
ただ規則正しく並んでいるだけです
色の指定もしていないので色は付いていません。
HTMLを分かりやすくするため、
画像処理ソフトで色分けをしてみました
こんな感じで段落分けをしています
ちなみに、緑色の文字<!-- ～ -->で挟まれたものは、
コメントといいましてプログラムなどを書くとき、
わかりやすくするために記述されます
<!-- と -->の間には何を書いてもブラウザが無視します
とりあえず今回は、段落分けをしてみました
レイアウトがまだできていませんのでピンと来ないかもしれませんが
分けることはできています
次は、段落ごとに色付けをしてみます
色の指定や細かいレイアウトなどのいろんな設定は
<head>～</head>内に<style>～</style>で記述していきます
ではまた次回
やらCGI
やらPHP
やら勉強しながら、ソフトを使わずに作ります。