唐突ですが NorthDetail フロントエンドグループでは、不定期的に『勉強会』なるものを行っています。
ザックリとした課題を出して、メンバー各々がその課題に対する自分なりの答えを導き出し、全員で集まって『答え合わせ』しながら、ディスカッションする…という流れです。
一応、課題作成者がレビューを行い、採点的なことも行いますが、私個人としてはマークアップというものに完全正解はないと思っています。
理由は【見る角度・優先順位・サイト特性・画面内での役割・更新汎用性】などなどのチョットした視点の違いで、html文章構造は大きく変わってくるからです。
当然、文章構造が変われば css などの書き方にも違いがでてきます。
それぞれの人が、イロイロな角度・視点から、様々なマークアップを行ってくるので、それをレビューするだけでも、大変おもしろく、学び・気付きも少なからずです。
と…前置きが異常に長くなりましたが、先日行った『勉強会』で、少し盛り上がった題材を解説します。
いかがでしょうか？
少しだけ知恵や配慮が必要そうな、意地悪なレイアウトです。
経験値が高い方なら、すぐにお気付きだと思いますが、グラデーション・画像背景を使用していない分だけデザイナーさんの優しさを感じますｗ
上記イメージ画像を見ていただければ、お分かりの通り
色のついたボックスの上位レイヤーに、背景と同色(この場合は白)の角丸処理をしたボックスを被せれば完了ですね。
下記ソースで見た目的には、50pxの逆角丸が実装できます。
疑似要素を使用することで、無駄な空タグ・無駄な入れ子の必要のないマークアップが実現出来ています。
.box-bottom{
position:relative;
background:#44a0ae;
&::before{
content:"";
width:100%;
height:50px;
position:absolute;
top:0;
left:0;
background:#fff;
border-radius:0 0 50px 50px;
}
}
上記イメージ画像を見ていただければ、お分かりの通り
色のついたボックスの上位レイヤーに、背景と同色(この場合も白)の楕円形を被せれば完了ですね。
楕円形の両端はアールがきつくなってしまうので、被せられるボックスよりも横幅を大きくすることが、マークアッパーとしてのキメ細やかな配慮ですｗ
下記ソースの7行目がソレです。
それに伴って13行目で被せる側の楕円形の位置を調整しています。
また横にハミ出した要素のせいで出現する横スクロールバーで、ゲンナリしないように4行目が必要です。
こちらも疑似要素を使用することで、無駄な空タグ・無駄な入れ子の必要のないマークアップが実現出来ています。
.box-top{
position:relative;
background:#44a0ae;
overflow:hidden;
&::after{
content:"";
width:120%;
height:100px;
position:absolute;
bottom:0;
left:50%;
background:#fff;
transform:translate(-50%,50%);
border-radius:100%;
}
}
上記イメージ画像を見ていただければ、分かりやすいと思いますが左上・左下・右下の角丸は、下記ソース4行目の border-radius にて設定し、右上部分は疑似要素を2つ重ねて使用することで、ある意味強引に実装しています。
右上部分は50pxの逆角丸ですので、疑似要素2つとも50px四方で、.box-middle に対して右上にハミ出すように配置します。
下記ソースの8～12行目の指定がソレです。
before要素にはブロックと同色の正方形(ソース15行目)を、after要素には背景と同色の扇形(ソース18・19行目)を重ねて配置することで、まさに疑似的に逆角丸を実装しています。
なんやかんやで、こちらも疑似要素を使用することで、無駄な空タグ・無駄な入れ子の必要のないマークアップが実現出来ています。
タネさえ明かしてしまえば、難しいことは一切なく、どうということはないですね。
.box-middle{
position:relative;
background:#44a0ae;
border-radius:1em 0 50px 1em;
&::before,
&::after{
content:"";
width:50px;
height:50px;
position:absolute;
bottom:100%;
right:0;
}
&::before{
background:#44a0ae;
}
&::after{
background:#fff;
border-radius:0 0 100% 0;
}
}大事なことは三度言う…
これまでの解説では、背景と同色のブロックを上位レイヤーに被せることで実装してきましたが…
さて、このようにベースの背景に幾何学模様(場合によっては画像)とかがある場合はどうしましょうか？
透過画像や svg や clip-path を使ってどうにかします！
っていうのも正解は正解です。
ですが、それだとチョットしたデザイン変更や、運用などで結構な手間になります…
ラクしたい派の私としては、もっと簡単に css のみで実装することをオススメします。
真ん中ブロックの右上の『逆角丸』を例に解説します。
<section class="box-middle">
<span class="corner-rightTop"></span>
</section>どうしても親子関係があるタグ構造が必要なため、上記のように無駄な空タグを使用することになりますが、背に腹は代えられませんので、グっと堪えましょう。
下記ソースを見れば分かる通り
50px四方で、ハミ出した要素は非表示に指定した .corner-rightTop を .box-middle に対して右上にハミ出すように配置します。
あとは【直径100px／外周太さ50px／ブロック同色の枠線】を指定した疑似要素を配置すれば実装完了です！
例では box-shadow を使用して実装してますが、border でも同じように実装可能です。
ただ border を使用する場合は少しだけ計算して配置する必要があるので、今回はより簡単で直感的な box-shadow で実装しました。
.corner-rightTop{
display:block;
width:50px;
height:50px;
position:absolute;
bottom:100%;
right:0;
overflow:hidden;
&::after{
content:'';
width:200%;
height:200%;
position:absolute;
border-radius:50%;
box-shadow:50px 50px 0 0 #44a0ae;
}
}今回の『逆角丸』を実装する際に、重なり合う背景もしくはブロック要素のどちらか1つでも単色(グラデーションや画像が使用されていない場合)の場合は、実装可能ということになります。
盲点と言うか、逆転の発想というか…『勉強会』の時にその辺りで軽く盛り上がったので、ブログ記事にしてみました。
実際にナナメに切り取ったようなデザインだったり、角丸を多用するデザインなどは結構普通によく眼にします。
css のみで実装できれば、かなり汎用性・更新性もあり、尚且つ構築時間短縮にもつながります。
もちろん条件によっては使えることもあるよね程度かもしれませんが、かなりラクが出来る選択肢の1つであることは間違いありません。
知らずに苦労するぐらいだったら、知っておいて損はないです٩(๑❛ᴗ❛๑)۶
