株式会社アプリコットデザイン株式会社アプリコットデザイン

tel.0120-622-835

営業時間/10:00〜18:00 定休日/土日祝日

tel.0120-622835

営業時間/10:00〜18:00 定休日/土日祝日

  • instagram
  • facebook

BLOGスタッフブログ

トップページ > ブログ > 懲りずにCSS事情第4段

懲りずにCSS事情第4段

UPDATE : 2023.03.13

CATEGORY :
Hirabayashi
Hirabayashi

Hirabayashi

こんにちわ、かずです。

CSSのプロパティなんて全部知っていると思っていたんですが、そんなことなかった。世界は広い。
てことで第4段になります。


first-letter

いつも一文字目を<span>で囲っていたんですが、何かないかなーと思っていたらありました。
お恥ずかしい限り。

h2::first-letter{
color: blue;
font-size: 2em;
}


こんな感じで一文字目の色を変えられます!文字サイズとかも!
疑似要素なので、before要素の一文字目とかには使えませんのでご注意ください。
あくまで要素の最初の文字でした。


repeating-linear-gradient

linear-gradientはグラデーションを表現するためによく使うのですが、これは書き方によって線を描けます
下記は格子をCSSで書いたものです。


ソースはこちら

background:
repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 1px, transparent 1px, transparent 20px),
repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 1px, #fff 1px, #fff 20px);


いつもはキレイにリピートするように画像を書き出していましたが、余計な画像が減って素敵ですね!


これからも微妙に役立つかもしれない情報を発信するために情報収集をどんどんしていきたいと思います!

それでは。

この記事を書いた人Who wrote this blog

Hirabayashi Kazuaki

猫をこよなく愛するコーダー

RELATED POST関連する記事

CONTACTお問い合わせ

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

  • 信州ファームデザイン
  • 信州ファームマーケット
  • 株式会社POCKET
  • 株式会社Think for Design