NO IMAGE

§05-08…囲み線基本{border}

(01) <h2>を、太さ2pxの実線で囲みます。この囲み線を指定する際には、太さを指定する「border-width」プロパティと、線の種類を指定する「border-style」プロパティの指定が必要です。太さの値は「2px」、実線を表す値は「solid」となります。CSSファイルの<h2>要素の部分を以下のように更新してください。...

記事を読む

NO IMAGE

§05-07…フォント{font-family}

(01) 通常IEでは、表示フォントに「MSPゴシック」が採用されています。これをヒゲ(セリフ)・払いの付いた書体に変更しましょう。フォントの種類は「font-familiy」プロパティを使います。セリフ付き書体を採用するには、値を「serif」にします(インストールされているセリフ系フォントの中から適切なものが自動選択される)。CSSファイルの<h1...

記事を読む

NO IMAGE

§05-06…行の高さ{line-height}

<p>タグ内の行の高さをフォントサイズの2倍にします。行の高さは「line-height」プロパティで設定します。CSSファイルの<p>要素の部分を以下のように更新してください。更新後はWebページをブラウジングします。 p{ text-indent:1em; line-height:2.0; }

記事を読む

NO IMAGE

§05-05…字下げ{text-indent}

<p>タグ内のテキストを1字分字下げします。字下げ幅を決めるのは「text-indent」プロパティです。CSSファイルに以下のような<p>要素の書式情報を追加してください。更新後はWebページをブラウジングします。 p{ text-indent:1em; }

記事を読む

NO IMAGE

§05-04…スモールキャピタル{font-variant}

英単語の小文字の部分を小さな大文字(スモールキャピタル表示)にするには 「font-variant」プロパティの値を「small-caps」にします。<h1>タグ内の英単語をスモールキャピタル表示にします。CSSファイルの<h1>要素の部分を以下のように更新してください。更新後はWebページをブラウジングします。 h1{ bac...

記事を読む

NO IMAGE

§05-03…斜体{font-style}

<h2>内のテキストを斜体にします。斜体にするには「font-style」プロパティの値を「italic」にします。CSSファイルの<h2>要素の部分を以下のように更新してください。更新後はWebページをブラウジングします。 h2{ color:#FF3333; font-weight:normal; font-style:i...

記事を読む

NO IMAGE

§05-02…<body>の{margin}

(01) IEの標準状態では、body内部とウィンドウの間に若干の空間があります。 (02) この隙間を無くして各段落の背景色をぴったりウィンドウにつけるには、事前にbodyのmarginを「0」にする必要があります。なお、「0」の場合は「0em」のように単位を付けなくても「0」で適用されます。CSSファイルの<body>要素の部分...

記事を読む

NO IMAGE

§05-01…CSSの基礎3・準備

(01) 次のようなソースのWebページ「re04.htm」を作成してください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <html xmlns="" x...

記事を読む

NO IMAGE

第05章:CSSの基礎3

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

記事を読む

NO IMAGE

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

(01) <h2>内の文字の間隔を広げます。文字の間隔を変更するには「letter-spacing」プロパティを用います。0.5文字分空けたいので、CSSファイルの{h2}部を以下のように更新してください。更新後はWebページをブラウジングします。 h2{ background-color:#00FF00; letter-spacing:0...

記事を読む

広告ブロックブラウザーではコンテンツが表示できません