テキストをあしらいにした見出しのCSS

codepenの練習も兼ねて、サイト制作で作った見出しのコードを載せてみます。

See the Pen テキストをあしらいにした見出しデザイン by renton (@renton) on CodePen.dark

学んだこと

• data属性で要素に追加情報を格納出来る。
• テキストよりあしらいが前に出るが、spanで囲めばz-index使える。
• こういう繰り返すスタイルにSCSSのmixinをかけると幸せになる。

（mixinも分かるようにSCSSで載せたかったんですが、コンパイルボタンが表示されないので今回はCSSで載せました。表示方法がお分かりの方いましたらご教示頂けると助かります…）

最初はpositionの親をあしらい、子を見出しにして書いていたのですがレスポンシブ化が上手くいきませんでした。

data属性を使い、親を見出しとするこの手法ならレスポンシブにも対応出来ました。

参考記事

CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介 | BUILD Journal

CSSのみで実装できるシンプルな見出しデザインを21パターンご紹介します。汎用性が高くテイストに縛られず現場ですぐ使えるデザインなのでストックしておくと便利に使えます。あなたの現場でぜひご利用ください。

buildstd.com

データ属性の使用 - ウェブ開発を学ぶ | MDN

HTML は、特定の要素に関連付ける必要があるが、定義済みの意味を持つ必要のないデータに対する拡張性を念頭に置いて設計されています。 data-* 属性により、標準外の属性や DOM の追加プロパティなどの特殊な方法に頼らずに、標準的な意味のある HTML 要素に追加情報を格納することができます。

developer.mozilla.org

wordpress上でのcodepenの使い方はこちら↓

CodePen（無料版）の登録方法とWordPressでの利用方法

こんにちは、ゆんつです。 ブログにHTMLやCSS、JavaScriptなどのコードを記載したい場合。 シンタックスハイライトという機能を使うと、文章部分とソースコードの区別がつきやすくて、とても見やすくなります。 <h2>こん

konpure.com