§04-05…余白{margin}
(01) <h1>の段落の背景色は現在右端までに及んでいます(実際には少し隙間がありますが)。この背景色が及ぶ距離を3文字分だけ、内側に詰めます。このように、親要素(この場合は全体を表すbody要素)から、該当部との距離を変更するには「margin」プロパティを用います。右側のmarginは「margin-right」プロパティを用いて指定します...
§04-04…{padding}2
(01) 「padding」プロパティを使うと、上下左右一度にpadding間隔を指定することができます。値欄に4つを半角スペースで区切って指定すると、「上」「右」「下」「左」と上から時計回り順に適用されます。先ほどの「padding-left」プロパティは削除し、新たにCSSファイルを以下のように更新してください。更新後はWebページをブラウジングします。...
§04-03…{padding}1
(01) <h1>である「中央観光」と、その背景色(黄色)に注目します。今、<h1>の背景部(黄色部)のぴったり左に中の文字(中央観光)が配置されていますが、ここに1文字分のスペースを入れてみます。段落内の端と文字との距離を決めるのが「padding」プロパティです。左端からの距離は「padding-left」プロパティを使います。1...
§04-02…＜body＞タグ
(01) 全体の背景色を変更します。ページ全体を操作するタグは<body>タグです。全体の背景色を「#CCFFFF」にするために、CSSファイルに以下のような書式情報を追加・更新してください。更新後はWebページをブラウジングします。 body{ background-color:#CCFFFF } (02) さて、<h1&...
§04-01…CSSの基礎2・準備
次のようなソースのWebページ「re03.htm」を作成してください。(もちろん今までに作成したファイルを流用していただいて結構です)。また、空のCSSファイル「sam03.css」も作成しておきます。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-...
§03-09…背景色{background-color}
段落の背景の色は「background-color」プロパティを用います。<h2>の背景色を「#FFCC00」にしましょう。CSSファイルを更新してからページをブラウジングしてください。 h1{ text-align:center; font-size:3.5em; font-weight:normal; color:green } ...
§03-08…RGB16進数値でフォントの色を指定する
カラーネーム以外の色を使用する場合は、16進数値を使って、赤(R)・緑(G)・青(B)の光強度を指定することになります。光強度は弱い順に「00」「33」「66」「99」「CC」「FF」となります。RGBで色を指定する場合、「#」の後にRGBの順番に強度を指定します。たとえば赤なら「#FF0000」、緑(ライム)なら「#00FF00」、青なら「#0000FF」...
§03-07…カラーネームでフォントの色を指定する{color}
(01) <h1>タグ内のフォントの色を緑にします。文字の色は「color」プロパティを使います。値は「green」です。以下の様にCSSを更新してからページをブラウジングしてください。 h1{ text-align:center; font-size:3.5em; font-weight:normal; color:green } ...
§03-06…文字の太さ{font-weight}
<h1>タグ内の文字は自動的に太く表示されています。これを通常の太さに変更します。文字の太さは「font-weight」で変更します。通常の太さは「normal」、太字の場合は「bold」を値として採用します。CSSファイルを以下のように変更してから上書きし、Webページをブラウジングしましょう。 h1{ text-align:center;...