§06-04…{border}の部分指定 – オンライン無料パソコン教室

(01) <h1>の下部分だけに「太線」「実線」「#FFCC00」の{border}を引きます。下だけにborderを設定するには「border-bottom」プロパティを使います。CSSファイルの<h1>に関する部分を以下のように更新してから、Webページをブラウジングしましょう。

h1{
background-color:#990000;
color:#FFFFFF;
border-bottom:thick solid #FFCC00;
}

(02) 個別のborderは以下のプロパティで設定可能です。

プロパティ名	borderの位置
border-top	上
border—bottom	下
border-right	右
border-left	左

(03) 同様に今度は<h1>の上部分に「点線」「標準線」「#66FFFF」のborderを先程と違った手法で引きます。「border-top-○○」プロパティを使って個別に設定します。CSSファイルの<h1>に関する部分を以下のように更新してから、Webページをブラウジングしましょう。

h1{
background-color:#990000;
color:#FFFFFF;
border-bottom:thick solid #FFCC00;
border-top-style:dashed;
border-top-width:medium;
border-top-color:#66FFFF;
}

(04) なお、左右のborderの太さを文字単位(em単位)で指定すると箇条書き記号のように見えます。<h2>内に左border「2em」「実線」「#3300FF」を引きましょう。CSSファイルの<h2>に関する部分を以下のように更新してから、Webページをブラウジングしましょう。

h2{
background-color:#FF6600;
color:#FFFFFF;
border-left:2em solid #3300FF;
}