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

第03章:CSSの基礎1

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

§03-01…CSSファイルの作成

今まで作成したXHTMLファイルは、文章の構造のみを表しているだけです。次に構造だけではなく、デザイン・書式について考えます。現在見出しとなっている個所は大きく太く表示されてはいますが、もっと色々と書式を変更したくなりま...

§03-02…XHTML(HTML)ファイルの準備

以下のようなソースのWebページ「re02.htm」を作成してください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC...

§03-03…中央揃え{text-align}

(01) 通常のWebページでは全ての文章が左揃えになっています。ここでは<h1>タグ内のデータを中央揃えにする方法を学習します。書式の設定情報は、CSSファイル側に書き込みます。空のCSSファイル「sam0...

§03-04…HTMLファイルとCSSファイルの関連付け

(01) CSSで書き込んだ設定は、HTMLファイル側でそのCSSファイルと関連付けなければページに反映されません。関連付けをするために、</head>という閉じタグの上の行に、以下のようなテキストを追加しま...

§03-05…フォントサイズを変更する{font-size}

(01) <h1>内のフォントのサイズを大きくしましょう。一般の段落(<p>タグ内の段落)の5倍にします。フォントの大きさは「font-size」プロパティを使います。値は「3.5em」にしてくだ...

§03-06…文字の太さ{font-weight}

<h1>タグ内の文字は自動的に太く表示されています。これを通常の太さに変更します。文字の太さは「font-weight」で変更します。通常の太さは「normal」、太字の場合は「bold」を値として採用します...

§03-07…カラーネームでフォントの色を指定する{color}

(01) <h1>タグ内のフォントの色を緑にします。文字の色は「color」プロパティを使います。値は「green」です。以下の様にCSSを更新してからページをブラウジングしてください。 h1{ text-a...

§03-08…RGB16進数値でフォントの色を指定する

カラーネーム以外の色を使用する場合は、16進数値を使って、赤(R)・緑(G)・青(B)の光強度を指定することになります。光強度は弱い順に「00」「33」「66」「99」「CC」「FF」となります。RGBで色を指定する場合...

§03-09…背景色{background-color}

段落の背景の色は「background-color」プロパティを用います。<h2>の背景色を「#FFCC00」にしましょう。CSSファイルを更新してからページをブラウジングしてください。 h1{ text-a...