今回は、
タグで「BOX」の概念を勉強してみましょう。
その前に
「part1.html」ファイルを「TeraPad」で開いて下さい。
コメントで記述されている部分に「!」を記述足します。
赤字の部分です。
<!--全体を包むwapperというid-->
すべてのコメント部分に「!」を記述して下さい。
これで、「HTML」ファイルには記述は残りますが、ブラウザでは表示されません。
コメントアウトされたということになります。
上書き保存を忘れないでくださいね。
次に、「style1.css」ファイルを開きます。
以下を記述して下さい。記述する場所はどこでも構わないのですが、とりあえず最後の行以降に記述しましょう。
太字の部分です
p
{
border-color:#c60000; ←「border」(境界線)は「color」(色)を「#c60000」(赤茶色)
border-style:solid; ←「style」(線の種類)を「solid」(直線)
border-width:2px; ←(境界線)は「width」(線の太さ)を「2px」(2ピクセル)
}
「border」とは境界線のことです。それぞれのdiv(領域)には境界線があります。
この「border」は普段は表示されません。それを今回は強制的に表示してみようというわけです。
なお、この「border」は４辺ありますので丁度、箱の中にコンテンツが表示されるので「BOX」の概念などと呼ばれることがあります。
今回のセレクタ「boder」(境界線)は「color」(色)を「#c60000」(赤茶色)、「style」(線の種類)を「solid」(直線)、「width」(線の太さ)を「2px」(2ピクセル)で、表示しなさいという「宣言」になります。
上書き保存をして「part1.html」ファイルをブラウザで確認して下さい。
すべての
タグに「CSS」が適用されています。
コンテンツが箱の中に入っているというイメージが出来たなら、この箱の中のスペースを作ってみましょう。
赤字の部分です。
「padding」とは「border」の内側のスペース部分のセレクタです。
p
{
border-color:#c60000; ←(境界線)は「color」(色)を「#c60000」(赤茶色)
border-style:solid; ←(境界線)は「style」(線の種類)を「solid」(直線)
border-width:2px; ←(境界線)は「width」(線の太さ)を「2px」(2ピクセル)
padding:30px; ←(隙間)は「30px」(30ピクセル)
}
上書き保存をして「part1.html」ファイルをブラウザで確認して下さい。
４辺の内側ににスペースが出来たのがわかりますね。
この、boxの概念をよく理解しておいて下さい。
図を示しておきますが、わかるでしょうか？
今回は、ココまでにしておきます。
※お知らせ
ご訪問いつもありがとうございます。m(__)m
このブログではCSSのTipsをご紹介するブログにしようと考えていたのですが、今のところCSSの基礎が中心の記事になっています。
そこで私がまぐまぐで発行しているメルマガを、チョット、チョットチョット紹介させて下さい。
タイトルは「無料テンプレート付 簡単ホームページ講座」といいます。
第17号まで発行しておりますが、一区切りついたので新たな講座になります。内容は「リストでリンクボタンを作成する」というような内容になります。
重複する場面もあるとは思いますがよろしければご購読下さい。
