CSS

プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック

2014/06/03(Tue) 10:56

WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。

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

横に水平線のあるテキスト

2014/05/27(Tue) 11:44

おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。

http://terkel.jp/archives/2014/01/text-with-horizontal-line/

CSSのみで実装するキャプションエフェクト 20

2014/05/26(Mon) 11:58

自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。画像のマウスオーバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。

http://www.nxworld.net/tips/css-only-caption-effect.html

CSSで作る見出しデザイン

2014/05/14(Wed) 11:54

見出しはサイトの見た目を決める上で重要な箇所です。印象的な見出しは、それだけでサイトを引き立ててくれます。

http://webnonotes.com/css/heading_sample/

[CSS]次のプロジェクトで使える！スタイルシートの極上テクニックのまとめ

2014/05/07(Wed) 12:00

CSSの進化が止まりません。ページ上部の打ち出し画像をレスポンシブ対応でうまく配置するテクニック、エレメントにちょっとしたアクセントを加えたい、レスポンシブ用のfont-size指定のうまい方法など、スタイルシートの極上テクニックを紹介します…

http://coliss.com/articles/build-websites/operation/css/awesome-css-tutorials-2014-spring.html

[CSS]テキストの左右に水平ラインをすぅーーーっと引くスタイルシートのテクニック

2014/04/30(Wed) 10:58

hn, pなどの要素を使ったテキストの左右に、水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します…

http://coliss.com/articles/build-websites/operation/css/css-heading-side-lines-by-frxnz.html

モダンCSS設計の解説サイトまとめ

2014/04/21(Mon) 11:39

最近CSSの設計手法も進化してきたので、モダンCSS設計についての記事をまとめてみました…

http://qiita.com/takuhito-h/items/ef8e9cd5fc4b4230125e

[CSS]この発想はなかった！たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity

2014/04/14(Mon) 12:28

画像やテーブル、地図などを配置するiframe, video, canvas, svgなど、主にボックス系のHTML要素をシンプルなコードでレスポンシブ対応にするスタイルシートを紹介します…

http://coliss.com/articles/build-websites/operation/css/css-small-framework-for-responsive-fluidity.html

CSSのセレクタがちょっとあやふやな人はやってみて！　楽しみながらCSSのセレクタを学ぶ -CSS Diner

2014/04/11(Fri) 10:54

ゲーム感覚で楽しみながら、CSSのセレクタを学ぶことが出来るオンラインコンテンツを紹介します…

http://coliss.com/articles/build-websites/operation/css/online-learn-selectors-css-diner.html

[CSS]リスト要素を左寄せぴったりに配置するスタイルシートのテクニック

2014/03/27(Thu) 12:31

中黒のような黒丸、四角、数字など、リストの先頭につくマークを左寄せに揃えるスタイルシートのテクニックを紹介します。対応ブラウザはIE8+で、ネガティブマージンは使用しません…

http://coliss.com/articles/build-websites/operation/css/css-align-lists-flush-left-by-jeremy.html