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

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

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

ボックスを作る

CSSコード ブラウザ表示画面
ボックス
HTMLコード
コンテンツメニューに戻る

ボックスを入れ子にする

ボックス1  
ボックス2
CSSコード ブラウザ表示画面

ボックス1

ボックス2
HTMLコード
コンテンツメニューに戻る

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

ボックス1  
ボックス2
 
ボックス3
CSSコード ブラウザ表示画面

ボックス1

ボックス2
ボックス3
HTMLコード
コンテンツメニューに戻る

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

CSSコード ブラウザ表示画面

ボックス1

ボックス2
ボックス3
ここで寄せ(回り込み)をクリアする
ボックス4
HTMLコード
コンテンツメニューに戻る

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

CSSコード ブラウザ表示画面

ボックス1

ボックス2
ボックス3
ここで寄せ(回り込み)をクリアする
ボックス4
HTMLコード
コンテンツメニューに戻る

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

CSSコード ブラウザ表示画面

ボックス1

ボックス2
ボックス3
ここで寄せ(回り込み)をクリアする
ボックス4
HTMLコード
コンテンツメニューに戻る

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

CSSコード ブラウザ表示画面

背景画像の作り方

ボックス1

ボックス2
ボックス3
HTMLコード
コンテンツメニューに戻る
このエントリーをはてなブックマークに追加
Yahoo!ブックマークに登録
Clip to Evernote

メールを送る

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

SEO [PR] @J[hr ₦΍@ Cu`bg SEO