フーノページTOP

Vectorator使い方TOP

SVGアニメーションTOP

WEBサイト作り方TOP

「ふ」のtwitter。記事を更新するとつぶやきます。

コメント・お問い合わせはこちら。

HTML、１行ごとに背景色を変更。

〽️ テキストの折り返しに自動で対応。

• SVGアニメーション、作り方。
  

  静的コンテンツの枠を飛び出す。

• CSSアニメーション、作り方。
  

  webアニメーションを１から学ぼう♪

⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。

テキスト要素でも色を交互に。

こんにちは、「ふ」です。
web上で、<table>や<li>要素を使って１行ごとに背景色を変えているものを見かけると思います。
これらについては、擬似クラスを使ったセレクタで各行にアクセスできるため、CSSだけで容易に実装することができます。

それでは、<p>のような単なるテキスト要素に対し、背景色を交互に違うものにするには、どうすればいいのでしょうか？
<table>要素のようにCSSセレクタで各行にアクセスすることはできません。もとよりテキスト要素はブラウザでの表示幅によって行の折り返し位置も変わってきます。

そこで今回。
JavaScriptとSVGを利用して、一般のテキスト要素でも１行ごとに背景色を変化させる、というものを作ってみました。これを実装することで、ただ単にタイピングしたものでも自動的に「折り返し位置」を検知し、１行ごとの色違いで表示させることができます。

いちいちtable化したりしなくても済むため、とても楽になりますよ♪

仕組み。

その仕組みですが、
position:absoluteを利用することで、テキスト要素の背面にSVG領域を重ねます。

JavaScriptを使い、テキストのline-heightを取得。line-heightは、fontsizeと行間の合計を表す値です。
背面のSVG領域に、line-heightと同じ高さの長方形を追加していきます。そしてfill(塗り)を１行ごと（長方形で言えば、１つごと）に交互に指定していけば、完成です。

HTMLとCSSのサンプル。

それではHTMLとCSSを準備します。

<p class = "alt_text"> bb１行目
bb２行目
bb３行目
bb４行目 </p>

１行目
２行目
３行目
４行目

４行のテキストを用意しました。CSSも記述します。

.alt_text { position:relative; line-height:1.5; } .svgarea { position:absolute; left:0; top:0; z-index:-1; }

テキスト要素のstyleと、後ほど追加するSVG領域のstyleもあらかじめ書いておきます。この２つは「position：relative」と「:absolute」の関係を持たせることで、同じ位置に重なるようにします。

SVG用のz-indexは「 -1」とし、テキスト要素の背面に回り込みませます。
また「left : 0」としたのは、テキスト要素のpadding-leftが指定されていた場合に影響をうけないようにするためです。

line-heightは明記する必要あり。

ここでテキスト要素に対し、line-heightの指定を明記しておく必要があります。
line-heightの初期値は「normal」です。これは、指定されたfont-family独自のデフォルト値に依存する、という意味です。

のちほどJavaScriptを使ってline-heightを「数値」として取得。それを背景に追加する長方形のheightに適用させるのですが、初期値の「normal」が返ってくるとこれは数値ではないのでheight値に適用することができません。

値は任意ですが、例えば今ご覧になっているテキストのline-heightは「1.5」です。
皆さんのデザインに合った値でかまわないので、CSS内にちゃんと数値で明記しておいてください。

JavaScriptを実装。

それではJavaScriptによる処理を書いていきましょう。

「「３//class要素を取得」」「「１ ..①」」 const altText = document.querySelectorAll(".alt_text"); 「「３//偶数行と奇数行の色を決める」」「「１ ..②」」 let color1 = "#d0e2b5"; let color2 = "#fff";

① 「alt_text」クラスの要素を取得します。
要素がページ内に複数あることを想定して、querySelectorAll( )を使っています。

② 偶数行と奇数行の色を決めておきます。のちほど長方形を生成する際に色を指定しても構わないのですが、後から変更したい場合。 グローバルな場所で変数に入れておくほうが、使い勝手がよくなります。

次にテキスト領域にぴったりと収まる、SVG領域を生成します。

「「３//クラス要素それぞれに処理を施す」」「「１ ..③」」 altText.forEach(function(value){ 「「３//SVG領域の生成」」「「１ ..④」」 let svgarea = document.createElementNS("http://www.w3.org/2000/svg","svg"); 「「３//テキスト要素と同じ幅/高さにする」」「「１ ..⑤」」 svgarea.setAttribute("width","100%"); svgarea.setAttribute("height","100%"); 「「３//CSSを適用」」「「１ ..⑥」」 svgarea.classList.add("svgarea");

③ ここでもclass要素が複数あることを想定して、forEach( )で全体の処理を行います。

④ SVGを生成しています。
HTML内で新たにSVGを生成するときにはcreateElementではなく、createElementNSを使い、第１引数にSVGの名前空間を指定する必要があります。
これは、その子要素についても同様です。

⑤ 生成したSVG領域はviewBox定義を持たせていないため、widthとheightを「100%」にしてやると、親要素である<p>の領域にぴったりとフィットします。

⑥ SVGに対し、事前にCSSで記述していた内容を適用させます。

このあと色違いの長方形を生成して、SVG領域に追加していきましょう。
一旦サンプルコードを区切りますが、まだforEach( )の中にいます。注意してください。

「「３//現在表示されている行数を取得」」「「１ ..⑦」」 let style = window.getComputedStyle(value); let lineCount = parseFloat(style.height)/parseFloat(style.lineHeight); 「「３//行数の数だけ長方形を生成→追加」」「「１ ..⑧」」 for(i = 0;i<lineCount;i++) { 「「３//長方形を生成」」「「１ ..⑨」」 let sikaku = document.createElementNS("http://www.w3.org/2000/svg","rect"); 「「３//幅と高さを指定」」「「１ ..⑩」」 sikaku.setAttribute("width","100%"); sikaku.setAttribute("height",style.lineHeight); 「「３//偶数行と奇数行で色を変える」」「「１ ..⑪」」 if(i%2 === 0) ｛ bbsikaku.setAttribute("fill",color1); ｝ else { sikaku.setAttribute("fill",color2); } 「「３//現在の行の高さだけy値をずらす」」「「１ ..⑫」」 sikaku.setAttribute("y",`$｛parseFloat(style.lineHeight)*i｝px`); 「「３//SVG領域に追加」」「「１ ..⑬」」 svgarea.appendChild(sikaku); } 「「３//テキスト要素に追加」」「「１ ..⑭」」 value.appendChild(svgarea); })「「３　//←forEach閉じ」」

⑦ はじめに色違いの長方形を「何個作るか」を決めるために、テキスト要素の行数を調べます。
デバイスの画面幅や、PC上でのウィンドウの大きさによってテキスト要素全体のheightは可変します。実際に表示されている高さを取得するには、getComputedStyle( )を使用します。「実際の高さ」を「実際のlineheight」で割ってやると、事実上表示されている行数が得られます。

⑨ 長方形の生成には、やはりcreateElementNSを使います。

⑩ 長方形の幅と高さを属性値にて指定。
widthは100%。つまりテキスト領域の幅に合わせます。
heightはline-heightの値を適用することで、１行分の高さにフィットさせます。

⑪ ここで偶数行/奇数行ごとに違う色を指定します。
「i%2」とすると、偶数なら「0」、奇数なら「1（elseの状態）」になるので、はじめに決めていた２つの色をそれぞれ指定しましょう。

⑫ 繰り返し生成された長方形を親のSVGにそのまま追加すると、同じ位置（領域の上端）に重ねられた状態になってしまいます。ので、それぞれの位置を行に合わせてずらしていく必要があります。
n行目に位置する長方形のy座標は、「 n *( line-height ) 」となります。これをy属性に指定しましょう。

⑬ 長方形をSVG領域に追加します。

⑭ ここまで整ったら、最後にSVGをテキスト要素に追加。

１行目
２行目
３行目
４行目

結果がこちら⬆︎。
１行ごとに背景色が変更されています。お疲れ様でした！

あとは自動で。

最後までお読みくださり、ありがとうございます。
今回は<table>などの図表式要素ではなく、単なるテキスト要素で１行ごとに背景色を変更する、というものを作ってみました。

このように１度作成しておけば、あとはテキストをペシペシとタイプするだけで、自動で「１行ごとの色違い」が表示されます。色変更についても<script>の最初のところで変数にしてありますので、好みのカラーを代入してつかってみてください。<rect>要素にstroke（枠線）を付けてもいいかもですね。

ではまた〜 ♪