~学習するな実践せよ~TOP初心者のための「HTML/CSS」最速入門CSSで「高さ・横幅・背景色」を指定しようCSSで「高さ・横幅・背景色」を指定しよう2019/11/13前回は「CSSの基礎的な書き方」について学びましたが、今回は「高さ・横幅・色」を指定してボックスを作っていきます。これらの指定方法を学ぶことで、例えば「縦の長さが〇〇px、横幅が〇〇px、背景色が〇〇色のサイドバーが作りたい!」と思ったときに自由に作れるようになります。想定するボックスサイドバーなどの縦長のボックスを考えてみましょう。例では縦600px、300px、背景色は「skyblue」としておきましょう。※実際はこのbox内にメニューを出したり、検索窓を追加したりします。今回はシンプルに縦長のボックスを作成していきます。実際にボックスをコーディングしていくまず、このボックスを表示するためのHTMLを作成します。DOCTYPE等の記述は省きます。class="sidebar-box"></div>divを1つ作成し、このdivに「sidebar-box」というclassを設定しました。このclassに対して、「高さ・横幅・背景色」を指定していきます。skyblue;}classをcssで記述する場合はclass名の前に「.」ドットを書くんでしたね。プロパティは以下を使いました。背景色を指定します※よく読み方を間違えている人がいるので注意しましょう。ボックスの「高さ・横幅・背景色」の指定は結構簡単ですね。横長のボックスを作るなら、widthをheightよりも大きくすれば良いです。いろいろな色のボックスが作れるようになったと思います。次回はボックスとボックスとの間の隙間について学習していきましょう。この隙間は余白(マージンやパディング)と呼ばれます。