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

7255 ワード
HTML CSS 初心者 ブログ HTML テキストリンク

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

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

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

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

テキストを目立たせるための7つのCSS

▼下線を引く

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を当ててあげることで、見やすいサイトに一歩近づくのかなと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ