CSS

超便利！確認しておきたい最新CSSツール、リソースガイド 2017年度

2017/05/31(Wed) 09:51

トレンドの変化やCSSの進化によって、最近は大量のツールや便利なリソースが公開されるようになりました。この記事では、2017年これまでにリリースされた便利CSSツールやリソースをカテゴリごとにまとめてご紹介します。

http://photoshopvip.net/101482

CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール

2017/05/31(Wed) 09:51

CSSで面倒なコード、アニメーションやグラデーションやボックスシャドウなど、実装の結果を見ながら値を調整してコードを生成でき、HTML5の新要素やよく使うスニペット、FacebookのOGPやTwitterカードやmicrodataやMetaタグなどのコードを簡単に生成できるオンラインツールを紹介します。

http://coliss.com/articles/build-websites/operation/work/web-code-tools.html

Sass：数値を操作したいときに便利な演算や関数

2017/05/26(Fri) 09:54

Sassには生CSSでは使えない様々な機能が用意されていますが、今回はその中から数値を操作したいときに便利な演算機能や関数を紹介します。

http://www.nxworld.net/tips/sass-number-operations-and-functions.html

おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ

2017/05/22(Mon) 09:50

PHPとjQueryの時代は廃れ始め、AngularやReactに代表されるUIフレームワーク、ES2015やTypeScriptを流暢に扱えることがフロントエンドの責務となり、HTMLやCSSも、EJSやPug・SassやPostCSSなどのトランスパイル言語を介すことがほぼ常識になってきた（と思う）。

http://qiita.com/kyoyababa/items/b07b6a4afac3bd970617

[CSS]YouTubeなどの動画をレスポンシブ対応で実装する現在主流とこれからのテクニック

2017/05/19(Fri) 09:51

動画は拡大縮小が簡単な画像とは異なり、アスペクト比を維持したままレスポンシブ対応で埋め込むと、幅のサイズだけが変わり、高さがそのままになってしまいます。

http://coliss.com/articles/build-websites/operation/css/experiments-in-fixed-aspect-ratios.html

[CSS]レイアウトでテキストは幅一定で、画像だけ幅いっぱいに表示させるスタイルシートのテクニック

2017/05/17(Wed) 09:46

テキストはスマホでは両横にマージンを保持しつつ幅いっぱいに、デスクトップでは指定した幅で表示し、常に画像だけ幅いっぱいに表示させるレイアウトを実装するスタイルシートのテクニックを紹介します。

http://coliss.com/articles/build-websites/operation/css/breaking-out-with-css-grid-layout.html

さまざまなデザインのボタンを最小限のHTMLで実装する、HTML5とCSS3のテクニックのまとめ

2017/05/16(Tue) 10:02

HTMLはシンプルに最小限、26種類のさまざまなデザインのボタンを実装されたコレクションを紹介します。

http://coliss.com/articles/build-websites/operation/css/collection-of-css-button.html

Web制作者がブックマークしておきたい、HTMLやCSSで困った時にチェックしたいリソースのまとめ

2017/04/24(Mon) 10:14

2017年4月11日、Windows Vistaのサポートが終了しました。これによりIE9のサポートは必要なくなり、今まで躊躇していたHTMLやCSSを利用できるようになりました。

http://coliss.com/articles/build-websites/operation/work/html-css-techniques-for-2017.html

手軽にCSSグリッドレイアウトのコードを生成できる「Griddy」

2017/04/17(Mon) 09:50

先日公開した記事「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」に続き、CSSグリッドレイアウト情報第二弾。

http://www.webcreatorbox.com/webinfo/griddy/

CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する

2017/04/17(Mon) 09:49

大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。

http://www.webcreatorbox.com/tech/css-grid-layout/