『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。CSS前回の続きです。前回は、ボックスの構造、padding、borderプロパティの指定方法を学習しました。ボックスの構造を理解しよう!その1この2回目は、「marginプロパティとその注意点」「ボックスとwidthプロパティの関係」について解説します。考えているボックスと他のボックスとの間隔を設定するにはmarginプロパティを使います。隣接するボックスがない場合には、webページが表示されているウィンドウとの距離になります。paddingプロパティと同様にmarginプロパティの値を1つだけ記述すると、上下左右に同じサイズのマージンが挿入されます。値を1つ指定する上下左右に同じサイズのマージンが挿入されます。値を2つ指定する記述順に、上下・左右のマージンになります。値を3つ指定する記述順に、上・左右・下のマージンになります。値を4つ指定する記述順に、時計回りに上・右・下・左のマージンになります。30px;}※値が0の時には単位は省略できます。※複数指定は半角スペースで区切ります。上下左右、どれか1つだけ指定したい場合などには、以下のプロパティを使うこともできます。margin-top:20px;}ボックスの上下のマージンは相殺される動画では、h1の下方向のマージンを30pxp要素の上方向のマージンを10pxに指定しています。表示を確認するとマージンは30pxしかとられていません。これは、上下方向のマージンが隣り合うボックスに影響されるからです。ボックスのレイアウトを決める際には、こういうケースにも気を付ける必要があります。マージンの上下の影響も計算に入れておきましょう。ボックスとwidthプロパティの関係ボックスの概念には、マージン、ボーダー、パディングが含まれます。そのため、ボックス全体の幅を指定する場合には、これらの値も考慮する必要があります。旧バージョンと解釈の違い旧バージョンのブラウザ(IE5.5など)では、widthプロパティの解釈が違います。widthプロパティの中にボーダーとパディングの値を含むため、ボックスを使用したレイアウトの際には注意する必要があります。以下のサイト様がとても詳しく解説されています。ボックスモデルの解釈の不具合(IE)http://www.dspt.net/stylesheet_css/001/ie_error1.html私は、独学しながらホームページ制作やWebテンプレート作成の仕事をしていた頃、いつも自信がありませんでした。基本をすっ飛ばして実践しながら進むタイプでしたので、少し複雑なレイアウトになると「レイアウトが崩れないか」が常に気になります。Explorerのバージョンによっては崩れている。自分の環境ではちゃんと表示されているが、納品後は大丈夫なのか???レイアウトが崩れる原因はいくつかありますが、ボックスの幅の指定間違いもその一つです。ボックスとwidthプロパティの関係、幅の算出方法がわかるようになると、自信を持ってレイアウトを組めるようになります。FukumotoフリーランスWebデザイナー・Webスクール講師。子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ】を運営。フリーランスでWebデザイナーを目指す方々のサポートに注力している。『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。