Web制作で失敗しないコーディングを学ぶコツ
最初の記事でもお伝えしましたが、Web制作は企画や市場調査を行った後、どういったWebサイトを制作するのかを視覚的に確認するためにモックアップを作成します。
モックアップはIllustratorやPhotoshop、XDなどのアプリを使って作成されます。これらのアプリを使って、本物のページと同じように作成します。
すると、Webサイトの見ためがはっきりしてくるので、お客様と打ち合わせをする際にも、制作しているチームと意見を交わす際にも、とても便利な資料となります。
また、企画段階ではわからなかった問題点や改善点なども浮かび上がることもあり、とても大切な工程です。
ですが、Illustrator、Photoshop、XDなどのアプリで作成されたモックアップは、見ためこそWebサイトとそれほど差はないように感じられますが、これらのファイルをそのままWebサイトとして公開することは不可能です。
これらのデザインを基にして、コーディングを行う必要があります。
Web制作でなぜコーディングを行うのか？
Webサイトは最低限でもHTMLとCSSで書かれたプログラムが必要です。
なぜなら、Webサイトを表示するGoogleChromeやEdgeなどのホームページを閲覧するアプリである「ブラウザ」が、HTMLとCSSを解読して、わたしたちにWebサイトとして表示してくれているからです。
この「ブラウザ」が認識できる形でWebサイトを制作しなければ公開することができません。
これらHTMLやCSSなどのプログラムのことを「ソースコード」「ソース」と呼んだりします。そしてソースコードを記述することを「コーディング」と呼んでいます。
Web制作で最低限必要なコーディングの技術としてはHTMLとCSSが必要です。
まずはこの２つを学んでみましょう。
コーディングは必ず手を動かすことがWeb制作への近道
コーディングを行うには、何かエディタが必要です。
エディタとはプログラムを入力するアプリのことで、Wordなどのアプリでプログラムを書くことは不可能ではありませんが、不必要な情報が勝手に付加されることもあり、コーディングには向いていません。
テキストエディタと呼ばれるものを通常は使います。
テキストエディタで一番身近なものはメモ帳ではないでしょうか。
メモ帳でも無理ではありませんが、かなり使い勝手が悪いです。
最近はとても便利なエディタがたくさん登場しています。
コードは英単語を書いていくことが多いのですが、スペルの頭文字を入力すればエディタが続きを予測して候補を出してくれたりします。
また、文字の色を適宜変えてプログラムを見やすくしてくれる機能もあります。
メモ帳ではそのあたりの機能がまったく搭載されていないので、やはりコーディングするにはストレスが多いアプリと言えるでしょう。
とはいえ、初めからとても便利なエディタを使うべきではありません。
初めから利用してしまうと、エディタが勝手にプログラムを補完してしまい、自分でコーディングする力がなかなか養われません。
それでもやはり、メモ帳はつらいと思います。
なので、Terapadやさくらエディタなどを使ってみることをお勧めします。
これらはメモ帳と近い感覚で利用できるのですが、文字の色を見やすく整えてくれます。
学習を始めたばかりのうちは、これらのソフトで十分です。そしてある程度自分で考えてコーディングする必要があるので、コーディングの力も身につきます。
初めはこれらのソフトを使って学んで、学習がある程度進んだところでもっと便利なエディタを使ってみましょう。
コーディングは必ず手を動かして学ぶ
HTMLやCSSは初めのころは簡単に感じられて、ネットの情報を見たり、本を見たりするだけで、実際に手を動かす必要がないように感じることもあります。
しかし、どんなに簡単そうなコードだったとしても、必ず入力して、ブラウザで表示を確認しましょう。
丁寧に学習を進めていくことが大切です。
実際にコードを書いてみると、新しい発見があったり、勘違いしていた部分を気付いたりすることがあります。
わかる、知ってる、と思ったとしても、手を動かすことが大切です。
ではコーディングを行って表示までの手順を確認します。
エディタを使ってHTMLを記述する
まずは、Terapadやさくらエディタなど、用意したエディタを使って、次のようなHTMLを入力しましょう。
<h1>これは練習ファイルです</h1>
<p>ここに本文を入力します</p>今回は手順の確認を行うため、正しいHTML５の書き方ではありませんので気を付けてください。今回の確認に必要な記述だけしてあります。
ではファイルを保存するのですが、ファイル名は何でもいいのですが半角英数字で、拡張子は.htmlとつけます。
拡張子って何？と思われた方は、調べてみてくださいね。
このページではTerapadの画像を載せています。参考にされてください。
なお、Terapadを利用して確認する場合は、ファイルの種類を「すべてのファイル」にしてから保存をしましょう。
ほかの種類にしてしまうと、うまく保存ができない場合があります。
保存したファイルの表示を確認する
ファイルを保存した後、ブラウザで表示してみましょう。
保存した場所を表示し、ファイルの場所を確認します。
HTMLのファイルのアイコンは、見本の画像とは違うかもしれません。
パソコンの設定によって変わりますので、気にする必要はありません。
ファイル名を確認し、先ほど保存したファイルであればOKです。
ファイルがあったら、ブラウザのアイコンにファイルを重ねるようにドラッグしましょう。
アイコンを重ねたブラウザのアプリで、表示されます。
うまく表示されなかったり、ファイルを編集しなおす場合は、htmlファイルのアイコンをTerapadなどのエディタのアイコンに重ねることで、編集が可能です。
この繰り返しで表示の確認を行います。
文字化けしてしまったら・・・
初めてコードを書いたとき、よく困るのが文字化け問題です。
文字化けとは、正しくコードを入力しているはずなのに、ブラウザで表示すると、よくわからない文字の羅列で表示されてしまう現象です。
特に学習初心者の方が陥りやすく「よくわからないなぁ」と挫折してしまいがちの問題です。
実はそんなに難しい対処法ではありません。
ここではTerapadを例にとって、解決方法をご紹介します。
まず、Terapadを開いて右下のステータスバーを確認してみましょう。
この部分がUTF-8になっていなければ、文字化けしてしまいます。
これは文字コードの設定なのですが、Terapadでは最初にインストールした状態だとSJISになっていると思います。
この設定をUTF-８に変えましょう。
メニューバーの「表示」から「オプション」を選択しましょう。
オプションのウィンドウが表示されたら「文字コード」のタブをクリックして、初期文字コードの設定を「UTF-8」に変えます。
これで文字コードの設定は終了なのですが、いったん文字化けしたファイルは再度表示しても文字化けしたままだと思います。
なのでいったん、Terapadで新規作成を行って、コードをコピーするなり、入力しなおすなりして、作り直しましょう。
保存しなおしたファイルをブラウザで表示すれば、文字化けは解消されているはずです。
これからたくさんのエラーや不具合と遭遇すると思います。
パソコンの環境だったり、使用しているソフトのバージョンだったりと、不具合の原因は様々です。
その都度インターネットなどで調べながら、対処することが大切です。
コーディングは「覚える」と「理解する」を両立しながら進めましょう
Illustratorなどでデザインを行う場合、なんとなく直感で理解できたりするものです。
特別に「理解する」ということを意識しなくても、理解できていることが多く、それでも後々困らなかったりします。
しかし、コーディングは違います。
コーディングの場合は必ず「理解する」を意識しましょう。理解したうえで「覚える」必要があります。
このコードを書いたら、どうしてこうなったんだろう？と常に考えながら学習を進める必要があります。
理解を積み重ねる必要があるのです。
そうしなければ、いつか必ず挫折するときがやってきます。
よくわからないな、と感じた場合は、わかるところまで戻って学習をやり直す必要があります。
「よくわからないけど、とりあえずそのまま」という場合もゼロではありませんが、しばらく進んでみてやっぱりわからない場合は、勇気を出して学習を戻してみましょう。
