はじめに
HTMLとCSSの基礎を学びおえたので、ためしに明治おいしい牛乳のパッケージを模写してみました。
おいしい牛乳、略しておい牛です[要出典]。
さて、この円弧状の区切り線をつくるのがむずかしかったので、つくりかたをまとめておこうと思います。
つくりかた
１．
まず、パーツを用意します。
コードをみる
<div class="upper-box"></div>
<div class="lower-box">
<div class="lower-box-item"></div>
</div>
.upper-box {
width: 300px;
height: 100px;
background-color: #07b; /*ブルー*/
}
.lower-box {
width: 300px;
height: 50px;
border: 2px dashed #999; /*これらは*/
box-sizing: border-box; /*最後に消します*/
}
.lower-box-item {
position: relative;
left: -300px;
width: 900px;
height: 900px;
border: 15px double #07b; /*ブルー*/
border-radius: 50%;
box-sizing: border-box;
}
上部にズームインすると、このようになっています。
２．
つぎに、点線からはみ出た部分を切りとりましょう（overflow: hidden）。
CSS の overflow プロパティは、要素の内容が多すぎてブロック整形コンテキストに収まらない場合にどうするかを設定します。
出典: overflowプロパティ - MDN - Mozilla
コードをみる
<!-- 手順１とおなじ -->
.upper-box {
/* 手順１とおなじ */
}
.lower-box {
/* 手順１とおなじ */
overflow: hidden; /* New! */
}
.lower-box-item {
/* 手順１とおなじ */
}
３．
点線で囲まれた部分を上にずらしました（margin-top: -50px）。
注意 コードをみる
<!-- 手順2とおなじ -->
.upper-box {
/* 手順2とおなじ */
}
.lower-box {
margin-top: -50px; /* New! */
/* 手順2とおなじ */
}
.lower-box-item {
/* 手順2とおなじ */
background-color: #fff; /* New! */
}
lower-box-itemに対して、background-color: #fffも追加で指定してください。重なった部分がブルーに塗りつぶされてしまいます。
４．
最後に、わかりやすくするために付けていた点線を消してあげましょう。
完成したコードをみる
<div class="upper-box"></div>
<div class="lower-box">
<div class="lower-box-item"></div>
</div>
.upper-box {
width: 300px;
height: 100px;
background-color: #07b;
}
.lower-box {
margin-top: -50px;
width: 300px;
height: 50px;
overflow: hidden;
}
.lower-box-item {
position: relative;
left: -300px;
width: 900px;
height: 900px;
border: 15px double #07b;
border-radius: 50%;
box-sizing: border-box;
background-color: #fff;
}
これで完成しました。やったね。
おわりに
模写コーディングは時間がかかって大変ですが、とても勉強になります。
HTMLとCSSの基礎を学びおえた方は積極的に取りくんでみましょう。
また「ここはこうしたほうがいいよ」という点がございましたら、ぜひご指摘ください。
よろしくお願いします◎