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

サイト構築 -制作

Post on:2017年4月24日

HTMLのリファレンスはここをチェックすれば大丈夫

HTMLの要素とその属性について、使用例と合わせて詳しく解説されたリファレンスです。

HTML Reference

要素は5つのカテゴリ（Base, Forms, Lists, Semantics, Tables）に分けられており、さらにそれぞれの要素はチェックボックスでブロック要素、インライン要素などにソートすることもできます。

Semantic -HTML Reference

左は表示、右はコードで、コピペして簡単に利用できます。

CSSのリファレンスはここをチェックすれば大丈夫

HTML Referenceと同じ作者によるCSSのリファレンスで、一般的なプロパティをイラストやアニメーションのデモで解説されています。

CSS Reference

各プロパティはデフォルト値と指定値で、デモが表示されているので、非常に分かりやすいですね。

Animations -CSS Reference

Flexboxの各プロパティの使い方、よく使うUIコンポーネントの実装方法

Flexboxでよく利用する各プロパティがどのように機能するのか、レイアウトにどのように影響を与えるか視覚的に解説されています。

CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説

Flexboxを使用すると、今まで出来なかったこと、かなり複雑なコードでスクリプトを併用しないと実装できなかったことをシンプルなHTMLとCSSで実装することができます。

Solved by Flexbox
和訳: Flexboxのこれが知りたかった！今まで出来なかったことがシンプルで簡単に実装できるスタイルシートのまとめ

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

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

CSS Grid Layoutの実装で必要な基礎知識

CSS Grid Layoutは今までレイアウトで使用していたtable, float, flexboxと実装方法だけでなく、考え方が大きく異なります。まずは、その基礎知識と考え方についてしっかり身につけておきたいですね。

CSS Grid Layoutの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説

CSS Grid Layoutを使用すると例えば、ヘッダ、フッタ、メインコンテンツ、両側のサイドバーの4つのセクションで構成された3カラムの聖杯レイアウトも非常にシンプルなコードで実装できます。

「CSS Grid Layout」を使って、レスポンシブ対応の3カラムレイアウトを実装するチュートリアル

新しいテクニックを使用すると、懸念させるのが既存のものとの整合性です。
floatやflexbox、vertical-alignやinline-blockなど、Webページでよく使用するレイアウトの実装に、CSS Grid Layoutがどのような影響を与えるか確認しておきましょう。

CSS Grid Layoutを使う前に知っておきたい、floatやflexboxなど既存の実装にどのような影響を与えるか

サポートブラウザの確認は大切

2017年4月11日、Windows Vistaのサポートが終了しました（Microsoftサポート）。
これによりIEは、IE9のサポートは必要なくなり、IE11のサポートに変わりました。
※IE10はWindows Server 2012のみなので、対応は必要ないでしょう。2012 R2はIE11ですし。

IE9のサポートの必要がなくなると例えば、calc()が利用できます。calc()はデスクトップ用のブラウザでもモバイル用のブラウザでも現状すべてにサポートされています。
サポートされているか確認する時は、Can I use...が便利です。