スタイルシートでボックスを作ってみよう｜ホームページの作り方｜ホームページで広告収入MASTER！

ホームページで広告収入MASTER！ >
ホームページの作り方 >
スタイルシートでボックスを作ってみよう

スタイルシートでボックスを作ってみよう

スタイルシートでボックスを作ってみよう

ボックスを作る	ボックスの背景を指定する
ボックスを作るボックスの寄せを指定するボックスを入れ子にするボックスの寄せ指定を解除するボックスにマージンを指定するボックスにパディングを指定する	ボックスの背景色と背景画像を指定する

ボックスを作る

CSSコード	ブラウザ表示画面
#fream{ border:1px solid #CCCCCC; width:220px; height:170px; } /* スタイルのプロパティや値は「;」で区切ることで複数指定することができますボックスがわかるように1pxの実線外枠をつけています */	ボックス
HTMLコード
<div id="fream"">ボックス</div>
コンテンツメニューに戻る

ボックスを入れ子にする

ボックス１　

ボックス２

CSSコード	ブラウザ表示画面
#fream1{ border:1px solid #CCCCCC; width:220px; height:170px; } #fream2{ border:1px solid #CCCCCC; width:220px; height:170px; }	ボックス１ボックス２
HTMLコード
<div id="fream1">ボックス１　 <div id="fream2">ボックス２</div> </div>
コンテンツメニューに戻る

ボックスの寄せを指定する

ボックス１　

ボックス２

　

ボックス３

CSSコード	ブラウザ表示画面
#fream1{ border:1px solid #CCCCCC; width:220px; height:170px } #fream2{ border:1px solid #CCCCCC; width:100px; height:40px; float:left } #fream3{ border:1px solid #CCCCCC; width:100px; height:40px; float:right }	ボックス１ボックス２ボックス３
HTMLコード
<div id="fream1">ボックス１　<div id="fream2">ボックス２</div> 　<div id="fream3">ボックス３</div> </div>
コンテンツメニューに戻る

ボックスの寄せ指定を解除する

CSSコード	ブラウザ表示画面
#fream1{ border:1px solid #CCCCCC; width:220px; height:170px } #fream2{ border:1px solid #CCCCCC; width:100px; height:40px; float:left } #fream3{ border:1px solid #CCCCCC; width:100px; height:40px; float:right } #fream4{ border:1px solid #CCCCCC; width:100px; height:40px } .clear{ clear:both }	ボックス１ボックス２ボックス３ここで寄せ(回り込み)をクリアするボックス４
HTMLコード
<div id="fream1">ボックス１　<div id="fream2">ボックス２</div> 　<div id="fream3">ボックス３</div> 　<div class="clear">ここで寄せ(回り込み)をクリアする</div> 　<div id="fream4">ボックス４</div> </div>
コンテンツメニューに戻る

ボックスにマージンを指定する

CSSコード	ブラウザ表示画面
#fream1{ border:1px solid #CCCCCC; width:220px; height:240px } #fream2{ border:1px solid #CCCCCC; width:100px; height:40px; float:left; margin:10px 0px 0px 0px } #fream3{ border:1px solid #CCCCCC; width:100px; height:40px; float:right } #fream4{ border:1px solid #CCCCCC; width:100px; height:40px } .clear{ clear:both } /* ボックス２(#fream2)にマージンで上に10px指定していますボックスの上端から上に向けて10pxの空間を作りますマージンは { margin:上右下左 } の順番で指定できます。 */	ボックス１ボックス２ボックス３ここで寄せ(回り込み)をクリアするボックス４
HTMLコード
<div id="fream1">ボックス１　<div id="fream2">ボックス２</div> 　<div id="fream3">ボックス３</div> 　<div class="clear">ここで寄せ(回り込み)をクリアする</div> 　<div id="fream4">ボックス４</div> </div>
コンテンツメニューに戻る

ボックスにパディングを指定する

CSSコード	ブラウザ表示画面
#fream1{ border:1px solid #CCCCCC; width:210px; height:170px; padding:10px 0px 0px 10px } #fream2{ border:1px solid #CCCCCC; width:100px; height:40px; float:left } #fream3{ border:1px solid #CCCCCC; width:100px; height:40px; float:right } #fream4{ border:1px solid #CCCCCC; width:100px; height:40px } .clear{ clear:both } /* ボックス１(#fream1)にパディングで上に10px、左に10px指定していますボックスの上端と左端から内側に向けて10pxの空間を作りますパディングもマージンと同様に { padding:上右下左 } の順番で指定できますパディングを使うときの注意点として、パディングを指定すると、外枠が広がってしまうので、外枠のサイズを変えずにパディングを設定するにはパディングを追加した分だけ、外枠から引く(マイナス)ことが必要ですここでも、外枠の#fream1のwidthを220pxから左パディングを指定した10px分を引き、210pxに変更しています */	ボックス１ボックス２ボックス３ここで寄せ(回り込み)をクリアするボックス４
HTMLコード
<div id="fream1">ボックス１　<div id="fream2">ボックス２</div> 　<div id="fream3">ボックス３</div> 　<div class="clear">ここで寄せ(回り込み)をクリアする</div> 　<div id="fream4">ボックス４</div> </div>
コンテンツメニューに戻る

ボックスの背景を指定する

CSSコード	ブラウザ表示画面
#fream1{ border:1px solid #CCCCCC; width:220px; height:170px; background:url(../img/bg_img.png) repeat } #fream2{ border:1px solid #CCCCCC; width:100px; height:40px; float:left; background-color:#FFFFFF } #fream3{ border:1px solid #CCCCCC; width:100px; height:40px; float:right; background-color:#FFFFFF } /* #fream1に背景画像(リピート指定)を指定し、#fream2と#fream3に背景色(白)を指定しています */ →背景画像の作り方	ボックス１ボックス２ボックス３
HTMLコード
<div id="fream1">ボックス１　<div id="fream2">ボックス２</div> 　<div id="fream3">ボックス３</div> </div>
コンテンツメニューに戻る

ホームページ作成・ホームページの作り方

ホームページ作成の手順

ホームページのオプション機能

検索エンジン対策

自由度の高いホームページを作成

アマゾンタイトル画像

ショートカットコンテンツ

コンテンツナビ

初めての方へ

自分のホームページを作ろう

アクセスを集めよう

HPで広告収入を稼ごう

ご質問やご意見ご感想はこちらのフォームをお使いください。

便利なツール

SEO		[PR] ��!��u��O ��z�[��y�[�W�J�� C�u��