ウェブログラム ~学習するな実践せよ~

CSSで「高さ・横幅・背景色」を指定しよう

前回は「CSSの基礎的な書き方」について学びましたが、今回は「高さ・横幅・色」を指定してボックスを作っていきます。
これらの指定方法を学ぶことで、例えば「縦の長さが〇〇px、横幅が〇〇px、背景色が〇〇色のサイドバーが作りたい!」と思ったときに自由に作れるようになります。

想定するボックス

サイドバーなどの縦長のボックスを考えてみましょう。
例では縦600px、300px、背景色は「skyblue」としておきましょう。※実際はこのbox内にメニューを出したり、検索窓を追加したりします。
今回はシンプルに縦長のボックスを作成していきます。

実際にボックスをコーディングしていく

まず、このボックスを表示するためのHTMLを作成します。DOCTYPE等の記述は省きます。

index.html
<div class="sidebar-box"></div>

divを1つ作成し、このdivに「sidebar-box」というclassを設定しました。
このclassに対して、「高さ・横幅・背景色」を指定していきます。

style.css
.sidebar-box {
height: 600px;
width: 300px;
background: skyblue;
}

classをcssで記述する場合はclass名の前に「.」ドットを書くんでしたね。
プロパティは以下を使いました。

  • height: 高さを指定します(※読み方はハイト
  • width: 横幅を指定します(※読み方はウィス
  • background: 背景色を指定します

※よく読み方を間違えている人がいるので注意しましょう。

ボックスの「高さ・横幅・背景色」の指定は結構簡単ですね。
横長のボックスを作るなら、widthをheightよりも大きくすれば良いです。

これで縦長、横長、正方形のいろいろな色のボックスが作れるようになったと思います。

次回はボックスとボックスとの間の隙間について学習していきましょう。この隙間は余白(マージンやパディング)と呼ばれます。