見出しとテキストのセットパーツ

見出しとテキストのセットパーツ

• 先にコピペしている別のパーツ内に使う場合は、htmlコードのh2、h3、pだけをコピペして下さい。sectionごと中に入れてしまうとsectionが入れ子になり、余白が増えてしまいます。
• 見出しのカラーは、theme.cssの :root にしているカラーコードが適用されます。見出しに直接カラーを指定してもOKだし、この :root のカラーコードを好みのテーマカラーに調整して頂いてもOK。

見出し・文章セット一覧

title1

見出し（h2,h3）と段落（p）のセット。

<section> <h2 class="title1-parts">選ばれる理由<span class="small-parts">Why Choose Us</span></h2> <p>上はh2見出し（title1-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title1-parts">理由その１</h3> <p>上はh3見出し（title1-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h2 class="title1-parts c">選ばれる理由<span class="small-parts">Why Choose Us</span></h2> <p>class="c"を追加するとセンタリングされます。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title1-parts c">理由その１</h3> <p>class="c"を追加するとセンタリングされます。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> </section> <section> <h2 class="title1-parts"><span class="fade-in-text-parts">選ばれる理由</span><span class="small-parts">Why Choose Us</span></h2> <p>fade-in-text-partsがついたテキストだけアニメーション処理されます。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title1-parts"><span class="fade-in-text-parts">理由その１</span></h3> <p>fade-in-text-partsがついたテキストだけアニメーション処理されます。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h2 class="title1-parts c"><span class="fade-in-text-parts">選ばれる理由</span><span class="small-parts">Why Choose Us</span></h2> <p>fade-in-text-partsがついたテキストだけアニメーション処理されます。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title1-parts c"><span class="fade-in-text-parts">理由その１</span></h3> <p>fade-in-text-partsがついたテキストだけアニメーション処理されます。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> </section>

html

/*h2 ---------------------------------------------------------------------------*/ /*h2内のspan*/ main h2.title1-parts span.small-parts { display: block; opacity: 0.5; /*透明度。色を50%出した状態。*/ font-size: 0.7rem; /*文字サイズ70%*/ } /*見出しのテキストのフェードイン設定 ---------------------------------------------------------------------------*/ @keyframes fadeIn { 0% {opacity: 0;transform: scale(0.1) rotate(-30deg);} 100% {opacity: 1;transform: scale(1) rotate(0deg);} } /* 初期状態でテキストを非表示にする */ .fade-in-text-parts { visibility: hidden; } /* アニメーションを適用するクラス。 animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。 １文字ずつの出現する際の時差は、jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/ .char { display: inline-block; opacity: 0; animation: fadeIn 0.2s linear both; }

css

//=============================================================== // テキストのフェードイン効果 //=============================================================== $(function() { $('.fade-in-text-parts').on('inview', function(event, isInView) { // この要素が既にアニメーションされたかどうかを確認 if (isInView && !$(this).data('animated')) { // アニメーションがまだ実行されていない場合 let innerHTML = ''; const text = $(this).text(); $(this).text(''); for (let i = 0; i < text.length; i++) { innerHTML += `<span class="char" style="animation-delay: ${i * 0.2}s;">${text[i]}</span>`; } $(this).html(innerHTML).css('visibility', 'visible'); // アニメーションが実行されたことをマーク $(this).data('animated', true); } }); });

js

title2

見出し（h2,h3）と段落（p）のセット。

<section> <h2 class="title2-parts">選ばれる理由<span class="small-parts">Why Choose Us</span></h2> <p>上はh2見出し（title2-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title2-parts">理由その１</h3> <p>上はh3見出し（title2-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h2 class="title2-parts c">選ばれる理由<span class="small-parts">Why Choose Us</span></h2> <p>class="c"を追加するとセンタリングされます。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title2-parts c">理由その１</h3> <p>class="c"を追加するとセンタリングされます。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> </section> <section> <h2 class="title2-parts"><span class="fade-in-text-parts">選ばれる理由</span><span class="small-parts">Why Choose Us</span></h2> <p>fade-in-text-partsがついたテキストだけアニメーション処理されます。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title2-parts"><span class="fade-in-text-parts">理由その１</span></h3> <p>fade-in-text-partsがついたテキストだけアニメーション処理されます。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h2 class="title2-parts c"><span class="fade-in-text-parts">選ばれる理由</span><span class="small-parts">Why Choose Us</span></h2> <p>fade-in-text-partsがついたテキストだけアニメーション処理されます。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title2-parts c"><span class="fade-in-text-parts">理由その１</span></h3> <p>fade-in-text-partsがついたテキストだけアニメーション処理されます。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> </section>

html

/*h2,h3,p ---------------------------------------------------------------------------*/ /*h2*/ main h2.title2-parts { color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/ } /*h2内のspan*/ main h2.title2-parts span.small-parts { display: block; opacity: 0.5; /*透明度。色を50%出した状態。*/ font-size: 0.7rem; /*文字サイズ70%*/ color: var(--bg-inverse-color); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/ letter-spacing: 0.1em; /*文字間隔を少しだけ広く*/ } /*bg1-parts内で使用した場合*/ main .bg1-parts h2.title2-parts { color: var(--bg-color); /*文字色。theme.cssのbg-colorを読み込みます。*/ } main .bg1-parts h2.title2-parts span.small-parts { color: var(--bg-color); /*文字色。theme.cssのbg-colorを読み込みます。*/ } /*bg1-primary-parts内で使用した場合*/ main .bg1-primary-parts h2.title2-parts { color: var(--primary-invere-color); /*文字色。theme.cssのprimary-invere-colorを読み込みます。*/ } main .bg1-primary-parts h2.title2-parts span.small-parts { color: var(--primary-invere-color); /*文字色。theme.cssのprimary-invere-colorを読み込みます。*/ } /*bg1-light-parts内で使用した場合*/ main .bg1-light-parts h2.title2-parts { color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/ } main .bg1-light-parts h2.title2-parts span.small-parts { color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/ } /*bg1-accent-parts内で使用した場合*/ main .bg1-accent-parts h2.title2-parts { color: var(--accent-invere-color); /*文字色。theme.cssのaccent-invere-colorを読み込みます。*/ } main .bg1-accent-parts h2.title2-parts span.small-parts { color: var(--accent-invere-color); /*文字色。theme.cssのaccent-invere-colorを読み込みます。*/ } /*見出しのテキストのフェードイン設定 ---------------------------------------------------------------------------*/ @keyframes fadeIn { 0% {opacity: 0;transform: scale(0.1) rotate(-30deg);} 100% {opacity: 1;transform: scale(1) rotate(0deg);} } /* 初期状態でテキストを非表示にする */ .fade-in-text-parts { visibility: hidden; } /* アニメーションを適用するクラス。 animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。 １文字ずつの出現する際の時差は、jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/ .char { display: inline-block; opacity: 0; animation: fadeIn 0.2s linear both; }

css

//=============================================================== // テキストのフェードイン効果 //=============================================================== $(function() { $('.fade-in-text-parts').on('inview', function(event, isInView) { // この要素が既にアニメーションされたかどうかを確認 if (isInView && !$(this).data('animated')) { // アニメーションがまだ実行されていない場合 let innerHTML = ''; const text = $(this).text(); $(this).text(''); for (let i = 0; i < text.length; i++) { innerHTML += `<span class="char" style="animation-delay: ${i * 0.2}s;">${text[i]}</span>`; } $(this).html(innerHTML).css('visibility', 'visible'); // アニメーションが実行されたことをマーク $(this).data('animated', true); } }); });

js

title3

見出し（h2,h3）と段落（p）のセット。

<section> <h2 class="title3-parts">選ばれる理由<span class="small-parts">Why Choose Us</span></h2> <p>上はh2見出し（title3-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title3-parts">理由その１</h3> <p>上はh3見出し（title3-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h2 class="title3-parts c">選ばれる理由<span class="small-parts">Why Choose Us</span></h2> <p>class="c"を追加するとセンタリングされます。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title3-parts c">理由その１</h3> <p>class="c"を追加するとセンタリングされます。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> </section> <section> <h2 class="title3-parts"><span class="fade-in-text-parts">選ばれる理由</span><span class="small-parts">Why Choose Us</span></h2> <p>fade-in-text-partsがついたテキストだけアニメーション処理されます。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title3-parts"><span class="fade-in-text-parts">理由その１</span></h3> <p>fade-in-text-partsがついたテキストだけアニメーション処理されます。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h2 class="title3-parts c"><span class="fade-in-text-parts">選ばれる理由</span><span class="small-parts">Why Choose Us</span></h2> <p>fade-in-text-partsがついたテキストだけアニメーション処理されます。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title3-parts c"><span class="fade-in-text-parts">理由その１</span></h3> <p>fade-in-text-partsがついたテキストだけアニメーション処理されます。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> </section>

html

/*h2,h3,p ---------------------------------------------------------------------------*/ /*h2*/ main h2.title3-parts { color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/ width: fit-content; border-top: 2px solid var(--primary-color); } /*センタリング時*/ main h2.title3-parts.c { margin-inline: auto; } /*h2内のspan*/ main h2.title3-parts span.small-parts { display: block; opacity: 0.5; /*透明度。色を50%出した状態。*/ font-size: 0.7rem; /*文字サイズ70%*/ color: var(--bg-inverse-color); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/ letter-spacing: 0.1em; /*文字間隔を少しだけ広く*/ } /*bg1-parts内で使用した場合*/ main .bg1-parts h2.title3-parts { color: var(--bg-color); /*文字色。theme.cssのbg-colorを読み込みます。*/ border-top: 2px solid var(--bg-color); } main .bg1-parts h2.title3-parts span.small-parts { color: var(--bg-color); /*文字色。theme.cssのbg-colorを読み込みます。*/ } /*bg1-primary-parts内で使用した場合*/ main .bg1-primary-parts h2.title3-parts { color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inversecolorを読み込みます。*/ border-top: 2px solid var(--primary-inverse-color); } main .bg1-primary-parts h2.title3-parts span.small-parts { color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/ } /*bg1-light-parts内で使用した場合*/ main .bg1-light-parts h2.title3-parts { color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/ border-top: 2px solid var(--primary-color); } main .bg1-light-parts h2.title3-parts span.small-parts { color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/ } /*bg1-accent-parts内で使用した場合*/ main .bg1-accent-parts h2.title3-parts { color: var(--accent-inverse-color); /*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/ border-top: 2px solid var(--accent-inverse-color); } main .bg1-accent-parts h2.title3-parts span.small-parts { color: var(--accent-inverse-color); /*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/ } /*見出しのテキストのフェードイン設定 ---------------------------------------------------------------------------*/ @keyframes fadeIn { 0% {opacity: 0;transform: scale(0.1) rotate(-30deg);} 100% {opacity: 1;transform: scale(1) rotate(0deg);} } /* 初期状態でテキストを非表示にする */ .fade-in-text-parts { visibility: hidden; } /* アニメーションを適用するクラス。 animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。 １文字ずつの出現する際の時差は、jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/ .char { display: inline-block; opacity: 0; animation: fadeIn 0.2s linear both; }

css

//=============================================================== // テキストのフェードイン効果 //=============================================================== $(function() { $('.fade-in-text-parts').on('inview', function(event, isInView) { // この要素が既にアニメーションされたかどうかを確認 if (isInView && !$(this).data('animated')) { // アニメーションがまだ実行されていない場合 let innerHTML = ''; const text = $(this).text(); $(this).text(''); for (let i = 0; i < text.length; i++) { innerHTML += `<span class="char" style="animation-delay: ${i * 0.2}s;">${text[i]}</span>`; } $(this).html(innerHTML).css('visibility', 'visible'); // アニメーションが実行されたことをマーク $(this).data('animated', true); } }); });

js

title4

見出し（h2,h3）と段落（p）のセット。

<section> <h2 class="title4-parts">選ばれる理由<span class="small-parts">Why Choose Us</span></h2> <p>上はh2見出し（title4-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title4-parts">理由その１</h3> <p>上はh3見出し（title4-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h2 class="title4-parts c">選ばれる理由<span class="small-parts">Why Choose Us</span></h2> <p>class="c"を追加するとセンタリングされます。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title4-parts c">理由その１</h3> <p>class="c"を追加するとセンタリングされます。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> </section> <section> <h2 class="title4-parts"><span class="fade-in-text-parts">選ばれる理由</span><span class="small-parts">Why Choose Us</span></h2> <p>fade-in-text-partsがついたテキストだけアニメーション処理されます。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title4-parts"><span class="fade-in-text-parts">理由その１</span></h3> <p>fade-in-text-partsがついたテキストだけアニメーション処理されます。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h2 class="title4-parts c"><span class="fade-in-text-parts">選ばれる理由</span><span class="small-parts">Why Choose Us</span></h2> <p>fade-in-text-partsがついたテキストだけアニメーション処理されます。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title4-parts c"><span class="fade-in-text-parts">理由その１</span></h3> <p>fade-in-text-partsがついたテキストだけアニメーション処理されます。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> </section>

html

/*h2,h3,p ---------------------------------------------------------------------------*/ /*h2*/ main h2.title4-parts { color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/ } /*上のライン*/ main h2.title4-parts::before { content: ""; display: block; width: 2rem; /*幅。２文字分。お好みで。*/ height: 2px; /*高さ。お好みで。*/ background: currentColor; /*色は上のh2の色を引き継ぎます。直接カラーコードなどの指定でもOK。*/ margin-bottom: 0.6rem; /*ラインと見出しの間に0.6文字分のスペース。*/ } /*センタリング時*/ main h2.title4-parts.c { width: fit-content; margin-inline: auto; text-align: center; } /*センタリング時のライン*/ main h2.title4-parts.c::before { margin-inline: auto; } /*h2内のspan*/ main h2.title4-parts span.small-parts { display: block; opacity: 0.5; /*透明度。色を50%出した状態。*/ font-size: 0.7rem; /*文字サイズ70%*/ color: var(--bg-inverse-color); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/ letter-spacing: 0.1em; /*文字間隔を少しだけ広く*/ } /*bg1-parts内で使用した場合*/ main .bg1-parts h2.title4-parts { color: var(--bg-color); /*文字色。theme.cssのbg-colorを読み込みます。*/ } main .bg1-parts h2.title4-parts span.small-parts { color: var(--bg-color); /*文字色。theme.cssのbg-colorを読み込みます。*/ } /*bg1-primary-parts内で使用した場合*/ main .bg1-primary-parts h2.title4-parts { color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/ } main .bg1-primary-parts h2.title4-parts span.small-parts { color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/ } /*bg1-light-parts内で使用した場合*/ main .bg1-light-parts h2.title4-parts { color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/ } main .bg1-light-parts h2.title4-parts span.small-parts { color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/ } /*bg1-accent-parts内で使用した場合*/ main .bg1-accent-parts h2.title4-parts { color: var(--accent-inverse-color); /*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/ } main .bg1-accent-parts h2.title4-parts span.small-parts { color: var(--accent-inverse-color); /*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/ } /*見出しのテキストのフェードイン設定 ---------------------------------------------------------------------------*/ @keyframes fadeIn { 0% {opacity: 0;transform: scale(0.1) rotate(-30deg);} 100% {opacity: 1;transform: scale(1) rotate(0deg);} } /* 初期状態でテキストを非表示にする */ .fade-in-text-parts { visibility: hidden; } /* アニメーションを適用するクラス。 animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。 １文字ずつの出現する際の時差は、jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/ .char { display: inline-block; opacity: 0; animation: fadeIn 0.2s linear both; }

css

//=============================================================== // テキストのフェードイン効果 //=============================================================== $(function() { $('.fade-in-text-parts').on('inview', function(event, isInView) { // この要素が既にアニメーションされたかどうかを確認 if (isInView && !$(this).data('animated')) { // アニメーションがまだ実行されていない場合 let innerHTML = ''; const text = $(this).text(); $(this).text(''); for (let i = 0; i < text.length; i++) { innerHTML += `<span class="char" style="animation-delay: ${i * 0.2}s;">${text[i]}</span>`; } $(this).html(innerHTML).css('visibility', 'visible'); // アニメーションが実行されたことをマーク $(this).data('animated', true); } }); });

js

title5

見出し（h2,h3）と段落（p）のセット。

<section> <h2 class="title5-parts">選ばれる理由</h2> <p>上はh2見出し（title5-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title5-parts">理由その１</h3> <p>上はh3見出し（title5-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h2 class="title5-parts c">選ばれる理由</h2> <p>class="c"を追加するとセンタリングされます。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title5-parts c">理由その１</h3> <p>class="c"を追加するとセンタリングされます。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> </section> <section class="bg-parts bg1-parts"> <h2 class="c">bg1-parts内で使用した場合</h2> <h2 class="title5-parts">選ばれる理由</h2> <p>上はh2見出し（title5-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title5-parts">理由その１</h3> <p>上はh3見出し（title5-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> </section>

html

/*h2,h3,p ---------------------------------------------------------------------------*/ /*h2*/ main h2.title5-parts { background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/ color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/ border-radius: 5px; /*角を丸くする*/ padding-inline: 1rem; /*左右に1文字分の余白*/ font-size: 1.3rem; /*文字サイズ130%*/ } /*h3*/ main h3.title5-parts { border-bottom: 2px solid var(--primary-color); /*下線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます*/ padding-inline: 1rem; /*左右に1文字分の余白*/ font-size: 1.2rem; /*文字サイズ120%*/ } /*p*/ main p { padding-inline: 1rem; /*左右に1文字分の余白*/ } /*bg1-primary-parts内で使用した場合*/ main .bg1-primary-parts h2.title5-parts { background: var(--primary-inverse-color); /*背景色。theme.cssのprimary-inverse-colorを読み込みます。*/ color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/ } main .bg1-primary-parts h3.title5-parts { border-bottom: 2px solid var(--primary-inverse-color); /*下線の幅、線種、var以降は色の指定でtheme.cssのprimary-inverse-colorを読み込みます*/ } /*bg1-accent-parts内で使用した場合*/ main .bg1-accent-parts h2.title5-parts { background: var(--accent-inverse-color); /*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/ color: var(--accent-color); /*文字色。theme.cssのaccent-colorを読み込みます。*/ } main .bg1-accent-parts h3.title5-parts { border-bottom: 2px solid var(--accent-inverse-color); /*下線の幅、線種、var以降は色の指定でtheme.cssのaccent-inverse-colorを読み込みます*/ }

css

title6

見出し（h2,h3）と段落（p）のセット。

<section> <h2 class="title6-parts">選ばれる理由<span class="small-parts">Why Choose Us</span></h2> <p>上はh2見出し（title6-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title6-parts">理由その１<span class="small-parts">Why Choose Us</span></h3> <p>上はh3見出し（title6-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> </section>

html

/*h2,h3,p ---------------------------------------------------------------------------*/ /*h2,h3共通*/ main h2.title6-parts, main h3.title6-parts { display: flex; justify-content: space-between; align-items: center; } /*h2*/ main h2.title6-parts { background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/ color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/ border-radius: 5px; /*角を丸くする*/ padding: 0.5rem 1rem; /*上下に0.5文字分、左右に1文字分の余白*/ font-size: 1.3rem; /*文字サイズ130%*/ } /*h3*/ main h3.title6-parts { border-bottom: 2px solid var(--primary-color); /*下線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます*/ padding-inline: 1rem; /*左右に1文字分の余白*/ font-size: 1.2rem; /*文字サイズ120%*/ } /*h2,h3内のspan*/ main h2.title6-parts span.small-parts, main h3.title6-parts span.small-parts { font-size: 0.8rem; /*文字サイズ80%*/ font-weight: normal; /*デフォルトの太字を標準に（細く）*/ opacity: 0.5; /*色を50%だけ出す*/ } /*p*/ main p { padding-inline: 1rem; /*左右に1文字分の余白*/ } /*bg1-primary-parts内で使用した場合*/ main .bg1-primary-parts h2.title6-parts { background: var(--primary-inverse-color); /*背景色。theme.cssのprimary-inverse-colorを読み込みます。*/ color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/ } main .bg1-primary-parts h3.title6-parts { border-bottom: 2px solid var(--primary-inverse-color); /*下線の幅、線種、var以降は色の指定でtheme.cssのprimary-inverse-colorを読み込みます*/ } /*bg1-accent-parts内で使用した場合*/ main .bg1-accent-parts h2.title6-parts { background: var(--accent-inverse-color); /*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/ color: var(--accent-color); /*文字色。theme.cssのaccent-colorを読み込みます。*/ } main .bg1-accent-parts h3.title6-parts { border-bottom: 2px solid var(--accent-inverse-color); /*下線の幅、線種、var以降は色の指定でtheme.cssのaccent-inverse-colorを読み込みます*/ }

css

title7

見出し（h2,h3）と段落（p）のセット。

<section> <h2 class="title7-parts">選ばれる理由<span class="small-parts">Why Choose Us</span></h2> <p>上はh2見出し（title7-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title7-parts">理由その１<span class="small-parts">Why Choose Us</span></h3> <p>上はh3見出し（title7-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> </section>

html

/*h2,h3,p ---------------------------------------------------------------------------*/ /*h2,h3共通*/ main h2.title7-parts, main h3.title7-parts { display: flex; justify-content: space-between; align-items: center; } /*h2*/ main h2.title7-parts { border: 2px solid var(--primary-color); /*枠線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます。*/ background: var(--light-color); /*背景色。theme.cssのlight-colorを読み込みます。*/ color: var(--light-inverse-color); /*文字色。theme.cssのlight-inverse-colorを読み込みます。*/ border-radius: 5px; /*角を丸くする*/ padding: 0.5rem 1rem; /*上下に0.5文字分、左右に1文字分の余白*/ font-size: 1.3rem; /*文字サイズ130%*/ } /*h3*/ main h3.title7-parts { border-bottom: 2px solid var(--primary-color); /*下線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます*/ padding-inline: 1rem; /*左右に1文字分の余白*/ font-size: 1.2rem; /*文字サイズ120%*/ } /*h2,h3内のspan*/ main h2.title7-parts span.small-parts, main h3.title7-parts span.small-parts { font-size: 0.8rem; /*文字サイズ80%*/ font-weight: normal; /*デフォルトの太字を標準に（細く）*/ opacity: 0.5; /*色を50%だけ出す*/ } /*p*/ main p { padding-inline: 1rem; /*左右に1文字分の余白*/ } /*bg1-parts内で使用した場合*/ main .bg1-parts h3.title7-parts { border-bottom: 2px solid var(--light-color); /*下線の幅、線種、var以降は色の指定でtheme.cssのlight-colorを読み込みます*/ } /*bg1-primary-parts内で使用した場合*/ main .bg1-primary-parts h3.title7-parts { border-bottom: 2px solid var(--light-color); /*下線の幅、線種、var以降は色の指定でtheme.cssのlight-colorを読み込みます*/ } /*bg1-light-parts内で使用した場合*/ main .bg1-light-parts h2.title7-parts { color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/ } main .bg1-light-parts h3.title7-parts { color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/ } /*bg1-accent-parts内で使用した場合*/ main .bg1-accent-parts h2.title7-parts { border: 2px solid var(--accent-inverse-color); /*枠線の幅、線種、var以降は色の指定でtheme.cssのaccent-inverse-colorを読み込みます。*/ background: var(--accent-color); /*背景色。theme.cssのaccent-colorを読み込みます。*/ color: var(--accent-inverse-color); /*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/ } main .bg1-accent-parts h3.title7-parts { border-bottom: 2px solid var(--accent-inverse-color); /*下線の幅、線種、var以降は色の指定でtheme.cssのaccent-inverse-colorを読み込みます*/ }

css

title8

見出し（h2,h3）と段落（p）のセット。

<section> <h2 class="title8-parts">選ばれる理由<span class="small-parts">Why Choose Us</span></h2> <p>上はh2見出し（title8-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title8-parts">理由その１<span class="small-parts">Why Choose Us</span></h3> <p>上はh3見出し（title8-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> </section>

html

/*h2,h3,p ---------------------------------------------------------------------------*/ /*h2,h3共通*/ main h2.title8-parts, main h3.title8-parts { display: flex; justify-content: space-between; align-items: center; position: relative; } /*h2*/ main h2.title8-parts { color: var(--bg-iinverse-color); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/ border: 1px solid var(--border-color); /*枠線の幅、線種、var以降は色の読み込みでtheme.cssのborder-colorを読み込みます。*/ border-radius: 5px; /*角を丸くする*/ padding: 0.5rem 1rem 0.5rem 2rem; /*上、右、下、左への見出し内の余白。*/ font-size: 1.3rem; /*文字サイズ130%*/ } /*h2の左のアクセントライン*/ main h2.title8-parts::before { content: ""; position: absolute; left: 1rem; /*左からの配置場所*/ top: 50%; transform: translateY(-50%); width: 3px; /*枠線の幅。お好みで。*/ height: 1em; /*高さ１文字分。*/ background: var(--primary-color); /*枠線の色。theme.cssのprimary-colorを読み込みます。*/ } /*h3*/ main h3.title8-parts { border-bottom: 1px solid var(--border-color); /*下線の幅、線種、var以降は色の読み込みでtheme.cssのborder-colorを読み込みます。*/ padding-inline: 1rem; /*左右に1文字分の余白*/ font-size: 1.2rem; /*文字サイズ120%*/ } /*h2,h3内のspan*/ main h2.title8-parts span.small-parts, main h3.title8-parts span.small-parts { font-size: 0.8rem; /*文字サイズ80%*/ font-weight: normal; /*デフォルトの太字を標準に（細く）*/ opacity: 0.5; /*色を50%だけ出す*/ } /*p*/ main p { padding-inline: 1rem; /*左右に1文字分の余白*/ } /*bg1-primary-parts内で使用した場合*/ main .bg1-primary-parts h2.title8-parts::before { background: var(--light-color); /*枠線の色。theme.cssのlight-colorを読み込みます。*/ } /*bg1-accent-parts内で使用した場合*/ main .bg1-accent-parts h2.title8-parts::before { background: var(--accent-inverse-color); /*枠線の色。theme.cssのaccent-inverse-colorを読み込みます。*/ }

css

title9

見出し（h2,h3）と段落（p）のセット。

<section> <h2 class="title9-parts">選ばれる理由<span class="small-parts">Why Choose Us</span></h2> <p>上はh2見出し（title9-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title9-parts">理由その１<span class="small-parts">Why Choose Us</span></h3> <p>上はh3見出し（title9-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> </section>

html

/*h2,h3,p ---------------------------------------------------------------------------*/ /*h2,h3共通*/ main h2.title9-parts, main h3.title9-parts { display: flex; justify-content: space-between; align-items: center; } /*h2*/ main h2.title9-parts { background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/ color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/ border-radius: 100px; /*角を丸くする*/ padding: 0.5rem 2rem; /*上下に0.5文字分、左右に2文字分の余白*/ font-size: 1.3rem; /*文字サイズ130%*/ } /*h3*/ main h3.title9-parts { border: 2px solid var(--primary-color); /*下線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込みます*/ border-radius: 100px; /*角を丸くする*/ padding: 0.3rem 2rem; /*上下に0.3文字分、左右に2文字分の余白*/ font-size: 1.2rem; /*文字サイズ120%*/ font-weight: normal; /*デフォルトの太字を標準に（細く）*/ } /*h2,h3内のspan*/ main h2.title9-parts span.small-parts, main h3.title9-parts span.small-parts { font-size: 0.8rem; /*文字サイズ80%*/ font-weight: normal; /*デフォルトの太字を標準に（細く）*/ opacity: 0.5; /*色を50%だけ出す*/ } /*p*/ main p { padding-inline: 2rem; /*左右に2文字分の余白*/ } /*bg1-primary-parts内で使用した場合*/ main .bg1-primary-parts h2.title9-parts { background: var(--primary-inverse-color); /*背景色。theme.cssのprimary-inverse-colorを読み込みます。*/ color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/ } main .bg1-primary-parts h3.title9-parts { border: 2px solid var(--primary-inverse-color); /*下線の幅、線種、var以降は色の指定でtheme.cssのprimary-inverse-colorを読み込みます*/ } /*bg1-accent-parts内で使用した場合*/ main .bg1-accent-parts h2.title9-parts { background: var(--accent-inverse-color); /*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/ color: var(--accent-color); /*文字色。theme.cssのaccent-colorを読み込みます。*/ } main .bg1-accent-parts h3.title9-parts { border: 2px solid var(--accent-inverse-color); /*下線の幅、線種、var以降は色の指定でtheme.cssのaccent-inverse-colorを読み込みます*/ }

css

title10

下線（アニメーションタイプもあり）の見出し（h2,h3）と段落（p）のセット。

<section> <h2 class="title10-parts"><span class="uline">選ばれる理由</span><span class="small-parts">Why Choose Us</span></h2> <p>上はh2見出し（title10-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title10-parts">理由その１<span class="small-parts">Why Choose Us</span></h3> <p>上はh3見出し（title7-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> </section> <section> <h2 class="title10-parts"><span class="uline animation">選ばれる理由</span><span class="small-parts">Why Choose Us</span></h2> <p>animationを追加すると下線アニメーションになります。<br> こに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title10-parts">理由その１<span class="small-parts">Why Choose Us</span></h3> <p>animationを追加すると下線アニメーションになります。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> </section>

html

/*main ---------------------------------------------------------------------------*/ main { --mx: 1rem; /*見出しと段落の両サイドの余白。１文字分。*/ } /*h2,h3,p ---------------------------------------------------------------------------*/ /*h2,h3共通*/ main h2.title10-parts, main h3.title10-parts { display: flex; justify-content: space-between; align-items: center; --uline: 3px; /*下線の幅*/ padding-inline: var(--mx); /*左右の余白。上のmainの--mxの数字を読み込みます。*/ } /*h2*/ main h2.title10-parts { border-bottom: var(--uline) solid #eee; /*枠線の幅、線種、色。*/ font-size: 1.3rem; /*文字サイズ130%*/ } /*下線*/ main h2 .uline { display: inline-block;position: relative; bottom: calc(-1 * var(--uline)); } main h2 .uline::before { content: ""; position: absolute; bottom: 0px; left: calc(-1 * var(--mx)); width: calc(100% + var(--mx) + var(--mx)); height: var(--uline); background: var(--primary-color); /*下線の色。theme.cssのprimary-colorを読み込みます。*/ } main h2 .uline.animation::before { transition: 1s 0.5s; /*0.5秒待機後に1秒かけてアニメーション。お好みで。*/ transform: scaleX(0); /*最初は下線幅0*/ transform-origin: left; /*開始起点*/ } main h2 .uline.animation.linestyle::before{ transform: scaleX(1); /*下線幅を100%に*/ } /*h3*/ main h3.title10-parts { border-bottom: var(--uline) solid #eee; /*下線の幅、線種、色*/ font-size: 1.2rem; /*文字サイズ120%*/ } /*h2,h3内のspan*/ main h2.title10-parts span.small-parts, main h3.title10-parts span.small-parts { font-size: 0.8rem; /*文字サイズ80%*/ font-weight: normal; /*デフォルトの太字を標準に（細く）*/ opacity: 0.5; /*色を50%だけ出す*/ } /*p*/ main p { padding-inline: var(--mx); /*左右の余白。上のmainの--mxの数字を読み込みます。*/ } /*bg1-parts内で使用した場合*/ main .bg1-parts h2 .uline::before { background: var(--accent-color); /*下線の色。theme.cssのaccent-colorを読み込みます。*/ } /*bg1-primary-parts内で使用した場合*/ main .bg1-primary-parts h2 .uline::before { background: var(--accent-color); /*下線の色。theme.cssのaccent-colorを読み込みます。*/ } /*bg1-accent-parts内で使用した場合*/ main .bg1-accent-parts h2 .uline::before { background: var(--bg-inverse-color); /*下線の色。theme.cssのbg-inverse-colorを読み込みます。*/ }

css

//=============================================================== // テキストのフェードイン効果 //=============================================================== $(function() { $('.fade-in-text-parts').on('inview', function(event, isInView) { // この要素が既にアニメーションされたかどうかを確認 if (isInView && !$(this).data('animated')) { // アニメーションがまだ実行されていない場合 let innerHTML = ''; const text = $(this).text(); $(this).text(''); for (let i = 0; i < text.length; i++) { innerHTML += `<span class="char" style="animation-delay: ${i * 0.2}s;">${text[i]}</span>`; } $(this).html(innerHTML).css('visibility', 'visible'); // アニメーションが実行されたことをマーク $(this).data('animated', true); } }); });

js

title11

縦書きの見出し（h2,h3）と段落（p）のセット。

<section> <h2 class="title11-parts"><span class="tate">選ばれる理由</span><span class="small-parts">Why Choose Us</span></h2> <p>上はh2見出し（title11-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title11-parts">理由その１</h3> <p>上はh3見出し（title11-parts）です。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> </section> <section> <h2 class="title11-parts"><span class="tate fade-in-text-parts">選ばれる理由</span><span class="small-parts">Why Choose Us</span></h2> <p>fade-in-text-partsを追加するとテキストだけアニメーション処理されます。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> <h3 class="title11-parts"><span class="fade-in-text-parts">理由その１</span></h3> <p>fade-in-text-partsを追加するとテキストだけアニメーション処理されます。<br> ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。ここに説明を入れます。サンプルテキスト。</p> </section>

html

/*h2 ---------------------------------------------------------------------------*/ /*h2*/ main h2.title11-parts { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } /*縦書き*/ main h2.title11-parts .tate { order: 2; /*縦書きを横書きの下に。数字が小さい順に並びます。*/ display: block; writing-mode: vertical-rl; text-orientation: upright; line-height: 1.1; /*文字間隔を少しだけ広く*/ } /*横書き*/ main h2.title11-parts span.small-parts { order: 1; /*横書きを縦書きの上に。数字が小さい順に並びます。*/ display: block; opacity: 0.5; /*透明度。色を50%出した状態。*/ font-size: 0.7rem; /*文字サイズ70%*/ margin-bottom: 1rem; /*縦書きの下に１文字分のスペース*/ letter-spacing: 0.1em; /*文字間隔を少し広く*/ } /*見出しのテキストのフェードイン設定 ---------------------------------------------------------------------------*/ @keyframes fadeIn { 0% {opacity: 0;transform: scale(0.1) rotate(-30deg);} 100% {opacity: 1;transform: scale(1) rotate(0deg);} } /* 初期状態でテキストを非表示にする */ .fade-in-text-parts { visibility: hidden; } /* アニメーションを適用するクラス。 animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。 １文字ずつの出現する際の時差は、jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/ .char { display: inline-block; opacity: 0; animation: fadeIn 0.2s linear both; }

css

//=============================================================== // テキストのフェードイン効果 //=============================================================== $(function() { $('.fade-in-text-parts').on('inview', function(event, isInView) { // この要素が既にアニメーションされたかどうかを確認 if (isInView && !$(this).data('animated')) { // アニメーションがまだ実行されていない場合 let innerHTML = ''; const text = $(this).text(); $(this).text(''); for (let i = 0; i < text.length; i++) { innerHTML += `<span class="char" style="animation-delay: ${i * 0.2}s;">${text[i]}</span>`; } $(this).html(innerHTML).css('visibility', 'visible'); // アニメーションが実行されたことをマーク $(this).data('animated', true); } }); });

js