こんにちはデザインチームオカベです。
コーディングをする上で、「デザインをどの様にブラウザ上で再現するか」という課題は付き物ですが、個人的にはレスポンシブ事情やコーディング後のデザイン調整が入ることを想定して、できる限り装飾部分もコーディングで対応したいと思っています。
そんな中Twitterで便利そうなテクニックを見かけましたので練習がてらまとめました。
※ブラウザのバージョンによっては対応していない設定もあります。最新ブラウザでご利用ください。
見出しの強調
アンダーライン
こちらはこのブログでも使用していますが、「linear-gradient（グラデーション）」を利用したアンダーラインの表現方法です。
あのイーハトーヴォのすきとおった風
background: linear-gradient(rgba(0,0,0,0) 70%,#ffcd19 70%);
CSSには元々アンダーラインが設定できる「text-decoration: underline;」がありますが、こちらの場合小文字などベースラインを超える文字にはラインが適用されず途切れた見え方になります。またラインの位置調整もコントロールできません。
text-decorationの場合
Excepteur sint occaecat cupidatat non proident
text-decoration: underline #ffcd19 .2em;
強調マーク
文字の１文字１文字にマークをつけることができます。
マークの設定は変更することもできます。
あのイーハトーヴォのすきとおった風
text-emphasis: sesame #d12f42;
あのイーハトーヴォのすきとおった風
text-emphasis: circle #d12f42;
マークは任意の文字に設定することもできます。こちらは「v」に設定したものです。
あのイーハトーヴォのすきとおった風
text-emphasis: 'v' #d12f42;
詳しい設定はこちらも参考にしてみてください。
波線
こちらは前述した「text-decoration: underline」の派生です。「wavy」の設定で波線を扱うことができます。ただし先ほど触れた通り位置など細かい調整はできません。
あのイーハトーヴォのすきとおった風
text-decoration: wavy underline #1e91d3 2px;
ストライプ
ちょっと難しいですがグラデーションの応用「repeating-linear-gradient（繰り返しグラデーション）」でストライプの表現が可能です。
ストライプは背景画像でもよく利用されることが多いと思いますが、CSSだけで表現できるので後から幅や色を変更するのも容易です。
あのイーハトーヴォのすきとおった風
background: repeating-linear-gradient(-45deg, #1acf7c 0, #1acf7c 4px, rgba(0,0,0,0) 4px, rgba(0,0,0,0) 8px);
点線
こちらは上記「repeating-linear-gradient」の応用です。角度と幅を変更して点線を表現しています。
点線も「text-decoration: underline dashed」が元々容易されていますが、点線の間隔など細かい調整ができないのでグラデーションを利用すると良いと思います。
あのイーハトーヴォのすきとおった風
background: repeating-linear-gradient(90deg, #8952ac 0, #8952ac 20px, rgba(0,0,0,0) 20px, rgba(0,0,0,0) 30px);
今回の記事はこちらを参考にさせていただきました。
"ユニークに強調するコード" をあつめてみた#WDIdeaRecipe 9 pic.twitter.com/KaH1yTtlvF
— 小林 I Webデザイナー (@pulpxstyle) 2021年12月1日
見出しに使える絶対覚えておくべきlinear-gradient#WDIdeaRecipe 4 pic.twitter.com/ahkFdS8gyO
— 小林 I Webデザイナー (@pulpxstyle) 2021年12月6日
