CSSの実践スキルが身につく、開発ツール

コーディング模写、ハードル高くないですか？

プロゲートやドットインストールなどのオンライン学習を終えた後、どんな学習が最適か？という悩みに対して「コーディング模写」がおすすめといった記事をよく見かけます。

私も同様にコーディング模写にトライしましたが、当時選んだサイトが自分のレベルとはかけ離れていたためか挫折してしまいました。

コーディング模写には最低限html、cssの知識が必要になります。

しかもある程度自分の手で書けることが前提なので、この壁を越えることができませんでした。

オンライン学習でhtml、cssの学習を行ったものの、cssのスキルが「自分で書けるレベル」にまったく届きません。

htmlファイルにタグを打ってテキストを流し込んだ後、どういうスタイルを当てればいいか？を思い浮かぶことができませんでした。

そこで始めたのが、開発ツールで答えをあらかじめ見てしまう手法です。

コーディング模写では「答え合わせの時以外は開発ツールを極力使わない」というのがセオリーになっていますが、私の場合は積極的に使いました。

インスペクターで答えを確認したらまるごと覚える。覚えたスタイルをcssファイルに記述する。

記述したファイルを開発ツールで再びチェックするを繰り返し行っていきました。

何となく自信がついてきたら、htmlのソースだけ記述し、cssは自力で書いてみることにしました。

その際、cssのスタイルは開発ツールを使ってhtmlファイルのインラインに記述していきました。

そうすることで見た目をブラウザで逐一確認しながら進めていくことができます。

上記の学習方法を行ったおかげで、開発ツールの使い方はマスターできました。

業務上、すでに公開されているサイトの改廃を行うことがあるのですが、その際開発ツールがとても役立ちます。

自分以外の方が作成したしたページを扱うことがとても多いため、どういった構成になっているかを確認するため、開発ツールは欠かせません。

ファイルの改廃を行う際には、開発ツール上でコードの書き換えを行い、ブラウザーでプレビューを確認してから実際のファイルを修正するといった方法で行うととても便利だったりします。

開発ツールに関してはおすすめのブラウザというものは存在しません。

ブラウザの不具合や修正等に使用しますので、対応ブラウザの開発ツールはすべて使えることが必須だからです。

ほぼ対応ブラウザからは除外されることが多くなったIEですが、クライアントから「IEでの表示不具合」の解消の依頼を受けることも時々あります。

IE、Edge、Chrome、Firefox、Safariそれぞれの操作をマスターしておくと、実務でも役立ちます。

操作に慣れるまではひとつのブラウザで繰り返し練習したほうが、理解度も高まります。

私はFireFoxの開発ツールを選びました。メニューが日本語化されているので、抵抗なく操作を覚えることができます。