CSS

ちゃちゃっとCSSで色々とやりたい時に激しく便利なサイトとまとめ記事

2016/03/17(Thu) 07:30

Webサイトを作っている時に、ここ便利だなというところをご紹介。なるべくさくっとやりたいことをコードにする。そんなCSS作成のサポートにピッタリな記事、サイトをご紹介します。

http://flipsblog.jp/archives/2554

CSS初心者でも簡単！画像をホバーするとコンテンツをさまざまなアニメーションで表示するスタイルシート -imagehover.css

2016/03/11(Fri) 07:19

外部CSS一つとclassを加えるだけで簡単に実装できる、画像をホバーするとコンテンツをさまざまなアニメーションで表示するスタイルシートを紹介します。

http://coliss.com/articles/build-websites/operation/css/image-hover-css.html

CSSグラデーションを使ったデザインパーツサンプル

2016/02/25(Thu) 07:25

わざわざ画像を使わなくても簡単にグラデーションを表現することができるCSSのlinear-gradient。未対応ブラウザをサポートすることもまだ完全になくなったとは言えませんが少しずつ減ってきてはいるので、利用頻度が増えたという人も多いと思います。

http://www.nxworld.net/tips/design-parts-using-css-gradient.html

CSS：角丸のテーブルを作成する方法

2016/02/15(Mon) 07:34

テーブルをCSSを使って角丸にする方法です。以前は角丸部分に特定のクラスをそれぞれ記述して、場合によってはJavaScriptと併用して実装していたり、特定のブラウザの為に画像を使うとか親要素にdiv要素を幾つか記述するとかいろいろ面倒なことしてたのですが、最近はそれらをしないでも実現できる機会も増え、使用頻度も割と高いので備忘録として残しておきます。

http://www.nxworld.net/tips/css-border-radius-table.html

意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ

2016/02/09(Tue) 07:35

CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。

http://commte.net/blog/archives/5567

【第2弾】少しのコードで実装可能な20のCSS小技集 | Webクリエイターボックス

2016/02/03(Wed) 07:27

はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！

http://www.webcreatorbox.com/tech/css-tips-2/

[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ

2016/01/28(Thu) 07:29

古いバージョンのIEをサポート外にすると、CSSで使えるテクニックも広がります。これからどんどん使っていきたいCSSのテクニックを紹介します。

http://coliss.com/articles/build-websites/operation/css/css-techniques-for-goodbye-ie8.html

CSSのみで縦の年表のようなタイムラインを作れる・「Timelined」

2016/01/26(Tue) 07:30

TimelinedはJavaScript不要でタイムラインを作成出来るスタイルシートです。CSSのみで縦の年表を作成出来ます。カスタマイズ性も優秀で、アイコンの有無や吹き出し、アイコンのサークルカラー、タイムラインのラインカラー、日付等をclassで設定出来るようになっています。

http://kachibito.net/useful-resource/timelined

CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10

2016/01/22(Fri) 07:44

画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。

http://www.nxworld.net/tips/10-css-hamburger-menu-icon-design-and-effect.html

[CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ

2016/01/22(Fri) 07:35

テキストやdiv要素など、高さが分からない要素を外側の容器の高さが不明でも、天地・左右・天地左右・ビューポートの天地左右の中央に配置するCSSのテクニックを紹介します。

http://coliss.com/articles/build-websites/operation/css/css-centering-vertically-and-horizontally.html