CSS の行の高さに関するヒント property_html/css_WEB-ITnose

CSS の line-height 属性は、テキストの 2 行間のスペースの量を制御します。通常、単位のない値 (line-height:1.4 など) に設定され、フォント サイズで構成されることを示します。属性。行の高さは植字において非常に重要な属性です。高すぎると、テキストの行がぎこちなく分離されてしまいます。しかし、おそらくあなたはすでにこのことを知っていたでしょう。

この記事では、line-height の正確な値を知っている (または把握できる) 場合、より興味深いものにすることができるいくつかのテクニックに焦点を当てます。

テキストの各行に異なる色を指定します

残念ながら、::n 行目のセレクターはありません。また、45a2772a6b6107b401db3c9b82c049c2 も信頼できるとは言えません。テキストがどこかで壊れる理由は無数にあります。

標準ではありませんが、1 つの方法は、要素の背景をテキストの背景として使用することです。

CSS

.text {  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}

.text{  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}

別のトリックもあります。linear-gradient() を使用し、カラー ポイントを追加して、色が互いにグラデーションにならないように制御することができます。これにより、1 つの色が終了した後、突然別の色が現れるようにすることができます。が始まります。 line-height の値が 22 ピクセルであると仮定すると、22 ピクセルごとにグラデーションを区切ることができます。

Sass

.text {  background-image: linear-gradient(    to bottom,    #9588DD,    #9588DD 22px,    #DD88C8 22px,    #DD88C8 44px,    #D3DD88 44px,    #D3DD88 66px,    #88B0DD 66px,    #88B0DD)}

.text{  background-image: linear-gradient(    to bottom,    #9588DD,    #9588DD 22px,    #DD88C8 22px,    #DD88C8 44px,    #D3DD88 44px,    #D3DD88 66px,    #88B0DD 66px,    #88B0DD)}

2 つのテクニックを組み合わせた後:

Firefox など、ブラウザがテキストの背景クリップをサポートしていない場合は、テキストの後ろに長いカラー バーが表示されるかもしれません。これはクールだと思いますし、気に入るかもしれませんが、テキストの色を設定する昔ながらの方法に戻りたいと思うかもしれません。後者の場合は、@support を使用して、ブラウザーがサポートしている場合にのみ CSS が有効になるように設定できます。

また、line-height の値を繰り返し使用しているので、変数化した方が良いかもしれません。ここでは SCSS を使用していますが、いつか実際の CSS 変数を使用できるようになり、ページがレンダリングされた後も引き続き変更を加えて、その変数が反映されるのを確認できるようになると非常に素晴らしいでしょう。

Sass

$lh: 1.4em;body {  font-size: 1em;  line-height: $lh;}@supports (-webkit-background-clip: text) {  p {    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    background-image: linear-gradient(      to bottom,      #9588DD,      #9588DD $lh,      #DD88C8 $lh,      #DD88C8 $lh*2,      #D3DD88 $lh*2,      #D3DD88 $lh*3,      #88B0DD $lh*3,      #88B0DD);  }}

$lh: 1.4em; body{  font-size: 1em;  line-height: $lh;} @supports (-webkit-background-clip: text) {  p{    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    background-image: linear-gradient(      to bottom,      #9588DD,      #9588DD $lh,      #DD88C8 $lh,      #DD88C8 $lh*2,      #D3DD88 $lh*2,      #D3DD88 $lh*3,      #88B0DD $lh*3,      #88B0DD);  }}

最も簡単な方法は、これらのプロパティを最上位の要素に適用することです。ここに例を示します。その最初の数行が焦点です。

Sass

.text {  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  background-image: linear-gradient(    to bottom,    rgba(white, 0.8),    rgba(white, 0.8) $lh,    rgba(white, 0.6) $lh,    rgba(white, 0.6) $lh*2,    rgba(white, 0.4) $lh*2,    rgba(white, 0.4) $lh*3,    rgba(white, 0.2) $lh*3,    rgba(white, 0.2));}

.text{  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  background-image: linear-gradient(    to bottom,    rgba(white, 0.8),    rgba(white, 0.8) $lh,    rgba(white, 0.6) $lh,    rgba(white, 0.6) $lh*2,    rgba(white, 0.4) $lh*2,    rgba(white, 0.4) $lh*3,    rgba(white, 0.2) $lh*3,    rgba(white, 0.2));}

行の最後まで操作したい場合、これはさらに難しくなります。この場合、リボンを最初から開始して最後の数行まで実行する必要がありますが、幸いにも calc() を使用してこれを実現できます。この効果を達成するには、疑似要素のグラデーションのレイヤーをオーバーレイしたり、干渉を避けるために pointer-events:none を設定したりするなど、他の方法もあります。

テキスト間の線

グラデーションのカラーポイントを制御する方法を上で紹介しましたが、同様の方法を使用すると、1px 単位でグラデーションを作成し、行の高さに達するまで繰り返すことができます。最も簡単な方法は、他の要素が適切に配置されていることを確認しながら (たとえば、パディングも line-height に基づいています)、

repeat-linear-gradient を使用してこれを実現することです。

Sass

.text {  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  background-image: linear-gradient(    to bottom,    rgba(white, 0.8),    rgba(white, 0.8) calc(100% - 66px),    rgba(white, 0.6) calc(100% - 66px),    rgba(white, 0.6) calc(100% - 44px),    rgba(white, 0.4) calc(100% - 44px),    rgba(white, 0.4) calc(100% - 22px),    rgba(white, 0.2) calc(100% - 22px),    rgba(white, 0.2));  background-position: bottom center;}

.text{  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  background-image: linear-gradient(    to bottom,    rgba(white, 0.8),    rgba(white, 0.8) calc(100% - 66px),    rgba(white, 0.6) calc(100% - 66px),    rgba(white, 0.6) calc(100% - 44px),    rgba(white, 0.4) calc(100% - 44px),    rgba(white, 0.4) calc(100% - 22px),    rgba(white, 0.2) calc(100% - 22px),    rgba(white, 0.2));  background-position: bottom center;}

1px の線を作成するには、line-height の値をピクセル単位で知ってから 1 を引く必要があります。 1 を減算するのは、最後の 1 ピクセルを線として残して、既知の線の高さでグラデーションが正確に繰り返されるようにするためです。本文の font-size を 1em (16px) に設定しているため、line-height の単位は em に設定されています。1em を減算して単位を削除し、16px を乗算して 1 を減算すると、必要な値が得られます。 。

行ごとに画像を 1 つずつ配置します

line-height を知っている場合にできるもう 1 つの方法は、bakcground-size を少なくとも垂直方向に一致させることです。その後、背景を垂直方向に繰り返すことで、最終的に 1 行に 1 つの画像が得られます。

Sass

.parent {  padding: $lh*2;  background: #082838;  background-image: repeating-linear-gradient(    to bottom,    rgba(white, 0)   0,    rgba(white, 0)   $lh/1em*16px-1,    rgba(white, 0.1) $lh/1em*16px-1,    rgba(white, 0.1) $lh/1em*16px  );}

.parent{  padding: $lh*2;  background: #082838;  background-image: repeating-linear-gradient(    to bottom,    rgba(white, 0)  0,    rgba(white, 0)  $lh/1em*16px-1,    rgba(white, 0.1) $lh/1em*16px-1,    rgba(white, 0.1) $lh/1em*16px  );}

CodePen の Chris Coyier (@chriscoyier ) による Text Dif Color の Pen One line を参照してください。