現場でも使える、HTML/CSS関連サイト

ググって見つけた情報は、必ずブックマークを！

独学でhtml/cssの基本はマスターでき、教本やコーディング模写等でスキルを磨いていても、いざ実践のコーディングとなるとわからないことが多々でてきます。

そんな時の解決法が「ググる」こと。自分が今直面している問題のヒントは、先輩方が発信しているブログやサイトの中にたくさん埋もれていますので、「ググる」ことでヒントを見つけることができます。

私も最初の頃は、理解できていないことのほうが多々あり、ひたすら検索をくりかえしていました。

その時の反省なのですが、一度解決してしまうとせっかく参考にさせていただいた記事をブックマークするのを忘れてしまいます。

しかし、同様の問題は時間の経過とともにまたやってきます。「あっ、この前解決できた問題だ…、えっとどうやって解決したんだっけ」。

ある程度経験すれば、一度ググった内容はものにできているため繰り返し学ぶ必要はありませんが、初学者の頃は何回か繰り返し学習しないと、身につかないことが多々ありました。

私はその度にブラウザの履歴をたどったり、検索のワードを思い出したりすることで余計な時間を費やしてしまいました。

その時の反省から、ためになったサイトや記事は「ブックマーク」するようにしています。整理する時間がなかったので、ブックマークしたまま放置していると結構な数が集まりました。

全部で60記事ぐらい集まりましたが、これらの大半は私が業務で対処法に困った際にも何度か参考にさせていただいた記事ばかりです。

私がブックマークしてきたサイト・記事の中から、実践で困った時に参考になったものをいくつか紹介していきます。

html/cssのおさらいには「HTML&CSS入門　Webデザインをイチから学ぼう」
https://saruwakakun.com/html-css/basic

「htmlのタグが覚えられない」「htmlは何とか理解できたが、cssが難しい」といった初級者の方でも理解しやすいよう丁寧に解説されています。

「イチから学ぼう」とありますが、html/cssの基本を一度学んだ方でも復習やおさらいとしても活用できます。

私の場合、うろ覚えのhtmlタグやcssのプロパティ・値に関する理解を深めるのにとても役立ちました。特にCSSプロパティや値に関しては図解を多用して丁寧な説明がされているので、繰り返し読み込めば必ずものにすることができます。

全部で36記事のうちSTEP1〜20はマスターしておきたい内容です。

CSSが今ひとつ使えない頃、たいへんお世話になったサイトです。

CSSの記述に悩んだ時、最初のうちは今までに学習した教本などを読み返すことで思い出し解決できました。しかし、ある程度基本をマスターできても制作の現場で案件を振られた際、まったく経験したことのない修正などに出合うことが必ず出てきます。

そんな時ググって解決策を見つけるのですが、はにわまんさんのHPコードには何度も助けられました。

「CSSで横並びを表現できる5パターン」「子要素を親要素からはみ出して画面いっぱいにする」「Flexboxはこの5パターン」など、目的から参照できる構成となっています。

例えば、「レスポンシブのブレークポイントの決め方」。何回か経験を重ねてもコーディングの内容によってはブレークポイントの決め方には悩むところです。

はにわまんさんのこの記事を見つけて初めて読んだ際には、悩んでいたことが解決できとても役立ったことを覚えています。

もはや説明不要の人気サイト。Web制作に関するあらゆる情報が網羅されていますが、私は実践レベルでcssの実装に困った時、頻繁にこのサイトの「サイト構築 -CSS」をググっていました。

ここで紹介されているcssのテクニックは、最新のものだったり、今の自分のスキルでは難解のものも登場します。すべて理解してものにするというよりは、最新の情報に触れておく程度でも十分勉強になります。

最新のおすすめ書籍もたびたび登場しますが、全目次のキャプチャとあわせて、おすすめのポイントもしっかり解説されています。

Web制作関連の書籍を探している方は、下記をぜひチェックしてみてください。
https://coliss.com/articles/category/book-review/

●ググって解決した時は、参考にしたサイトや記事は必ずブックマークを。一度参考になった良い記事は、二度三度と繰り返し使う機会が必ず出てきます。

●実践の現場でも、ググって解決するチカラは必要。お手本となるサイトや記事が経験不足をカバーしてくれます。

●私がおすすめするサイト・記事は以下になります。

HMTL/CSSのおさらい、復習教材としても最適！
https://saruwakakun.com/html-css/basic

STEP1〜20はぜひマスターしておきたいCSSの基本。現場でも役立ちます！
https://haniwaman.com/category/css/

ちょっとハードル高い、CSSテクニック満載!
https://coliss.com/articles/category/build-websites/operation/css/

Web制作おすすめの書籍はここでチェック！
https://coliss.com/articles/category/book-review/