プログラミング学習におすすめな良記事、サービス11選(HTML/CSS/セマンティック)【3月号】

ABOUTこの記事をかいた人

大学でプログラミングを学ぶ→経営に興味を持ち勉強→月2桁は稼ぐフリーランスに→プログラミング初心者向けのオンラインメンタリング Udemy講師もやってます→u0u1.net/MGfz

こんにちは、小林です。今月読んだ中で良かった記事を紹介します。

目次

HTML/CSS

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

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

CSSでHTMLのセレクタを選択するときの方法が書かれています。隣接セレクタや兄弟セレクタに加えてnth-childなど擬似セレクタ系も網羅しているのが○。

emmetのチートシート

Cheat Sheet

emmetの短縮記法が全て書かれています。特にCSSの記法が網羅されていることが嬉しいところ。

一瞬でHTMLのセレクタを全て抽出してくれるツール

OneClickCSS


上の動画のように、HTMLコードを貼り付けてボタンをクリックすると一瞬でCSSセレクタが出力されます。これだけでコードを書く量を一気に減らせるのでおすすめです。ただしSimple CSSボタン以外は微妙なので非推奨。

一瞬でベンダープレフィックスを出力してくれるツール

Autoprefixer CSS online

上記のツールと同様の使い方で、CSSのコードを貼り付けるとベンダープレフィックス付きのコードに変換されます。最近は意識することは減りましたが、一部のプロパティはいまだにベンダープレフィックスが必要なのでおすすめ。

擬似セレクタ系

CSS:勘違いしがちな:first-child | ARTICLE | goma
nth-of-typeが効かない?!ときに確認するべきこと – ma-ya’s CREATE / WEB DESIGN

擬似セレクタの中でもnth-childとnth-of-typeは使いたくなる場面が多いのですが、結構落とし穴があります。意図した挙動にならない時はここの記事を読むと直せる可能性が高いですよ。

未使用のCSSを除去してくれるツール

HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS

コーディングしていると、リファクターしたいときが必ずあります。大幅なリファクターの場合、どうしても使っていないコードの消し忘れが生まれてしまい、ブラウザの読み込み速度を落としかねません。このツールを使えばそのリスクを回避できます。
余談ですがこのColissというメディア自体が良い記事ばかりなので定期的に読むことをおすすめします。

セマンティック

セマンティックとはSEO対策に関わる話で、HTML5で追加された新しいタグの使い方を学ぶ記事が多いです。

セマンティックタグ概要

構造的なマークアップ|HTML5 コーディング

セマンティックタグについて、全体を短くまとめられています。まずはこの記事を読んでそれぞれのタグの意味、使い方をさらっておくと良いです。

articleとsection

HTML5のお勉強 articleとsectionとか – Qiita

セマンティックタグの中でもarticleタグとsectionタグにフォーカスを当てて説明されています。意外と使い方が複雑なので、一回は目を通しておきましょう。

hタグ

【HTML】見出しタグの使い方:h1〜h6はどう使い分ける?

こちらはhタグについて。こちらはそこまで複雑ではありませんが、意識しないと適当になりがちなのでこの記事を読んでインプットしておきましょう。

まとめ

いかがでしたか。HTML/CSSも、ただ書けば良いというものではなくSEOの観点から適切な記述をすべきです。自分の作業効率をあげつつ、ワンステップ上のコーディングを目指しましょう。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください