このページの短縮URL(リンク用) 第04章:CSSの基礎2 – オンライン無料パソコン講座 | PCセミナー

第04章:CSSの基礎2

「第04章:CSSの基礎2」の学習内容です。

§04-01…CSSの基礎2・準備

次のようなソースのWebページ「re03.htm」を作成してください。(もちろん今までに作成したファイルを流用していただいて結構です)。また、空のCSSファイル「sam03.css」も作成しておきます。 <?xml...

§04-02…<body>タグ

(01) 全体の背景色を変更します。ページ全体を操作するタグは<body>タグです。全体の背景色を「#CCFFFF」にするために、CSSファイルに以下のような書式情報を追加・更新してください。更新後はWebペ...

§04-03…{padding}1

(01) <h1>である「中央観光」と、その背景色(黄色)に注目します。今、<h1>の背景部(黄色部)のぴったり左に中の文字(中央観光)が配置されていますが、ここに1文字分のスペースを入れてみます...

§04-04…{padding}2

(01) 「padding」プロパティを使うと、上下左右一度にpadding間隔を指定することができます。値欄に4つを半角スペースで区切って指定すると、「上」「右」「下」「左」と上から時計回り順に適用されます。先ほどの「...

§04-05…余白{margin}

(01) <h1>の段落の背景色は現在右端までに及んでいます(実際には少し隙間がありますが)。この背景色が及ぶ距離を3文字分だけ、内側に詰めます。このように、親要素(この場合は全体を表すbody要素)から、該...

§04-06…文字の間隔{letter-spacing}

(01) <h2>内の文字の間隔を広げます。文字の間隔を変更するには「letter-spacing」プロパティを用います。0.5文字分空けたいので、CSSファイルの{h2}部を以下のように更新してください。更...