KAWANO's PukiWiki Plus! - Lecture/JouhouC2010/5th/hr の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Lecture/JouhouC2010/5th/hr へ行く。

TITLE:水平線（復習）
*「水平線」をつくる（復習） [#d8688aa4]

水平線の作り方を、もう一度説明します。

**「水平線」をつくる [#l057d697]
水平線（横罫線）を作るには、
''hr要素''を使います。

#pre(novervatim){{
COLOR(red):<hr>
}}

hr要素を入れた場所に、
凹凸のある水平線をひきます。

***水平線の調整について（注意） [#ya0171f0]
hr要素に、''size や width属性''を追加すると、
線の太さや長さも設定できます。

COLOR(red):ただし、次回から学習する、デザインを設定するCSSでは、
COLOR(red):線の太さや長さは CSS で設定することが推奨されています。
そのため、今回の課題では、これまでに設定した線の太さや長さの設定部分は削除してもらうことになります。

#pre(novervatim){{
COLOR(red):<hr size="COLOR(blue):太さ"COLOR(red): width="COLOR(blue):長さ"COLOR(red):>
}}

size属性に、数値を設定すると、線の太さが変わります。
単位は「ピクセル」（画面を構成する点）です。

width属性に、
数値を設定すると、線の長さが変わります。
こちらも、単位は「ピクセル」です。
また、長さに「%」を設定すると、ウィンドウの横幅に対する割合で、
長さが設定されます。

***HTMLとブラウザでの表示例 [#z40a3c0b]
#pre(novervatim){{
COLOR(red):<hr>
COLOR(red):<hr size="COLOR(blue):10"COLOR(red):>
COLOR(red):<hr size="COLOR(blue):10"COLOR(red): width="COLOR(blue):20"COLOR(red):>
COLOR(red):<hr size="COLOR(blue):10"COLOR(red): width="COLOR(blue):80%"COLOR(red):>
}}

#ref(Lecture/JouhouC2010/2nd/hr/html03.png,nolink,水平線の例)

&br;
&navi2(Lecture/JouhouC2010/5th,next);進んでください。
----
#navi2(Lecture/JouhouC2010/5th,prev,toc,next)