HTML・CSSワーク-デジハリ修了(8)
HTML・CSSワーク
いよいよHTML・CSSワークに入り、コーディングの授業に入っていきます。
※本記事の内容は受講時のものです。Web関連の技術は目まぐるしく進歩します。デジハリのカリキュラムも最新にアップデートされるので、記述内容が時代遅れなものとなっていますがご了承ください。
概論・オリエンテーション
Webページを構成するHTMLとCSSについて、まずは座学です。これが膨大な資料で、PDFのページ数を見るだけでも圧倒されます。
毎回書いているような気がしますが、動画を一度見ただけですべてを理解することは不可能です。しかし、理解しないと仕事になりません。
これはDTPをやっていた私の個人の感想ですが（デジハリの見解ではありません）……
試験ではないので、オリエンテーションの内容を一言一句漏らさず覚える必要は無いです。すべての機能に精通していなくたって仕事はできます。
ただ、自分は何の仕事をしているのかは理解した方が良いかと思います。
ノンブルという言葉を知らなくても良いと思います（良くはないんだけど）。
でも、自分が読んでいる本のページ番号が分からないと読みにくいですよね？ ページ番号が分からないと、さっきまでどこを読んでいたか探しにくいし、誰かにおもしろいところを教えてあげたいときに不便です。
ページの下部に振られている番号はオシャレやオマケで付いているのではなく、自分がどのページを読んでいるか把握できて、目次や索引から読みたい場所が引けるようにもなっています。
すべてのページに余さず漏らさず正しく番号を振っていかなければならない……コンピュータを使っているのだから、容易に正確に実現する方法はないかな？
そうやって考えながら仕事をしていけば、自ずとノンブルという言葉は覚えるだろうし、InDesignにはノンブルを振る機能があることも調べられるようになっていきます（なお、InDesignではページ番号という）。
そして、ノンブルがあるべき誌面デザインやワークフローも身についていきます。
――長々と老害仕草、申し訳ございません。
何が言いたいのかというと、膨大な資料を前に降参するのではなく、まずは動画を視聴してカリキュラムを消化していきましょう。今は分からなくても、カリキュラムを消化して、手を動かしていけば自ずと分かるようになるんじゃないかな、と思います。
コーディングの準備
オリエンテーションが終わったら、いよいよお待ちかねのHTMLのコーディングです。その前に、受講の環境を揃えるようにオリエンテーションで説明があるかと思います。
ブラウザはChrome
私は元々Chromeを使っていたので、特に問題は無かったです。
他のブラウザでも受講できると思うのですが、Chromeの[検証]に該当する機能が必須となります。
このあたりの知識があればブラウザは何を使っても問題ないのでしょうが、自信がない方は講義の内容どおりにChromeの使用をお勧めします。
Adobe DreamweaverかVisual Studio Codeか
私が受講した時期は、講義内ではHTMLエディターとしてDreamweaverを使いました。
――学生の頃から、Macromedia社のFlashやDreamweaverといった製品に憧れていたので、ようやくインストールする口実ができて嬉しかったりしました。老害仕草ですみません――
ですが、HTMLのコーディングではVisual Studio Code（今後は略してVSCode）を使うことが多いらしいです。
トレーナーさんにもVSCodeをオススメされたし、私の手元にある『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』でもVSCodeで事例を作成しています。
ここは考え方が難しいです。
受講する動画どおりに手を動かしたい、カリキュラム以外のことは頭に入れたくない、というのであればDreamweaverを使った方が良いです。
VSCodeを問題なく導入できる（インストール直後のインターフェイスは英語）、動画の内容をVSCodeに置き換えて理解できる、というのであれば将来を見越してVSCodeで良いと思います。
私は、オススメされた通りに最初はVSCodeをインストールしました。
しかし、インターフェイスを日本語化するとか、便利に扱うには自分でプラグインを入れていくとか、覚えることが多かったのですぐに諦めました。
まずはDreamweaverで、動画の通りに手を動かしてカリキュラムを消化。卒業制作のタイミングでVSCodeをインストールして、VSCodeを覚えながら卒業制作を作っていきました。
Dreamweaverも便利なのですが、他のツール類で代替できることが多いし、アドビが全然アップデートしてくれないので消えゆく運命なのかな……と思ったりしました。
HTML
グラフィックワークでデザインカンプを作成した架空のお店のWebサイトを作成していきます。フォルダの作り方、ファイルの命名といった本当に基本的なことから進めていきます。
デジハリを修了した方なら当たり前かもしれませんが、Webサイトにとってフォルダの場所、ファイル名はとても重要です。私の場合、卒業制作でWordPressの動作確認を終えるまで、ずっと悩みどころでした。
そして、エディター（特記が無い限り動画内のDreamweaverをエディターとします）を使って、要素ごとに積み上げるようにHTMLを入力していきます。
動画内で要素ごとの説明はありますが、今はこれがわからなくても大丈夫です。以降、くどいぐらい何度も何度も説明があって手を動かすことになるので、まずは作業を進めていきます。
役割に応じたヘッダー、フッター、セクション
ブラウザにはテキストが淡々と表示されるだけで、ヘッダーやフッターの名前を付けたり、セクションにクラス名を設定しても味気ないかもしれませんが。
これらは後にCSSの設定をすると、インターフェイスに応じたデザインになります。また、WordPressの講座まで進んでいくと、この命名を区分していく意味がさらに重要になっていきます。
「何やってるんだ？」と思うかもしれませんが、まずは動画の通りに手を動かしていきましょう。
動画の通りにやっても動かない
動画の通りにHTMLを書いているのに、なぜか動画の通りに表示されない。画面が真っ白になる。こういうトラブルも頻発するかと思います。
そんな悩みに答えてくれるかのように「デジタルハリウッドで動画教材開発の責任者」の方が執筆されたという、こんなトラブルに打って付けのnoteの記事がありました。
１．スペルミス
２．半角/全角ミス
これだけ！結局 タグの表記をミスったり、半角全角を間違えることで起こってしまうわけです。
また、
/ や ｝ の数
こういった記述ミスが原因のことが多いようです。Dreamweaverなら記述ミスをチェックする機能があったはずなので、まずは落ち着いて入力内容を確認しましょう。
CSS
HTMLのコーディングだけだと、ブラウザにテキストが羅列されるだけです。CSSを設定することで、ようやく見た目がWebサイトらしくなって楽しくなってきます。
とはいえ、CSSを理解していくのはとても難しくて、何度もくじけそうになりました。
グラフィックワークの場合、オブジェクトを右から左へドラッグ&ドロップすれば済んだことでも、CSSではそう簡単にはいきません。
HTMLの要素にクラスを設定して、CSSで要素やクラスの挙動を指定して……これらは、すべてエディターにテキストで入力していきます。「右から左へ」と目に見えるものではないので、とてもわかりにくいと思います。
コーディングの講義は、このCSSから本番だと考えても良いでしょう。動画の大半もCSSのパートです。繰り返しになりますが、まずは講義のとおり手を動かしていきましょう。
忘れちゃいけないreset.css
本記事を書いていて気付いたのですが、reset.cssの設定はCSSの講義の最初に登場するのですが、その後はあまり登場しません。
reset.cssとは、ブラウザごとの固有の設定（見出しごとのフォントサイズや行間、罫線に設定された太さなどなど）をリセットして差分を無くし、1から設定し直せるようにする（未設定のものが意図せぬ表現にならないようにする）CSSです。
ネットをざっと検索すると、いろいろなreset.cssが出てきます。講義では、デジハリで支給されたものを使って問題ないでしょう。
reset.cssが無いと、動画の通りにサイズを指定しているのに、自分のブラウザでは表示されないということがあります。
なお、自分でCSSを設定し直すためには、reset.cssの後の行に自分のCSSを記述します。
けっこう大事な<head>内
上のreset.cssのことを書いていて思い出したのですが、<head>タグ内のメタ情報は大事なんですが、あまり手を動かす機会がありません。講義内でも要所で説明はありますが、たいていは使い回しというか、わりとコピペで済ましがちというか。
先にも書いたように、reset.cssを読み込むことと、読み込む順番はとても重要です。コピペで済ませれば問題ないのでしょうが、「意図通りではない表示」が「reset.css」が原因か否かを問題を切り分けるのに、こういった知識は必要です。
また、タイトルが「無題ドキュメント」とかになっていると残念な気持ちになるので、今は難しくてもリファレンスなどで勉強しておきたいです。
虎の巻を使うか否か
資料として、動画の各チャプターごとの進捗状況と同じHTMLとCSSが支給されます。
極論すると、これをコピペしてしまえば講義を進められるのですが……私はオススメしません。
グラフィックワークと違い、コーディングは目に見える間違いがわかりにくいです。特にCSSでデザインを始めると、意図が理解できないことが多々あると思います。
それでも可能な限り動画の通り手を動かして、CSSが理解できなくても「動画の通りに入力しないと動かない」と覚えていった方が良いと思います。
それでもうまくいかずにギブアップするときは、虎の巻をコピペする前に、虎の巻のコードと自分が入力したコードを読み比べてみてはいかがでしょう。
HTMLのところでも先述しましたが、スペルの入力ミスとか、カッコが全角文字だったとか、エラーの原因は意外と呆気なかったりします。
質問のコツ
考えても分からないのは仕方がありません。はじめてやることなのだから、分からないのは当然です。
動画を見ても、虎の巻を読んでも、それでもわからないならトレーナーさんに質問しましょう。
「こんな簡単なことも分からないなんて」と気後れする必要はありません。
特に社会人経験がある方ほど、かえって質問しにくいってことはありませんか？ 質問をするときに、こんなのばかりでイヤになったという経験をされた方が多いのではないでしょうか？
質問に答えない
回答に責任を持たない
「なぜ分からない」と怒鳴られる
しかし、デジハリではそんなことはありません。安くはない授業料を払っているのだから、バンバン質問していきましょう！
トレーナーさんたちも丁寧に、分かるまで付き合ってくれるはずです。
ただ、質問をする際に、ちょっとしたコツがあります。このコツを掴めば、やり取りがスムーズに行くかと思います。
（※あくまでも、これは私の経験上の話です。もっと良い教材があればご教授ください）
どの動画の、どの部分が分からないのか伝える
「Chapter○○の××分あたりで説明がある、△△について教えてください」
事前収録された動画の場合ではリアルタイムに問題を共有できません。そのため、「△△について教えてください」と問題点だけを抜き出しても、なかなか伝わりにくいです。
（対面授業であれば「先ほどの話の件ですが～」と情報が共有できる）
なので「動画の何分あたりの話」なのかを伝えれば、問題点の共有がスムーズになります。
問題のあるコードを見せる
「○○が××するように、このようなコードを書きました。でも、意図通りにならないです」
問題点をうまく説明できなくても、問題が起きているコードを見てもらえば、トレーナーさんはプロなのでおおむね解決すると思います。
その際、見せるのはHTMLだけでなく、関わっているものすべて（javascriptも関わっているなら.jsも）のコードを見せる方が手っ取り早いです。
「不要だろう」と思ってコードの前後を省略するのではなく、全部見せた上で「この箇所です」と問題箇所を示しましょう。
可能な限り習った用語を使って説明する
○「マージンを設定したのに余白ができません」
×「なんか見え方がおかしい」
はじめての学習なので言葉を覚えるのは難しいです。しかし、できるだけ習った言葉を使って説明した方が問題点は伝わりやすいです。
間違って覚えた用語であれば、その場で訂正してもらえます。
間違った言葉を使って恥ずかしいかもしれませんが、相手はトレーナーさんなので気にしない気にしない。
エラーや不具合が出た場合、何をしたのか説明できるように
「○○行にあった××のコードを削除したら、画面が真っ白になりました」
↑の事例の場合、問題点はわかったようなものですが。
でも、このように「何をしたのか」がわかれば問題点は解決しやすいです。
見栄を張らない
分からないことは分からないと、事実だけを伝えるべきです。人に教えを請うときは謙虚に……。
とりあえず、私が気を付けているのは以上のカンジです。
この記事が気に入ったらサポートをしてみませんか？