トップ > デザイン > ブックマークしてない？良質なCSSテクニックなどが学べる記事19選

ブックマークしてない？良質なCSSテクニックなどが学べる記事19選

デザイン

f:id:mataro1:20160109150611j:plain

CSSのエフェクトやアニメーションって様々なものがありますよね。そこで、この記事ではCSSについての記事を様々なものをまとめてみました。
例えば、以下のようなものを紹介しています。

  1. CSSを生成してくれるオンラインツールまとめ
  2. 数十ものCSSのテクニックまとめ
  3. テキストに関するCSSのエフェクトまとめ
  4. ボタンのエフェクトまとめ
  5. 見出しのCSSまとめ
  6. etc

このように多くのことを紹介しているので是非保存版として活用して下さい。

CSS3アニメーションをらく～に実装！オンラインツール7選

webkitブラウザ以外に対応したアニメーションを作るときに使用したいCSS3アニメーション作成ツールがあります。
この記事ではオンライン上でCSS3アニメーションを作るためのツールを7つも紹介されています。

まだCSSをオンラインツールで作ったことがない方やお気に入りのオンラインツールを見つけるのにオススメです。

liginc.co.jp

まるでPhotoshop?! CSSフィルタを使った美しい写真加工エフェクト

CSSフィルタと言うものを利用すれば、画像加工を簡単にできます。
例えば、グレースケール化やぼかし、色調の反転など他にも様々なことができます。

CSSで画像加工を行えるため、ものすごい便利です。

http://photoshopvip.net/css-filter

わずかなコードで実装する、CSSスタイリングの小技テクニック28個まとめ

28個もCSSのテクニックが紹介されています。そのため、CSSを学び始めて浅い方や様々なCSSのコードを見たい方にオススメです。

photoshopvip.net

CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips

こちらでは以下のことが紹介されています。

リスト要素で実装したアイテム間の区切り線の最後だけ取り除く簡単なコード、リストの各アイテムをカンマ区切りで配置させるコード、テキスト表示をすべてのデバイスで最適化するコードなど、サイトやブログに役立つ便利なCSSのテクニックを紹介します。

これらのことが知りたい場合にオススメです。

CSSでやりたかったことが数行のコードで実装できるスタイルシートの小技のまとめ -CSS Protips | コリス

CSSの素晴らしいアイデアが満載！2015年スタイルシートのテクニックのまとめ

ともかく多くのCSSのテクニックが紹介されています。
この記事は保存版の記事だと思います。

CSSの素晴らしいアイデアが満載！2015年スタイルシートのテクニックのまとめ | コリス

CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ

テキストエフェクトのパターンが24個も紹介されていて、コピペで利用できるためとても便利です。

photoshopvip.net

CSSのみで制作する、ナビゲーションメニュー用アニメーションエフェクト10個まとめ

ウェブサイトの上部にあるナビゲーションメニュー用のアニメーションエフェクトが10種類も紹介されています。
そのため、ご自身のサイトにあったアニメーションエフェクトを見つけることができるでしょう。

photoshopvip.net

CSSで実装できる、魅力的なボタンデザイン用サンプル、テクニック30個まとめ

ボタンデザインのみを紹介した良質な記事です。
ボタンにこんなアクションを付けられるのかと感動するような様々なサンプルやテクニックが紹介されています。

30個もあって、実際に使うときにどれを使いそうか悩みそうですが、明らかに保存版の記事です。

photoshopvip.net

CSSコピペで利用！話題のボタンデザイン用スニペット、サンプル30個まとめ

こちらの記事もボタンデザインに特化した記事です。
ボタンデザインのCSSが30個紹介されているので、ぜひともブックマークなどで保存しておきたい記事です。

http://photoshopvip.net/archives/83796photoshopvip.net

CSS Buttons

こちらは記事というかtumblrに投稿されたボタンの一覧を見ることができます。
頻繁に更新されていて、新しいデザインやアニメーションが数多く公開されています。

cssbuttons.tumblr.com

購入ボタンを押すと美しく梱包してくれる見て楽しい触って気持ちいい購入ボタンの実装

紹介されているボタンの種類は1つだけですが、動きが独特でとても面白いです。
本当にラッピングをしてもらっているかのような動きであるため、ECサイト運営者などにオススメです。

e0166.blog89.fc2.com

シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 目次

こちらは見出しのデザインのみにこだわった記事です。
お気に入りの見出しを見つけて、自分のウェブサイトなどに使ってみると良いでしょう。

http://www.nxworld.net/tips/50-css-heading-styling.htmlwww.nxworld.net

テキスト周りのスタイリングに使えるCSSプロパティやスニペット

以下の項目に関するCSSテクニックが紹介されています。
20個も紹介されていますので、テキストをいじりたいときにとても参考になります。

  1. アンチエイリアスを設定する
  2. テキスト選択時のハイライトカラーを変更する
  3. テキスト選択を無効にする
  4. 文字間隔を調整する
  5. 先頭の文字を字下げする
  6. 2行目以降を字下げする
  7. 先頭の文字を○○する
  8. 最初の行だけ○○する
  9. 文字を折り返させない（改行させない）
  10. 文字を折り返させる（改行させる）
  11. テキストを両端揃えにする
  12. テキストを省略する
  13. 長体や平体で表示する
  14. テキストに縁取りをつける
  15. ブラーテキストを表示する
  16. テキストにグラデーションをかける
  17. 強調文字をより目立たせる
  18. 英テキストの大文字・小文字・スモールキャップス表示を指定する
  19. 段組表示を実装する
  20. テキストを縦書きにする

http://www.nxworld.net/tips/useful-css-properties-and-snippets-for-text-styling.htmlwww.nxworld.net

CSSのすぐに使える小技から驚きのスゴ技まで！CSSアニメーションの素晴らしいアイデアのまとめ

CSSアニメーションの様々なサンプルが紹介されています。
中にはゲームボーイカラーを再現したアニメーションまであります・・・・

CSSのすぐに使える小技から驚きのスゴ技まで！CSSアニメーションの素晴らしいアイデアのまとめ | コリス

そのCSS、ヤバイかも？CSS設計が破綻するありがちな失敗パターン4つ

web designを行う人でCSS設計をしっかり行いたいときに読んでおくといいでしょう。

liginc.co.jp

[CSS]Webページでよく利用されるテクニックに役立つ！使い方をしっかりマスターしておきたい便利な5つの疑似クラス

知っておくと便利な擬似クラスについて紹介されています。

[CSS]使い方をしっかりマスターしておきたい便利な5つの疑似クラスと疑似要素 | コリス

CSSで片方可変、片方固定のカラムレイアウトを実装する方法

こちらの記事もウェブデザインをこだわりたくなってきたときに必要になるかもしれません。
ウェブデザインを自分で行わない人には関係のない記事です。

http://www.nxworld.net/tips/css-variable-width-and-fixed-width-layout.htmlwww.nxworld.net

jQueryとCSS3で手軽に実装できるスクロールエフェクト

使用できる機会はかなり限られるかもしれませんが、スクロールしたときのエフェクトのHTMLやCSSが紹介されています。

スクロールエフェクトを知りたい方にオススメの記事です。 www.webcreatorbox.comox.com/tech/scroll-effect/:embed:cite]te]

地味に忘れるソーシャル系やサイトのキーカラーをSassの変数でまとめてみた

あまり必要になることはないでしょうが、SNSなどのキーカラーがまとめて紹介されています。
そのため、自作のシェアボタンなどを作るときに便利でしょう。

liginc.co.jp

オススメ記事

www.mataro1.com