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

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

Flexboxでコンポーネントはどう実装するのだろう、バグの対応方法はどうするなど、これから困った時にどんどん利用していきたい、HTMLやCSSのリソースを紹介します。

2017年、HTMLやCSSのリソースのまとめ

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

サイトのキャプチャ

Can I use...Index

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

サイトのキャプチャ

CSS Animationのサポートブラウザ

ブラウザのバグで困った時に

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

サイトのキャプチャ

Browser Bug Searcher

使い方は簡単です。
キーワードや要素やプロパティや値を入力し、ブラウザをチェックします。

2017年フロントエンド関連の情報がまとめられたeBook

フロントエンドの制作で必要な知識は、非常に増えました。
すべてを覚えることはなかなか難しいと思います。

そんな時に役立つのがこのフロントエンド デベロッパ ハンドブックです。

サイトのキャプチャ

Front-End Developer Handbook 2017

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

サイトのキャプチャ

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

sponsors

top of page

©2018 coliss