この記事について
この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。
emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。
三角形や矢印をWebブラウザーで表示するためには、PNGなどのラスター画像、SVG、CSSを使う方法があります。
場面に応じた実装方法を選ぶことで、該当箇所に変更があった場合に対応しやすくなります。
この記事では、実装方法によってどのような違いが出るのか、3つのパターンで解説します。
- コンテンツの区切りで斜めになっている背景
- 手順や流れでよくある矢印
- before/afterでの矢印
セクショニングコンテンツの区切りで斜めになっている背景
セクショニングコンテンツの区切りで斜めになっている背景を実現するには、画像とCSSのどちらで実装すると汎用性が高くなるでしょうか。
2つの方法で比較してみます。
画像で実装した場合
まず画像を用いた場合を見てみます。
画像を使う場合は背景画像での実装が考えられますが、その場合も2つのパターンが考えられます。
・セクショニングコンテンツ全体を覆う画像
・上部の三角形＋長方形
セクショニングコンテンツ全体を覆う画像で指定した場合
以下のようなCSSとした場合、PNG形式の画像ファイルで三角のパーツを透明にしていると、想定していたよりも長い文章が入った場合、長方形で塗られたようになってしまいます。
background:url(背景画像ファイル名) no-repeat top center #ebebeb;
JPEG形式の画像ファイルでは上部のコンテンツの背景色が変更になったり、指定した色コードと同じ色を使用しているはずなのに見た目は違って見える。ということが起きます。
上部の三角形＋長方形で指定した場合
三角形のパーツが背景色で塗られることがないように、擬似要素を使用します。
レスポンシブ対応が必要になるので、Webブラウザーの幅が変化したときの対応をあらかじめ考えておかなくてはなりません。
その上で実装時にどうすればいいかを考えます。
- Webブラウザーの幅に合わせて画像を拡大・縮小させるのか
- 画像のサイズはそのままに常に画像の中心が表示された状態にするのか
Webブラウザーの幅に合わせて画像を表示する場合
Webブラウザーの幅に合わせて画像を表示する場合では、以下のことが想定されます。
- 不要な隙間ができる
- 思うような角度で表示されない可能性があるので、background-positionで細かい調整が必要になる
- タブレットやスマホサイズとデバイスごとで三角形の画像を作り直す必要がある
画像の中心を表示した状態
微妙なWebブラウザーの幅でも画像の中心を表示しておく場合は、以下のことが想定されます。
- 画像の幅とWebブラウザーの幅が合わないので、不要な横スクロールバーが表示されないように対応する必要がある
- 思うような角度で表示されない可能性があるので、background-positionで細かい調整が必要になる
- PCで表示したものと同じ画像ファイルを使用すると角度にならない可能性があるので、タブレットやスマホサイズとデバイスごとで三角形の画像を作り直す必要がある
このように画像を用いる場合は、どちらの場合も画像を都度調整する必要があります。
CSSで実装した場合
CSSを使用した場合です。
まずはHTMLとCSSをみてみます。
HTML
<section id="section1" class="section-bg">
<div class="c-container">
<h2>TITLE1</h2>
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</section>
<section class="section-bg-naname">
<div class="c-container">
<h2>TITLE2</h2>
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</section>CSS
.section-bg-naname{
position:relative;
background:yellow;
padding: 50px;
transform:skewY(-3deg);
margin-top:-50px;
}
.section-bg-naname .c-container{
transform:skewY(3deg);
}
.section-bg{
background:gray;
padding: 50px;
padding-bottom:100px;
}
.c-container {
margin:50px auto;
padding:50px;
max-width:600px;
background:#fff;
position:relative;
z-index:5;
}HTMLでは斜めの表示をしたい箇所で.section-bg-nanameというclass名を指定しています。
CSSを見るとtransform:skewY(-3deg);という指定があります。
このように斜めに表示するために、section全体を斜めにし、section内のdivで斜めにした分を戻すことで実現しています。
この実装方法では角度が変更になった場合も、数値を修正するだけで簡単に対応できます。
section自体に角度を指定しているので、レスポンシブ対応のためにデバイスごとに画像を作り直す必要もありません。
※上記埋め込みの［Result］内はスクロール可能です。
※上記埋め込み内の右上の［EDIT ON CODEPEN］をクリックすると、別のタブとして大きく表示できます。
手順や流れなどで使用する矢印
手順や流れなどでよく使われている矢印の実装では画像とCSSどちらの実装方法が向いているでしょうか。
PNGやSVGの画像ファイルを使用して実装した場合
この場合、三角形のパーツのみなのでCSSを見たときに画像で実装されているということがわかりやすくなりますが、画像ファイルで実装すると色を変更したい場合には画像ファイルを書き出し直す必要があります。
SVGを使用する場合、画像がファイルとして書き出すのではなく、background-imageでSVGのコードを指定すると、色コードを変更するだけで簡単に変更できます。
ですが、コードの変更箇所が多少わかりづらい、Webブラウザーによっては表示されないことがあるのがデメリットです。
画像を使用せずにCSSのみで実装した場合
CSSで実装する場合は、borderを使用して三角形を表示します。
まずはHTMLとCSSをみてみます。
HTML
<ul class="flow">
<li class="flow_item"><span>STEP1</span>流れ1のテキスト</li>
<li class="flow_item"><span>STEP2</span>流れ2のテキスト</li>
<li class="flow_item"><span>STEP3</span>流れ3のテキスト</li>
</ul>CSS
/* ul,li reset */
ul li{
list-style:none;
}
.flow{
max-width:400px;
}
.flow_item{
margin-bottom:2em;
padding:1em;
background:#ebebeb;
position:relative;
}
.flow_item span{
margin-right:1em;
font-weight:bold;
}
.flow_item:not(:last-of-type)::after{
content:"";
display:block;
position: absolute;
top: 100%;
left: calc(50% - 20px);
width: 0;
height: 0;
border-style: solid;
border-width: 20px;
border-color: #f2c200 transparent transparent transparent;
}
このようにCSSを使用するとborderの値を変更するだけで三角形の大きさ、色を調整できます。
before/afterでの矢印
画像ファイルを使用して実装する場合は、前項の『手順や流れなどでよくある矢印』と同様にPNGやSVGの形式の画像ファイルで実装することになります。
色を変更したい場合には画像ファイルを都度書き出し、SVGコードを使用した場合はわかりづらく、Webブラウザーによっては表示されないことがあります。
CSSで実装した場合
CSSで実装する場合です。
まずはHTMLとCSSをみてみます。
HTML
<div class="flex-container">
<div class="before">
<div class="img-area"><img src="http://placehold.jp/400x225.png" alt=""></div>
<p>before</p>
</div>
<div class="after">
<div class="img-area"><img src="http://placehold.jp/666666/FFFFFF/400x225.png" alt=""></div>
<p>after</p>
</div>
</div>CSS
.flex-container{
display:flex;
justify-content: center;
align-items: center;
}
.flex-container > div{
margin:0 30px;
text-align:center;
}
.flex-container .img-area{
position:relative;
min-height:225px;
}
.flex-container .before .img-area::before{
content:"";
display:block;
position: absolute;
top: 50%;
left: calc(100% + 15px);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 15px;
border-color: transparent transparent transparent white;
z-index:99;
}
.flex-container .before .img-area::after{
content:"";
display:block;
position: absolute;
top: 50%;
left: calc(100% + 15px);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 30px;
border-color: transparent transparent transparent #ebd700;
}施工前・施工後のパーツをそれぞれdivで囲み、施工前に.before、施工後は.afterとclass名をつけています。
CSSを見ると.before::afterではなく、.beforeの中にある.img-areaに擬似要素を指定しています。
これは、.beforeで擬似要素を指定すると、このように枠全体の上下中心になってしまうため、画像のエリアで擬似要素としています。
線のように見えている箇所は::beforeと::afterを使い、サイズ違いの矢印を重ねて実現しています。
重ねている三角のサイズを変更すると、線の太さを調整できます。
まとめ
このように実装方法によって、わかりやすいコードになったり、汎用性の高いコードになります。
Webブラウザーで表示されればOKではなく、修正作業があることも想定しながら実装作業をしていきましょう。
