ページ全体を装飾する

さて。ここから作業に入ります。

まず、CSSが使える環境を整えましょう。
「first_web」フォルダの中に、「style.css」というファイルを作ります。

手順1:「first_web」フォルダを開き、右クリックから「テキストファイル」を選択

手順2:そのファイルの名前を「style.css」に変更

手順3:「拡張子を変更すると、ファイルが使えなくなる可能性があります。」と出てきますが、使えなくならないので「はい(Y)」をクリック

手順4:index.htmlを開いて、内を以下のように変更する(赤いところが追加箇所です)。

<head>
 <title>初めてWeb入門 テスト用ウェブサイト</title>
 <meta http-equiv="content-style-type" content="text/css">
 <link rel="stylesheet" href="style.css" type="text/css">
</head>

※これも、お決まりのフレーズです。覚えなくても構いません。

以上。完成です。
これで、style.cssがindex.htmlに反映されるようになりました。それでは、style.cssのアイコンをダブルクリックで開いてから、以下の作業を始めましょう。


関連記事

  1. 画像を使わずにセンスある見出しを作る

  2. 画像を表示する

  3. タイトルをつける

  4. 拡張子を表示させる

  5. 答え合わせ

  6. メニューをデザインする

お手本ナビの無料HPデザイン

ランダムピックアップ