search
LoginSignup
1

posted at

updated at

CSSテクニックまとめ(初級~中級編)

CSSテクニック

今回はCSSの初心者~中級くらいの小ワザを少しですがまとめてみました。
どれもよくWebサイトでみかけるテクニックなので、好きな時に使えるようにしておきたいものです。
備忘録として残していきたいと思います。

グラデーション

グラデーションは「linear-gradient」というものを使います。
()内には、変化させたい「方向」、2種類以上の「色」を指定します。

  • to right:左から右に色が変化する
  • to bottom:上から下に色が変化する
  • to right bottom:左上から右下に色が変化する
  • 30deg:30度の角度で色が変化する
  • radial-gradient:中心から外側に向かって円形のグラデーションを表現する

要素を透明にする

「opacity」というものを使います。
値は「1」が不透明で「0.5」が半透明、「0」が透明になります。
Image from Gyazo

要素を好きな場所に配置する

「position」プロパティを使用します。
よく使うポジション指定方法は主に3種類あります。(ポジションの初期値はstatic)

「relative」

配置ができる範囲を設定する値。主に親要素に指定し、子要素に「absolute」を指定することで親要素の中を自由に動かすことができます。
この「relative」「absolute」は基本セットで使用します。

「absolute」

配置する場所を設定する値。親要素の範囲内で自由に動くことができる。

「fixed」

画面に固定しして配置する値。
スクロールしてもついてくるアレです。

ホバーアニメーション

滑らかに変化させる「transition」プロパティと「セレクタ名:hover」を使います。

変化させたい部分にマウスカーソルを乗せた(ホバー)ときにリストの背景色や文字色など、スタイルを変更できます。
※スマホの場合はタッチしたとき

  • transition: all .8s・・・「all」は背景や文字色すべてを対象にし、「.8s」は0.8秒かけて変化させるという意味
  • セレクタ名:hover ・・・ホバーした時のスタイル設定

最後に

簡易的なものにはなりますが、今回は以上となります。
学習はやはり、インプットだけではなく、実際に手を動かしてコードをとにかく書いていくのが一番身になります。
「こういうのが作りたい」というようなアイデアをネットサーフィンで見つけて、どんどん自己流のサイトを作ってみましょう。

学習参考サイト

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1