画面幅いっぱいに背景色を敷くCSS実装 | 第1回 全体を囲まない方法
画面幅いっぱいに背景色を敷くCSS実装 第1回 全体を囲まない方法 ブラウザのウィンドウの幅いっぱいに背景色を敷くことは、一見、簡単そうですが、意外と難航する場面があります。画面いっぱいに背景色を敷く方法のひとつとして全体を囲まない方法を紹介します。 画面幅全体に背景色を敷く 画面幅（ブラウザのウィンドウの幅）いっぱいに背景色を敷くことは、簡単にできそうに思えます。特筆することはありませんが、次のように指定します。 <body> <div class="Box">幅いっぱい</div> </body> body { margin: 0; } .Box { height: 300px; background: tomato; } .Boxはdiv要素で、デフォルトでdisplay: block;のため、親（厳密には包含ブロック）に収まり切るだけの幅になります。上記の場合、背景色はbody要素
知っておきたいCSS設計法 | 第1回 OOCSSの基本
知っておきたいCSS設計法 第1回 OOCSSの基本 HTMLテンプレートを設計する上で、基礎と考えられる概念のひとつOOCSSを取り上げます。オプジェクト指向のCSSとは何か？ 今回はその考え方の基本をまずおさえましょう。 はじめに このシリーズでは、OOCSS（オーオーシーエスエス）、BEM（ベム）、SMACSS（スマックス）という3つのCSS設計概念の概要を解説します。HTMLとCSSをどのように書いていけばよいかは、過去に「CSSの設計」シリーズにまとめました。今回のシリーズは、その2014年度版とでもいうような内容になっています。 というのも、CSSの設計を書いた頃と比較すると、さまざまな設計概念が広く知られるようになったものと思います。今回紹介するBEMやSMACSSが、その代表です。また、CSSのプリプロセッサSassのバージョンアップでは、BEMを意識したような機能なども追
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
