Web制作者がブックマークしておきたい、HTMLやCSSで困った時にチェックしたいリソースのまとめ
Post on:2017年4月24日
2017年4月11日、Windows Vistaのサポートが終了しました。
これによりIE9のサポートは必要なくなり、今まで躊躇していたHTMLやCSSを利用できるようになりました。
Flexboxでコンポーネントはどう実装するのだろう、バグの対応方法はどうするなど、これから困った時にどんどん利用していきたい、HTMLやCSSのリソースを紹介します。

- HTMLのリファレンスはここをチェックすれば大丈夫
- CSSのリファレンスはここをチェックすれば大丈夫
- Flexboxの各プロパティの使い方、よく使うUIコンポーネントの実装方法
- CSS Grid Layoutの実装で必要な基礎知識
- サポートブラウザの確認は大切
- ブラウザのバグで困った時に
- 2017年フロントエンド関連の情報がまとめられたeBook
HTMLのリファレンスはここをチェックすれば大丈夫
HTMLの要素とその属性について、使用例と合わせて詳しく解説されたリファレンスです。

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

左は表示、右はコードで、コピペして簡単に利用できます。
CSSのリファレンスはここをチェックすれば大丈夫
HTML Referenceと同じ作者によるCSSのリファレンスで、一般的なプロパティをイラストやアニメーションのデモで解説されています。

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

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...が便利です。

各要素、プロパティ、キーワードのサポート状況をすぐに確認できます。

ブラウザのバグで困った時に
バグ情報はけっこうちりばらになっていて、探すのが大変です。
そんな時に最初にチェックしたいのが、バグに特化した検索エンジンです。

使い方は簡単です。
キーワードや要素やプロパティや値を入力し、ブラウザをチェックします。
2017年フロントエンド関連の情報がまとめられたeBook
フロントエンドの制作で必要な知識は、非常に増えました。
すべてを覚えることはなかなか難しいと思います。
そんな時に役立つのがこのフロントエンド デベロッパ ハンドブックです。

Front-End Developer Handbook 2017
HTML, CSS, JavaScriptに関するさまざまな情報・リソースがまとめられた無料のeBookです。

2016年に人気が高かったJavaScriptのライブラリ
sponsors