カテゴリ:デジタル覚え書き > web関係 »

【css】1行ごとに色を変える

<br>で改行するだけで背景色とか変わったら楽しそうだと思ったので、やってみた。
  1. まずできたもの
  2. 背景をしましまにする(repeating-linear-gradient)
  3. 独自の変数を作る(カスタムプロパティ)
  4. 計算して値を決める(calc()関数)
  5. 使いどころは見つかってない

まずできたもの


  html{
    font-size: 20px;
  }
  :root {
    --line-magnif: 1.5;
    --line: calc(1rem * var(--line-magnif));
  }
  p.stripe {
    font-size: 1rem;
    line-height: var(--line-magnif);
    background: repeating-linear-gradient(to bottom, pink 0 var(--line), 
      white var(--line) calc(var(--line) * 2));
  }
結果:

1行目
2行目
3行目
4行目
5行目



背景をしましまにする(repeating-linear-gradient)

これは別に改行を検知してる訳じゃなくて、背景に縞模様を設定してるの。
repeating-linear-gradient反復線形グラデーションによる画像を生成する関数だそうですよ。
to bottomの部分は、上から下に向かってグラデーションを作るよってこと。
pink 0 var(--line)white var(--line) calc(var(--line) * 2)はそれぞれ、
ピンク色は0の位置から始めて1行分の位置までだよってのと、
白は上から1行分の位置から始めて、上から2行分の位置までだよってのを指定してる。
(表現は正確じゃないですが、この場合に限ってはこの言い方でいいかなと)

例えばこうすると


  .barber {
    background: repeating-linear-gradient(-45deg,
      white 0 20px, red 20px 40px, white 40px 60px, blue 60px 80px);
  }
結果:

背景が
床屋の
看板色だから
すごく
見づらい。

さっき書いた「正確じゃない」部分って言うのは「~まで」って言い方の所なんだけど、
ちゃんと書くと、色指定のあとの数値は、ひとつ目がその色の頂点で、ふたつ目が次の色との中間点を表してるの。
ふたつ目を省略すると、中間点は自動的に真ん中に設定される。
……分かりにくいよね……。

さっきの床屋のグラデーション、ふたつ目の数値をこうやって省略すると


  .barber2 {
    background: repeating-linear-gradient(-45deg,
      white 0px, red 20px, white 40px, blue 60px, white 80px);
  }
結果:

床屋
その2
どうだ

これ、縦縞を上下に並べると分かりやすいと思う。

←白の頂点←赤の頂点←白の頂点←青の頂点←白の頂点←赤の頂点

←白の頂点←赤の頂点←白の頂点←青の頂点←白の頂点←赤の頂点

……この辺にしとこう……。



独自の変数を作る(カスタムプロパティ)

頭に--(ハイフン2つ)がつくとそれはカスタムプロパティというものになります。
使うときはvar(--~)って参照(?)します。
変数みたいに扱えるから、同じ値を何度も使うようなときに管理がしやすいってことみたい。

一番最初に書いた完成形の中の--line-magnif: 1.5;の部分で1.5って数値を入れて、
p.stripeline-heightにその値を入れてます。
別にここに使うだけならこんなめんどくさいことしなくていいんだろうけど、この値を元にして算出したい値があったから、変えるときはここだけ変えれば済むようにしたかったんです。

算出したい値ってのが、次の--line。 これもまたカスタムプロパティなんだけど、これの値はさっきの--line-magnifを元に計算して決めてるの。



計算して値を決める(calc()関数)

ちょっとMDNに載ってたのを引用しちゃうけど、


h1 {
  font-size: calc(1.5rem + 3vw);
}
calc() - CSS: カスケーディングスタイルシート | MDN

これって言うのは、とりあえず1.5remの大きさは確保しておいて、ビューポート……ブラウザで実際に内容が表示される範囲の横の長さによって、少し文字の大きさも変えるっていうこと。
vwビューポートの初期値の包含ブロックにおける幅の1%なので、1.5rem + (約)ビューポートの3%が文字の大きさになるってことだね。

あとは、ページのサイドメニューとかを絶対値で指定してて、残りの部分はブラウザの幅を超えないようにしたい場合とかに使えるかなぁ。


#side_menu_left {
  width: 200px;
}
main {
  width: calc(100% - 200px);
}

このside_menu_leftwidthにもカスタムプロパティ使うと安全だね。

で、今回は1行の高さを求めるために、フォントサイズにline-heightをかけたのです。
カスタムプロパティを計算にも使えるなんて便利ね。



使いどころは見つかってない

特にカスタムプロパティとか使ってみたいんだけど、このブログでは借り物の共有テンプレートを改造改造で使ってるので、こう……いまいち使い道が見つからない。
でもすっごく便利な機能だから是非覚えておきたいです。



ジャンル : コンピュータ
テーマ : ホームページ・ブログ制作

コメントの投稿

非公開コメント

ステータス
細野ゆとり
あそびにん
せいべつおんな
レベル
ちから
すばやさ
こうげき力
しゅび力
EX
最新記事
カテゴリー
月別アーカイブ
全記事表示リンク

全ての記事を表示する

おえかき
ブログ内ページランキング
twitter
その他SNS
検索フォーム
オンラインカウンター
現在の閲覧者数:
カレンダー
05 | 2020/06 | 07
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -
リンク
カウンター
RSSリンクの表示
QRコード
QR