枠で囲むデザイン | グラデーション

HTML

<div class=”frame”>
<h1>タイトル</h1>
<p>あいうえおかきくけこさしすせそたちつてと</p>
</div>

CSS

.frame {
padding: 20px;
border: solid 1px #aaa;
background-color: #cf0;
background-image: linear-gradient(to bottom,#fff 0%,#cf0 100%);
}
.frame h1 {
margin: 0 0 20px 0;
font-size: 26px;
line-height: 1.2;
}
.frame p {
margin: 0 0 20px 0;
font-size: 14px;
line-height: 1.6;
}

　

ここではグラデーションの方向を上から下（to bottom）に、始点（0％）の色を白色（#fff)に、終点（100％）の色を黄緑色（#cf0)に指定しています。

円形で囲むデザイン

HTML

<div class=”circle”> <h1>タイトル</h1>
<p>あいうえおかきくけこさしすせそたちつてと</p>
</div>

CSS

/* ここから円形の設定 */
.circle {
height: 250px;
width: 250px;
margin: 0 auto;
padding: 80px 0 0 0 ;
border-radius: 125px;
text-align: center;
box-sizing: border-box;
}
/* ここから枠の設定 */
.circle {
padding: 20px;
border:solid 1px #aaa;
box-shadow: 5px 5px 10px 0 grey;
background-color: #cf0;
}

円の直径を指定するため、横幅と高さで円の直径を指定してます。ここでは250ピクセルに指定してます。するとこの段階では正方形になります。

250ピクセルにはborderとpaddingも含めて処理するため、box-sizingをborder-boxと指定してます。.

円形にするため、border-radiusで円の半径（ここでは250　÷　2　=　125px）を指定してます。

パーツ全体を中央に配置するため、marginで0 autoと指定してます。

レベルアップにプロからの学びを。