編集ソフトVisual Studio Codeを使ってCSS(スタイルシート)でデザインをする!

BlueGriffonはCSS(スタイルシート)の編集には向いていないので編集ソフトVisual Studio Codeを使います。

編集ソフトVisual Studio Codeを使ってCSS(スタイルシート)でデザインを行います。

レイアウトされたhtmlファイル

htmlファイルを用意します。

CSSレイアウトはdivタグで作る!

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="wrapper">
      <div id="header">
        <h1>ヘ ッ ダー</h1>
      </div>
      <div id="contents">
        <h2>コンテンツ</h2>
        <h2> </h2>
      </div>
      <div id="menu">
        <ol>
          <li> メニュー</li>
          <li>メニュー</li>
          <li>メニュー</li>
        </ol>
      </div>
      <div id="footer">
        <h3>フ ッ タ ー<br>
        </h3>
      </div>
    </div>
  </body>
</html>

<div>に枠線を引く

<div> が透明だと作業がしづらいので枠線を引きレイアウトを区切ります。

CSSを書くのに「Visual Studio Code」を使います。

CSS(スタイルシート)の編集にVisual Studio Codeを使ってみる!

枠線を引くのにCSS(スタイルシート)を使います。

HTMLにスタイルシート(CSS)を適用するのにid属性を使います。

id属性
  1. <div>に固有の名前を割り当てる 。
  2. 同じid名は、1ページ中に1度しか使えない。
  3. #(シャープ)を使う
#contents {
  float: left;
}
#wrapper {
  width: 1002px;
  border: 2px solid #999999;
}
#header {
  border: 2px solid #009900;
}
#menu {
  width: 300px;
  float: right;
  border: 2px solid #000099;
}
#footer {
  clear: both;
  width: 1000px;
  border: 2px solid #999999;
}

HTMLにスタイルシート(CSS)を適用する。

枠線が引かれ作業がしやすくなりました。

枠線が引かれ作業がしやすくなりました。

特定のタグにスタイルシート(CSS)を適用する。

見出し<h1><h2><h3>に文字のサイズ・文字色などを指定しています。

タグにスタイルシートを設定する方法

タグ名{ 属性:値;}

h1 {
  color: #009900;
  font-size: 72px;
  text-align: center;
  font-weight: bold;
}
h2 {
  font-size: 60px;
  font-weight: bold;
  color: #999999;
  text-align: left;
}
h3 {
  color: black;
  font-weight: bold;
  text-align: center;
  font-size: 50px;
}

ホームページらしくなってきました。

ホームページらしくなってきました。

ヘッダー上部の余白を消す方法

ヘッダーを上にピッタリにさせたいのに勝手に余白が生じています。

*(アスタリスク)で全ての余白をリセットします。

*(アスタリスク)

「全ての要素に適用する」という意味を持ちます。

* { 
    margin: 0px; 
    padding: 0px; 
}

ヘッダー上部の余白がなくなりました。

ヘッダー上部の余白がなくなりました。

olにスタイルシート(CSS)を適用

*(アスタリスク)で全ての余白をリセットしたのでリストの数字が枠からはみ出してしまいました。

olにスタイルシート(CSS)を適用します。

タグにスタイルシートを設定する方法

タグ名{ 属性:値;}

ol {
  padding: 0 0 0 40px;
}

よく目にするホームページのレイアウトが出来上がりました。

よく目にするホームページのレイアウトが出来上がりました。

PHPで外部ファイルを読み込んでレイアウトを作る方法

無料のホームページ作成ソフトBlueGriffonでホームページを作る方法

コメント

タイトルとURLをコピーしました