Life is Tech! Lesson
オリジナル制作サンプル集
枠線を二重にする
難易度：
プロパティ：border
関連レッスン：Chapter 1 レッスン 1
できあがりイメージ
つくりかた
Step1
枠線を二重にする要素をHTMLから探す
HTML
<header>
<h1>Mom’s Bakery</h1>
</header>
このHTMLのh1タグで囲まれているところに対し、CSSを反映させていきます。
Step2
二重にする要素のCSSセレクタを探す
CSSのセレクタで h1 を探しましょう。
CSS
h1 {
color: #ffffee;/* フォントの色 */
font-size: 90px;/* フォントの大きさ */
font-family: lobster;/* フォントの種類 */
border-style: solid;/* 線の種類 */
border-color: orange;/* 線の色 */
border-width: 10px;/* 線の太さ */
text-align: center;/* 文字・画像を中央にそろえる */
padding: 20px;/* 内側の余白 */
margin: 30px;/* 外側の余白 */
background-color: #00C5C7;/* 背景色*/
}
サンプルでは h1 に指定しています。
分かりやすくするために背景色を水色(#00C5C7)に指定して、border-radius(枠線の角丸)を削除しています。
Step3
h1からborderプロパティを探す
border-styleとborder-color、border-widthプロパティをみつけてください。
CSS
h1 {
color: #ffffee;/* フォントの色 */
font-size: 90px;/* フォントの大きさ */
font-family: lobster;/* フォントの種類 */
border-style: double;/* 線の種類 */
border-color: white;/* 線の色 */
border-width: 16px;/* 線の太さ */
text-align: center;/* 文字・画像を中央にそろえる */
padding: 20px;/* 内側の余白 */
margin: 30px;/* 外側の余白 */
background-color: #00C5C7;/* 背景色*/
}
border-style を double (２重線) に変更します。
border-style を 白にborder-width を 16px に変更します。
線の色や太さは好きな設定にしてみましょう。
Step4
コードを書き換えるかコピー＆ペーストする
CSS
border-style: double;/* 線の種類 */
border-color: white;/* 線の色 */
border-width: 16px;/* 線の太さ */
コピーしたコードを目的の箇所にペースト（上書き貼り付け）するか、直接書き換えてみましょう。
Step5
実際の見え方を確認する
枠線が二重線になったら完了です。
