HTML/CSSお役立ちリンク集

WEBサイトを制作しているときにタグやCSSプロパティの書き方に迷うことが良くあります。
膨大な種類のタグを全部覚えるなんてまず不可能ですから、まとめてくださっているサイトは非常に助かります。

まずは基本

コーダーならだれでもお世話になる。知らない人はおそらくいないリファレンス集 HTMLクイックリファレンス

要素の親子関係に困ったら「入れ子チートシート」

タグの親子関係なんていちいち覚えていられない。
これってブロックだっけ？インラインだっけ？このタグの中って何入れれるんだっけ？
迷うことありますよね。
吉川ウェブさんの入れ子チートシートならクリック一発で一覧できるから非常に便利。
日ごろからお世話になっております。m(__)m
吉川ウェブ｜HTML5入れ子シート

classやidを増やしたくない「cssセレクター一覧」

タグのセレクターにも色々あって、いざ使おうと思ったときにどう書くんだっけ？というのはよくある現象。
隣接する要素、次に出てくる要素、〇番目の要素などなど種類が豊富にあるセレクターの書き方を全部覚えるのは大変です。
セレクターの書き方を一覧化してくれているのでとても便利です。
webpark｜意外と知らない!?CSSセレクタ20個のおさらい

画像作るの面倒いなぁ。。「cssフィルター一覧」

css3になって効果の種類も増えました。わざわざ画像を用意しなくてもcssのfilterでできてしまうこともあります。
でもやっぱり書き方を覚えてないですよね。
各種フィルター効果の使い方を詳しく解説してくれています。
WPJ｜Photoshopはもういらない？明度も彩度も超手軽に変えられるCSSフィルターがスゴい

グラデーションを使うなら「生成ツール」が便利

CSSでグラデーションを表現したいとき、いちいちカラーコードを調べて、％を考えて調整して・・・
なんて面倒過ぎて死にます。
生成ツールを使えばチョー簡単。時短にもなりますよ。
CSSGradient

横に並べたいなら「Flexboxチートシート」

要素を横並びにするときよく使うのがfloatですが、floatさせると高さを取ってくれなかったり、レスポンシブ対応のデザインだとなかなか思い通りになってくれなかったりと、意外と使用が難しいプロパティですよね。
僕は最近、よくflexを使います。
親要素に設定するだけで内包する要素をいい感じに並べてくれるので便利で簡単。
書き方もいろいろあるのでチートシートがあると非常に助かります。
クリエイターズボックス｜CSS Flexboxのチートシートを作ったので配布します

要素をグリッドで並べたい「gridチートシート」

要素をグリッド状に並べたい。でも、表じゃないからtableは使いたくない。
そんな時どうしてますか？僕はよくgridを使います。
一部のブラウザでサポートされていなかったり、記述の仕方が違うようですが、gridなら結構自由度の高いカスタマイズが可能です。
Qiita｜CSS Grid Layout を極める！（基礎編）

「上下中央揃え」ってどうやるんだっけ？

横幅のコントロールは結構単純ですが、高さを取るのが意外と難しいHTML。
要素を上下中央に配置するのはちょっと特殊なつくり方をしないといけないのが面倒な部分ですね。 GRANFAIRS|CSSで要素を上下や左右から中央寄せする7つの方法

書いた構文が正しいのかチェック「Vallidation Service」

構文の書き方でSEOにも影響が出るので、できるだけルールに準拠したHTML/cssを書きたいものです。
公開する前にバリデーションでチェックしましょうね。 W3C｜Markup Vallidation Service W3C｜css Vallidation Service