背景画像を利用したデザイン | Design using background image

HTML

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

CSS

.back h1 {
margin: 0 0 20px 0;
font-size: 26px;
line-height: 1.2;
}
.back p {
margin: 0 0 20px 0;
font-size: 14px;
line-height: 1.6;
}
.back {
background-image: url(IMG_20190102_161500.jpg);
height: 300px;
background-position:50% 50%;
background-size: cover;
color:#fff;
text-shadow: 2px 2px 5px #000;
}

　

背景画像は拡大縮小をポイントにして要素の大きさに合わせて表示するため、background-sizeをcover、background-positionを50%,50%と中央に指定しています。| Since the background image is displayed according to the size of the element with the enlargement / reduction as the point, the background-size is specified as cover and the background-position is specified as 50% and 50% in the center.

背景画像に重ねたテキストを読みやすくするため、text-shadowを利用しています。文字から右に2ピクセル、下に2ピクセルずらした位置にぼかし幅を5ピクセルにした黒色（#000)の影を表示しています。| Text-shadow is used to make the text overlaid on the background image easier to read. A black (# 000) shadow with a blur width of 5 pixels is displayed at a position shifted 2 pixels to the right and 2 pixels below the character.

パーツを重ねて表示するデザイン | Design to display parts in layers

HTML

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

CSS

.button {
display: inline-block;
padding: 10px 30px;
background-color: #ed1a7b;
color: #fff;
font-size: 14px;
text-decoration: none;
text-align: center;
}
.button:hover {
outline: none;v
background-color: #ff9bca;
}
/* 円形にする設定 */
.button {
display: block;
height: 100px;
width: 100px;
max-width: 0 auto;
padding: 40px 0 0 0 ;
border-radius: 50px;
box-sizing: border-box;
}
/* パーツを重ねる設定 */
.back {
position: relative;
}
.back .button {
position: absolute;
bottom: -40px;
right: 30px;
}

円形にする設定ではwidthおよびheightの中で境界線やパディングも含めて処理するときはbox-sizingをborder-boxと指定します。| In the setting to make it circular, specify box-sizing as border-box when processing including borders and padding in width and height.

円形ボタンの表示位置を指定します。まず、親要素を基点に位置を指定できるようにするため、<div class="back">のpositionをrelativeと指定します。| Specifies the display position of the circular button. First, specify the position of <div class = "back"> as relative so that you can specify the position based on the parent element.

そしてボタン位置を指定するため、「.back .button」セレクタでpositionをabsoluteとします。| Then, in order to specify the button position, set the position to absolute in the ".back .button" selector.

ここでは親要素の右下を基点に、ボタン位置を設定しています。 | Here, the button position is set based on the lower right of the parent element.

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