【初心者向け】ノンデザイナーでも、一手間加えるだけでグッと印象が変わるCSS

7574 ワード
HTML CSS 初心者 デザイン HTML テキストリンク

どうも7noteです。一手間加えることでwebデザインをレベルアップできるCSSの Tips

CSSひと手間でグッと引き立てる、webデザインTipsを紹介。
同じ技術を使っていても、使っているCSSや使い方だけで、WEBサイトの印象はグッと良くできます。

デザイナーでなくても簡単に使えるCSSをまとめました。

テキスト系

・ webフォントを使う

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Slab:wght@100&display=swap" rel="stylesheet">

<style>
h1 {
  font-family: 'Josefin Slab', serif;
}
</style>

GoogleのWEBフォントのサイト → https://fonts.google.com/

・ マーカーのような下線を引く

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

画像系

・ 丸みのある画像に変える

img {
  border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
}

・ chromeで画像がぼやけるのを防ぐ

img {
  -webkit-backface-visibility: hidden;
}

・ imgでもbackground-size:coverみたいに親要素全体にかかるように画像をトリミングする

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

※親要素に幅と高さの指定がなければ効かない。

ボタン系

・ 影や角丸をつける

style.css
a {
  color: #333;
  text-decoration: none;
  border-radius: 50px;        /* 角丸にする */
  padding: 10px 20px;
  background: #ffcccc;
  box-shadow: 0 3px 3px #ccc; /* 影をつける */
}

・トランジション

/* 以下を追記 */
a {
  transition: .3s;
}

a:hover {
  color: #fff;
  background: #ff0000;
}

transitionを指定しておくことで、hover時の変化をなめらかにできます。

・ ホバー時色反転

ソースは上と同じ。

フォーム系

・ オリジナルラジオボタン・チェックボックス

ソース → こちら

まとめ

CSSだけでひと手間加えるTipsを紹介しました。
ここでは紹介しきれていないテクなどもまだまだたくさんありますし、まだ非対応のブラウザがあるプロパティが使えるようになればそこから新しい手法なんかも生まれてくると思います。

時代のデザインの流行りなんかもあるので、様々なサイトを見て技術やテクニックを盗んでいくとスキルアップにい繋がりますよ！

おそまつ！

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