CSS

CSS3のFlexBoxで実装する、知っておきたい5つのレイアウトテクニックまとめ

2016/06/01(Wed) 07:28

Flexbox は、もともとウェブサイトやモバイルアプリのUIをデザインするために最適化された CSS です。 Flexbox のさまざまなプロパティを利用することで、これまでは CSS のみで難しかったレイアウトや配置を実現できるようになりました。

http://photoshopvip.net/90700

Sass(SCSS)のmixinを使って、:nth-child疑似クラスなどを指定しやすくする便利スタイルシート「Family.scss」

2016/05/31(Tue) 07:19

便利だと思ったので備忘録兼ねてご紹介。CSSでn番目の要素に適用したい時などに利用する:nth-child疑似クラスや:nth-last-child疑似クラスですが、先頭（または最後）からn番目になどの単純な指定ではなく、ちょっと複雑な指定をする際は指定方法を考える（悩む）ことがあると思います。

http://www.nxworld.net/tips/family-scss.html

新しいInstagramのロゴデザインを再現したデザインリソースやCSSテクニック

2016/05/30(Mon) 07:30

少し前に新しいInstagramのロゴデザインが発表されましたが、発表直後から様々な人達が各種デザインツールを使ってロゴデザインを再現したり、中にはHTMLとCSSを使って再現する人も出てきました。

http://www.nxworld.net/material/new-instagram-logo-design-resource-and-css-technic.html

ちょっと新しい見せ方、CSSなどで実現する今っぽいエフェクトまとめ

2016/05/24(Tue) 07:24

CSSで実現する今っぽく新しいエフェクトをまとめました。2016年のトレンドをおさえてピックアップ。クリックしたときや既存の画像に面白いフィルターや動きを加えたり、今までにない効果を出したいときに。

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

CSSで実装するボタンホバー時のボーダーアニメーションエフェクト

2016/05/18(Wed) 07:26

自分用に一覧化したのがほしくて作ったのでシェアします。主にゴーストボタンなどのシンプルなボタンデザインのホバーエフェクトとして使われることが多いと思うボーダーアニメーションのサンプルです。

http://www.nxworld.net/tips/css-button-hover-border-effects.html

CSSでコンテンツが少なくてもフッターをウィンドウ下部に表示する方法

2016/05/17(Tue) 07:30

特に何も考えず組んでいると、コンテンツの内容が少ない場合に本来ウィンドウ下部に表示されてほしいフッターコンテンツなどが中途半端な位置に表示され、その分フッターとウィンドウ下部の間にある領域に大きな空白ができてしまうことがあります。

http://www.nxworld.net/tips/css-sticky-footer.html

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法

2016/05/16(Mon) 07:28

特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置して width:100%; と height:auto; を指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。

http://www.nxworld.net/tips/css-background-aspect-ratio.html

CSS Flexboxの使い方・バグ情報・グリッドやコンポーネントのフレームワークなど、有用なリソースのまとめ

2016/05/10(Tue) 07:24

CSS Flexboxで何ができるのか、どういうレイアウトができるのか、基礎知識・バグ情報をはじめ、グリッドやコンポーネントの実装など、Flexboxの有用なチュートリアルやフレームワーク、便利なオンラインツールを紹介します。

http://coliss.com/articles/build-websites/operation/css/flexbox-tutorials-and-frameworks.html

UIデザインの参考にしたい！ナビメニュー用HTML/CSSスニペット40個まとめ

2016/04/22(Fri) 09:35

ウェブサイトやブログにおいて、ユーザーがもっとも操作するインターフェースのひとつは、ナビゲーションメニューです。きちんと設置することで、サイトを構成する各コンテンツへとユーザーを移動でき、目次のような役割として活用できます。

http://photoshopvip.net/archives/89522

メンテナンス性に優れ、拡張性を備えたCSSを書くために -メンテナブルCSS

2016/04/22(Fri) 09:34

メンテナンス性に優れ、拡張性を備えたCSSを書くための「MaintainableCSS」を紹介します。

http://coliss.com/articles/build-websites/operation/css/maintainable-css-by-adam.html