HTML の ブロック要素 の 高さ と 幅 を 設定する ～CSS height: ピクセル数;とwidth: ピクセル数;～

目的

• HTMLファイルのブロック要素の高さと幅を設定する方法をまとめる

押さえるポイント

• 高さや幅を変更したいブロック要素をCSSで指定してサイズを設定する。
• 高さの指定にはheightプロパティを使用する。
• 幅の指定にはwidthプロパティを使用する。
• 高さと幅はピクセル数を用いて設定する。

高さの設定の書き方の例(CSS)

ブロック要素の名前かブロック要素のクラス名{
    height: ピクセル数;
}

幅の設定の書き方の例(CSS)

ブロック要素の名前かブロック要素のクラス名{
    width: ピクセル数;
}

より具体的な例

h1要素の高さを100px、幅を500pxに設定する。

〜サンプルコード〜

• 下記にHTMLファイルの内容を記載する。

<h1>おはようございます。</h1>

• CSSで上記のHTMLファイルのh1要素のフォントをAvenir Nextにする設定を行う。
• 下記にCSSファイルの内容を記載する。

h1 {
    height: 100px;
    width: 500px:
}