今回はCSSのフレックスボックスを利用し、横並びにした要素に透過カラーを入れ、背景画像に重ねて表示する方法について解説します。
「color」や「background-color」プロパティに「rgba」関数を使用すると簡単に透過カラーを設定できます。
各要素を横並びにする
「.container」クラスに「display: flex;」を指定し、各要素を横並びにします。
<div class="container">
<h1>フレックスボックスで色分け</h1>
<div class="bg-box">R</div>
<div class="bg-box">G</div>
<div class="bg-box">B</div>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-image: url(...);
background-size: cover;
background-position: center;
}要素を重ねる
「h1」要素に「position: absolute;」を指定し、文字を重ねます。「.bg-box」クラスの幅と高さを100%にし、「display:flex;」を指定して文字を上下左右中央揃えに。
.container{...}
h1 {
position: absolute;
font-size: 30px;
color: white;
text-shadow: 0 0 10px #333;
}
.bg-box {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
font-size: 180px;
font-weight: bold;
font-style: italic;
}テキストと背景を色分けして透過させる
「.bg-box」に「:nth-of-type(n)」擬似クラスを指定。rgba関数で左から赤、緑、青を透過させた文字色と背景を設定しました。
.container{...}
h1{...}
.bg-box{...}
.bg-box:nth-of-type(1) {
color: rgba(255, 0, 0, .2);
background-color: rgba(255, 0, 0, .1);
}
.bg-box:nth-of-type(2) {
color: rgba(0, 255, 0, .2);
background-color: rgba(0, 255, 0, .1);
}
.bg-box:nth-of-type(3) {
color: rgba(0, 0, 255, .2);
background-color: rgba(0, 0, 255, .1);
}
全てのコード
コードを表示
<div class="pic-container pic-background">
<h1>フレックスボックスで色分け</h1>
<div class="bg-box">R</div>
<div class="bg-box">G</div>
<div class="bg-box">B</div>
</div>.pic-background {
background-image: var(--pic-image-data, none);
background-size: cover;
background-position: center;
}
.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
h1 {
position: absolute;
font-size: 30px;
color: white;
text-shadow: 0 0 10px #333;
}
.bg-box {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
font-size: 180px;
font-weight: bold;
font-style: italic;
}
.bg-box:nth-of-type(1) {
color: rgba(255, 0, 0, .2);
background-color: rgba(255, 0, 0, .1);
}
.bg-box:nth-of-type(2) {
color: rgba(0, 255, 0, .2);
background-color: rgba(0, 255, 0, .1);
}
.bg-box:nth-of-type(3) {
color: rgba(0, 0, 255, .2);
background-color: rgba(0, 0, 255, .1);
}
このWEBパーツを確認する
HTML・CSSのカスタマイズや動作確認ができます
