背景画像を利用したデザイン | 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%と中央に指定しています。

背景画像に重ねたテキストを読みやすくするため、text-shadowを利用しています。文字から右に2ピクセル、下に2ピクセルずらした位置にぼかし幅を5ピクセルにした黒色（#000)の影を表示しています

パーツを重ねて表示するデザイン | 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と指定します。

円形ボタンの表示位置を指定します。まず、親要素を基点に位置を指定できるようにするため、<div class=”back”>のpositionをrelativeと指定します。

そしてボタン位置を指定するため、

ここでは親要素の右下を基点に、ボタン位置を設定しています。

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