WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： mane
カテゴリー： マークアップ >作業効率化

CSSセレクタのチートシート

CSSで使用できる37パターンのセレクタを紹介しています。
常に進化していくCSSですが、かなり便利な記述もあるのだなとこのシートを見て改めて感じました。
JavaScriptを使用しなくても、少し複雑な指定でしたらできてしまいますね。
コーディングの幅が広がるのでかなりおすすめなチートシートです。
ぜひCSSの更新がある度にチェックしてみてください！

https://webliker.info/css-selector-cheat-sheet/

HTML5 入れ子チートシート

今でも確認のために使用している大事なチートシートです。
HTMLの改変がある度に更新されているので、追加されたタグの確認にも使用できます。
使い方をご紹介いたします。

親要素・子要素の選択

タグにマウスカーソルを合わせると「親」「子」と表示されます。
「親」を選択すると、親要素として使用できるタグが表示されます。
「子」を選択すると、子要素として使用できるタグが表示されます。
olタグ でそれぞれ選択した場合をご紹介いたします。

子要素の確認

「子」を選択すると、olタグに入れることが出来る子要素が黄色になります。

親要素の確認

「親」を選択すると、olタグに入れることが出来る親要素が水色になります。

入れ子の関係性が一目瞭然で分かるので非常に便利です！

https://yoshikawaweb.com/element/

イージング関数チートシート

気になる動きにマウスカーソルを当てると、実際の動きを確認することができます。
どの様な動きなのかパッと確認できると、ホバーアクションなど実装したい動きをイメージし易いですよね。

https://easings.net/ja

WordPressチートシート

書籍も出版されているWebクリエイターボックスで無料WEB配布されています。
こちらはWordPressを学び始めた頃からお守りのように大切しているチートシートです。
基本の記述なので今でも問題無く使用できるタグばかりです。

https://www.webcreatorbox.com/tech/japanese-wordpress-cheat-sheet

Webクリエイターボックスとは別ですが、Qiitaで公開されているこちらのチートシートはWordPressの最新タグを紹介しています。
ループ処理についても記載があるので、こちらもおすすめです。
https://qiita.com/yoshio_dj/items/7734450bd0617541d7a0

WordPressは様々な書き方があるので、チートシートを網羅しておくと、書き方のパターンが増えてデバック作業もスムーズになります。

Can I use…

チートシートとは少し違うのですが、気になるプロパティを入力するだけで対応ブラウザが確認でき、とても便利なので紹介いたします。
下記の「＿＿＿」部分にCSSのプロパティを入力する事で、対応ブラウザを検索する事ができます。

ブラウザ検索するよりも、その場で答えが一目で分かるので時短になりますね。

https://caniuse.com/

終わりに

ブラウザで検索するのも良いですが、やはりその場ですぐに分かるというのは時短に繋がり、作業効率アップにもなりますよね。
他にも様々なチートシートがありますので、またご紹介していきます。
最後までご覧いただきありがとうございました！