ＨＴＭＬとＣＳＳ
テーマ：ＨＴＭＬＨＴＭＬタグは < > </ > で一つです。
ＨＴＭＬソースを見ると、大体が <div> </div> の間に表示される文字や画像が挟まれています。
<h1> </h1> や
<ul> </ul> なども全て１セット。
この１セットを１つのボックスだと考えてください。
このボックス内に、表示される内容が入っている。
<div>文字</div>
つまり、ボックスの枠に色を塗れば
こういう事です。
<div><div>文字</div></div>
と、あれば、ボックスの中にボックスがあり、その中に文字が入るというわけです。
つまり、ボックスの枠に色を塗れば
こういう事です。
ボックスに何も指定しなければ
文字
こうなります。
ボックスの装飾などを行うのが、ＣＳＳ。
上の例であげた枠に色を塗るというものは
border : 1px #000000 solid;
です。
ＣＳＳ編集のような外部呼び出しの場合
ＨＴＭＬのタグに名前を付け指定します。
それが、id と class です。
ＨＴＭＬタグを見ると <div id=" "> </div> や <div class=" "> </div> とあるのがそうです。
これは任意でつけられますが、アメブロの場合はＨＴＭＬが弄れないので、既にあるものにＣＳＳを指定することになります。
仮に、<div id="red">文字</div> とあるとします。
id の場合、ＣＳＳでは「#red」となっています。
仮に、<div class="red">文字</div> とあるとします。
class の場合、ＣＳＳでは「.red」となっています。
因みに、記事内でＣＳＳを利用する場合。
<p style=" ">文字</p>
と、「style=" "」を使って直接書き込みます。
例えば、<p style="background-color:#ffaaaa;">文字</p> とすると
文字
こうなります。
直接書き込むのが面倒な場合、例えばよく使うものなどは
ＣＳＳ編集画面に追記もできます。
ＣＳＳ編集 に
.pink { background-color : #ffaaaa ;}
と、書き込んでおきます。
記事を書く際には
<p class="pink">文字</p>
と、書けば、上↑のような文字に背景色が出るようになります。
class名を自分の名前などにもすると便利ですよね。
.about4u {color : red ; font-size : 20px ; }
と、しておけば
<p class="about4u">about4u</p>
だけで
about4u
と、なります。
通常このようにする場合は
<p style="color:red;font-size:20px;">about4u</p>
と、イチイチ書きこまねばならないので、よく使う文字装飾はＣＳＳに追記するといいですね。
話を戻して…。
例えば
<div id="1"><div class="2">文字</div></div>
という、ＨＴＭＬにＣＳＳで装飾していきましょう。
ＣＳＳ編集画面で、id="1" と class="2" を見つけ出します（実際にはありません）。
#1 { }
.2 { }
まず、id="1" に黒枠、背景色にピンク、横幅100px、高さ100pxを指定します。
#1 {
border : 1px #000000 solid ;
background-color : #ffaaaa ;
height : 100px ;
width : 100px ;
}
.2 { }
すると
こういう状態になります。
今度は、class="2" に、黒枠、背景色白、margin5px、padding10pxを指定します。
#1 {
border : 1px #000000 solid ; /*-- 黒枠 --*/
background-color : #ffaaaa ; /*-- 背景色ピンク --*/
height : 100px ; /*-- 横幅 --*/
width : 100px; /*-- 高さ--*/
}
.2 {
border : 1px #000000 solid ; /*-- 黒枠 --*/
background-color : #ffffff ; /*-- 背景色白 --*/
margin : 5px ; /*-- ２のボックスの外側の余白 --*/
padding : 10px ; /*-- ２のボックスの内側の余白 --*/
}
すると
こういう状態になります。
通常、ボックスは表示されませんが、ボックスに装飾するのがＣＳＳだと思ってください。
ＣＳＳを弄れば、大抵どんなことも可能！
<div>文字1</div><div>文字2</div>
通常は
文字1
文字2
と、表示されますが、
文字1 文字2
と、並べる事も可能。
そして
文字2 文字1
と、逆に並べる事も可能。
ＨＴＭＬの並び順に表示されるわけではなく、ＣＳＳでどんな場所にも表示できます。
１つ１つのボックスを装飾し、置きたい場所に置く。
パズルのようなものですね。
