More than 3 years have passed since last update.

【初心者でもわかる】CSS1行で書ける、文字を目立たせるための7つの方法

Posted at 2021-04-03

どうも7noteです。たった1行でできる。目立たせたいテキストをCSSで装飾する方法

読みにくい文章、読みやすい文章。それらにはもちろん言葉的な意味で読みやすいものや読みにくいものがあると思います。ですが、どんなに読みやすい文章でもwebサイトでは装飾次第で読みにくいものになってしまうことも。

適切な表現をあわせてあげることで、webサイトの文章はグッと読みやすいものになります。
テキストを目立たせる7つの方法とを紹介していきたいと思います。

また1行でなく組み合わせ次第で様々な見せ方が可能になります！

style.css

p span {
  text-decoration: underline;
}

style.css

p span {
  font-weight: bold;
}

style.css

p span {
  color: #f00;
}

style.css

p span {
  font-size: 1.5em;
}

style.css

p span {
  background:linear-gradient(transparent 60%, #ff6 60%);
}

style.css

p span {
  text-decoration: line-through;
}

style.css

.yohaku {
   margin: 50px 0;
}

7つの方法を紹介してきましたが、これら単体ではデザイン的には少し弱いと思います。
ですがこれらを組み合わせることでしっかり目立たせるようなテキストを作ることができます。

例１）「マーカーを引く」 + 「太文字にする」

style.css

p span {
  font-weight: bold;
  background:linear-gradient(transparent 60%, #ff6 60%);
}

例2）「打ち消し線を引く」 + 「文字色を変える」 + 「文字を大きくする」

style.css

p span.a {
  text-decoration: line-through;
}
p span.b {
  color: #f00;
  font-size: 1.5em;
}

いろいろな方法があるので、見せたいものはなにか、逆にあまり目立たせたくないものはなにかをしっかり切り分けてCSSを当ててあげることで、見やすいサイトに一歩近づくのかなと思います。