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

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)に指定しています。| Here, the direction of the gradation is specified from top to bottom (to bottom), the color of the start point (0%) is specified as white (#fff), and the color of the end point (100%) is specified as yellowish green (# 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ピクセルに指定してます。するとこの段階では正方形になります。| In order to specify the diameter of the circle, the diameter of the circle is specified by the width and height. Here, it is specified as 250 pixels. Then it becomes a square at this stage.

250ピクセルにはborderとpaddingも含めて処理するため、box-sizingをborder-boxと指定してます。| Since 250 pixels is processed including border and padding, box-sizing is specified as border-box.

円形にするため、border-radiusで円の半径（ここでは250　÷　2　=　125px）を指定してます。| In order to make it circular, the radius of the circle (250 ÷ 2 = 125px here) is specified by border-radius.

パーツ全体を中央に配置するため、marginで0 autoと指定してます。| To center the entire part, we specify 0 auto in margin.

やっぱり詳しい人から深く学びたい人はこちらをどうぞ。| If you want to learn more from those who are familiar with it, please click here.