CSS

flexboxもこれで完璧にマスター！HTMLとCSSの最新の知識とテクニックが詳しくまとめられたオススメの本

レイアウトはflexboxが標準になり、HTML5.1でsection要素や見出しの使い方が変更され、Web制作の現場で新しい知識の必要性が求められています。多様化するWebページを実装する最新の知識とテクニックが詳しくまとめられたオススメの本を紹介します。

http://coliss.com/articles/book-review/isbn10-483996369x.html

[CSS]悩む人も多い、要素を内包するラッパーの最適な実装テクニック

HTMLで最初に書かれている要素が、他のすべてを包み込む要素であるということは少なくありません。これはラッパーと呼ばれるもので、多くの人が使用していると思います。

http://coliss.com/articles/build-websites/operation/css/best-way-to-implement-wrapper.html

CSSリセットの新しい考え方、リセットと有用なコンポーネントだけのスタイルシート -Shoelace.css

レイアウトにfloatを使用していた頃はグリッドを構築するために、複雑なHTMLやテクニックが必要になることがありました。しかし、flexboxやCSS Gridの登場で、レスポンシブ対応の柔軟なグリッドを簡単に利用できるようになりました。

http://coliss.com/articles/build-websites/operation/css/css-starter-kit-shoelace.html

CSSで実装するオーバーレイ表示時のエフェクトサンプル 10

初期表示では非表示になっているナビ表示時やモーダル表示時の背景などで利用されるオーバーレイを表示する際のエフェクトサンプルを自分用にほしくて作ったのでシェアします。

https://www.nxworld.net/tips/10-css-overlay-effects.html

[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ

div要素やp要素に画像やテキストなどを配置した高さや幅のサイズが分からない要素を外側の容器の高さが不明でも天地左右の中央、ビューポートの中央に配置するスタイルシートのテクニックを紹介します。

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

[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」

Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です

http://coliss.com/articles/build-websites/operation/css/about-font-display.html

ボタンにユニークなホバー・クリックエフェクトを付けたいときに参考になるエフェクトサンプル

近年多くのサイトで採用されているパッと見がシンプルなボタンデザインでも、ホバーやクリックぐらいは少しユニークな感じにしたいと思ったときに参考になりそうなエフェクトをCodePenにアップされているデモから紹介します。

https://www.nxworld.net/tips/button-hover-and-click-unique-effect-examples.html

シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選

画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。

http://fit-jp.com/cssheading20/

[CSS]マージンの相殺を正しく理解しておこう！相殺はいつ起こるのか、相殺を回避するテクニック

まずは、クイズ。Aのdiv要素には「margin-bottom: 10px;」を、Bのdiv要素には「margin-top: 30px;」を指定した場合、それらを垂直に配置するとマージンはいくつでしょうか？

http://coliss.com/articles/build-websites/operation/css/about-collapsing-margins.html

[CSS]ワンランク上に！Webページのレイアウトを美調整するスタイルがまとめられたスタイルシート -fractures

float, flexbox, gridのレイアウトでよく使うスタイル、マージンやパディングを調整するスタイル、矩形・角丸・円形を実装するスタイル、幅や高さを調整するスタイル、要素を配置するdisplayやpositionのスタイルなど、CSSでページを実装する際にユーティリティとして活躍するスタイルがまとめられたスタイルシートを紹介します。

http://coliss.com/articles/build-websites/operation/css/css-utility-classes-fractures.html