ホームページ作成/タグ一覧シンプルなボックス

ホームページ作成トップ >

ボックス >

シンプルなボックス

スタイルシート(CSS)を使ってページをすっきりさせる

シンプルなボックス

サンプル

HTMLタグ

CSSタグ

/* --- ボックス --- */
.section {
width: 200px; /* ボックス幅 */
background-color: #ffffff; /* ボックス背景 */
border: 1px #cccccc solid; /* ボックス枠線 */
font-size: 75%; /* 文字サイズ */
}

/* --- 見出し --- */
.section h3 {
margin: 0; /* 見出しマージン */
padding: 6px 10px; /* 見出しパディング（上下、左右） */
background-color: #cccccc; /* 見出し背景 */
border-bottom: 1px #cccccc solid; /* 見出し下枠線 */
font-size: 100%; /* 見出し文字サイズ */
}

/* --- ボックス内段落 --- */
.section p {
margin: 1em 10px; /* 段落マージン（上下、左右） */
}