独学でウェブ制作を学んだときにはじめた1つのこと

おはようございます、小野義明です。

僕は数学が苦手で、文系の大学に通っていました。プログラミングについては全くわからない状態。

ウェブ制作を独学で学ぼうとしたときにはじめた1つのことは、公開されているウェブサイトの模写をしていました。

公開されているウェブサイトの模写をはじめたときに使い始めたのが「Google Chromeのデベロッパーツール」です。

Google Chromeのデベロッパーツール

Google Chromeのデベロッパーツール画面
デベロッパーツールは開発者ツールとも呼ばれていて、ウェブサイトを開発、運営している人にとっては、効率よくウェブサイトの修正や更新行うことができ、業務の時間短縮にも繋がる便利なツールです。

ほとんどのブラウザで無料のデベロッパーツールが利用できますが、特にクロームのデベロッパーツールは非常に機能が豊富で、利用している人もかなり多いです。

Google Chromeのデベロッパーツールでできること
・ページのHTMLとCSSを確認
・HTMLとCSSをいじってデザインを変更
・他サイトのコードをチェック
・異なる表示サイズでの表示チェック

デベロッパーツールで具体的に何ができるようになるのか

特定の場所のHTMLやCSSがどのように反映されているかスピーディーに調べることができます。

CSSがリアルタイムで擬似反映され、視覚的にわかりやすく再現可能。他のサイトのコードがすぐにわかり、その記述を応用することで自分のサイトでも同じように表示でき、エラーが出ている部分を確認できます。

デベロッパーツールの使い方

デベロッパーツールには数多くの機能がございますが、ウェブサイトの模写をはじめたときは、HTMLやCSSの簡単な編集機能をよく利用していました。

起動方法


ウェブサイト上のどこかで右クリックし、「検証」をクリックします。
それぞれ下記のショートカットキーでも起動できます。

・Windows:F12キー
・Mac:Command+Option+Iキー

CSSの編集確認方法

下記の方法で編集を加えても、実際のページに適用されるわけではなく、擬似的に変更を反映しているだけですので、ブラウザの更新ボタンを押せば元に戻ります。表示が崩れたりしても何の問題もございません。

基本操作
①デベロッパーツールの左上にある要素を選択するアイコンをクリックします。
②CSSの編集したい箇所を、Webページ上で選択します。
③ツール上部に選択した要素のHTMLがマークされ、下部には適用されているCSSが表示されます。
④編集したCSSは、リアルタイムで反映されますので簡単にチェック可能です。

スマホ表示をPC画面上で再現するエミュレーター機能


実機が手元になくてもスマホやタブレット表示を再現できます。
※エミュレーターで再現できない部分(Safariでの標準対応もしくは表示のクセ)もあるので、手元に実機がある場合は実機での確認をおすすめ致します。

1.上記画像の右のアイコンをクリックします
2.画面上部のセレクトメニューから、エミュレーションしたいデバイス(iPhone6/7/8など)を選択します。

学ぶことは真似ることから始まる

検証ツールでいきなり見ても、何がなんだかサッパリというのが最初の印象だと思います。

まずは、いくつか気になるサイトを見てみてください。

規則性などがわかり、そのコードを自分のPC内で試していき、わからない点は本や検索で調べる。

本などで全体の概要を知ってから取り組むのもいいと思うのですが、まずは実際にあるものを模倣にわからない点を調べていく方が、スピード感があるなと感じています。

そのことを繰り替えしていくと、気づけば知識と技術が身についていくのかと思いました。

それでは。
今日も悔いのない一日を。

  • SHARE THIS ARTICLE

編集者 / ドローングラファー。大学卒業後、フリーランスとして独立。2016年ドローン空撮の魅力にはまり、国内外共に巡る。