HTML/CSS参考書の独学でどこまでスキルUPできるかやってみた
HTML/CSSのテキスト本を使ってどこまで勉強できるやってみました
今回のテーマは、書店で販売している本を参考にして、どこまでHTML/CSSが勉強できるのか検証してみたことについて書いていこうと思います。
こんな方向けの内容
・HTML/CSSは独学ができるか知りたい人
・趣味レベルでサイトを作ってみたい人
・WEBデザインのテキストについて知りたい人
・コーディングやWEBデザインのスクールに通うか迷っている人
参考にした書籍について
私が参考にした書籍についてご紹介しようと思います。
私が今回参考にした書籍は、「1冊ですべて身につくHTML&CSSとWebデザイン入門講座/著：MANA」です。書店のWEBデザインコーナーに行けば、目に入る１冊だと思います。（見たことある方も多いのではないでしょうか？）
こちらの本の特徴は、初心者でも比較的かみ砕いて分かりやすく解説されている点、完成形のサイトがダウンロードで見ることができるのがいいなと思い、購入しました。実際に使ってみて、HTMLやCSSを全く触れたことがなかった私でも理解しやすかったです。専門用語などをできる限り分かりやすく説明してくれているので、つまずくことなく進めることができました。
結論｜独学でサイトページのコードの意味が分かるようになりました
先に結論から言うと、サイトのページを構成しているコードの意味がなんとなく分かるようになります。実際にWEBサイトとして運営していくと考えると、レベルはまだまだかなと感じているのが正直なところです。
理由は、イメージしたデザインをコーディングで表現するのは、難しいと感じたからです。しかし、本格的なプログラミングのスクールに通学するか、本業としてプログラミングをしていくかどうかを判断する材料としては、一つのきっかけになると思いました。
実際、パソコンに向かってひたすらコードを入力していく作業やエラーが発生した時に、自分がどう感じるかを体験できたと思います。苦手意識を持つか面白いと感じるかは体験できると思いました。
備考：私のパソコンスキルについて
①日常的にパソコンを使う＝長時間のパソコン作業は慣れている
②タッチタイピングが可能＝キーボードを見ずにタイピングが可能なレベル
③Wordpressサイト入力の経験あり
私の感覚ではありますが、③のWordpressサイトの入力経験よりは①日常的にパソコンを使う、②タッチタイピングがスムーズにできることがポイントに感じます。
テキストを参考にしながらサイトページ制作にチャレンジ
テキストを一通り最後まで勉強した後に、アレンジしたサイト制作にチャレンジしてみました。コーディングの復習をしながら、実際にデザインを考えて作ったので、モチベーションを保ちながら勉強をすることができました。
TODOリスト|私流の勉強方法と手順についてご紹介
ここからは、実際に私がどのようにして本を活用して勉強したのか、方法を順を追って説明していこうと思います。
大まかな流れをご紹介
STEP１｜一通り書籍にあるコードを打ち込む（2days/計10h）
まずはHTMLとCSSの入力に慣れることを意識して取り組みます。
STEP２｜サンプルサイトを作ってみる（3days/15h）
テキストに沿ってサンプルサイトを作ってみます。自分でアイディアを出してこんな感じのを作ってみたいなという感じで作るのが勉強を楽しめるコツだと思います。
STEP３｜新規で制作にチャレンジ（4days/計20h）
画像などを自分で制作し、サンプルサイトにアレンジを加えてサイトを作ってみる
実際にテキストを使って勉強してみての感想
普段からパソコンを触っている人で、タッチタイピング（画面を見ながらタイピングが可能なレベル）ができる方は、この時間よりも更に短くできるのではないかなと感じました。更に、英語が得意な方はコードの単語がほぼ英単語のようなものなので、すんなり入力でき、作業がより効率的に進むと思います。
ここからは何をするかより詳しく説明していきます！
STEP1.書籍通り一通りコーディング＆サンプルサイトを制作してみる
STEP1に関してチェック項目
・PCを準備
・書籍に付属している素材をダウンロードしてデスクトップに置いておく
・テキストエディターをPCにダウンロードしておく
・テキストの水色の枠にあるchapterをざっと読んでおく
環境を整える/テキストエディターのインストール
・サポートページURLより素材などをダウンロードしてデスクトップに保存していつでも見れる状態にしておきます。
・p42～を見ながらテキストエディターをインストールしておきます
POINT1.模写しやすいようにテキストはすぐそばに置きます
常に、テキストを見ながらコードを打てるように、PCとテキストは横並びに置きます。私は電子書籍を購入してipadやスマホ（外出先で勉強用）をPCの横に設置し、模写に専念できるようにしていました。
スマホの設置に使っていたのは、スリーコインズのスマホスタンドです。
CHAPTER2～CHAPTER3の水色枠で囲われたコードを模写
・水色の枠内と同じようにコードを模写して練習していきます
・１回ずつ新規で作らず、続けて書いていくのでOKです
POINT2.形式やコードに慣れる練習だと思って入力していく
模写するコードの一つ一つの意味は、大体を把握する程度でOKです。その代わり、コードを打ち込むことに慣れる練習だと思って取り組むのが、ポイントです。chapterごとに反映ができているか、その都度確認していくようにするのがおすすめです。
POINT3.エラーになったらまずは自力で原因究明
時には表示が上手くいかず、エラーになることもあります。エラーになった時に、どこのコードが間違えているのか探すのも練習です。
chapterと見比べながら間違い探しにも、チャレンジしましょう。私はどうしても分からない場合は、１度初めから打ち直すようにしていました。
苦手な分野やエラーが続いた分野は復習しておく
コードを模写していて苦手だなと感じる部分は、再度入力して復習をしておきます。
STEP2.サンプルサイトをテキスト通り入力して作ってみる
STEP2に関してチェック項目
・CHAPTER3～CHAPTER7を練習
・全体像の把握として一通り読んでおく
・パソコンを２画面表示にして完成形のコードを表示しておく
STEP1同様に水色枠内のコードを模写する
・コードが重複しているところがあるので、注意しながら模写していきます
・CHAPTERごとに反映されているか都度チェックしながら進めます
・エラーの箇所がどうしても見つからない場合はサンプルサイト完成形のコードと見比べます
POINT1.完成形のコードを見る方法
①事前にダウンロードしている素材のフォルダから完成形のサンプルサイトを開きます
②マウス右クリック→ページソースの表示します
実際に、サンプルのサイトを作っていく流れに慣れる練習です。WEBページのデザインをコードで作っていくためには、どんなコードを組み合わせていくのかを学び、WEBページの全体構成を把握するようにするのがポイントです。
STEP3.オリジナル要素を入れて新規で制作していく
サンプルサイトを参考にしながらデザインを考える
・作りたいサイトの要素を書き出し、サンプルサイトに置き換えていく
・figmaなどを用いてワイヤーフレームをつくる
サンプルサイトに置き換えて作ったサイトのスクショ画像
事前につくったワイヤーフレーム（figmaで作成）
素材画像やロゴの準備※事前準備必須です
・素材画像予め制作し、フォルダに保存しておきます
illustratorやfigma、CANVAなどを用いて素材画像を準備しておきます
POINT1.素材画像の保存形式とサイズについて
サンプルサイトの画像からサイズや保存形式を参考にすると制作しやすいです
テキストエディターを起動して新規制作していく
・テキストを参考にしながらコードを書いていきます
POINT2.フォントの形式やカラーなども自分でカスタムしてみる
イメージしたものを作る練習だと思って、一つ一つのWEBサイトを構成する部品をこだわってみると、モチベーションを維持したまま勉強ができると思います。
私はサイトを作る上で、Googleフォントの人気なフォント種を調べて、よりWEBデザインについて学べたなと感じました。また、カラーも自分ならどんな色を使うか、考えながら調べるのでよりカラーコードについて、暗記（覚える）ことができているなと思いました。
まとめ｜書店で販売している本でどこまで勉強できるのか？
約45h〜60hでHTML/CSSのコードの知識やコーディングの基礎を学ぶことができました。今回はコーディング未経験者が、書籍を参考にしてどこまで勉強できるのかについて検証してみました。
また、検証を元に私なりのHTML/CSSの勉強法をご紹介しました。自分でサイトを作ってみたい方、HTML/CSSについて興味はあるけど、実際はどうだろうと思っていた方の参考になれば幸いです。私個人の体感ではありますが、基礎や趣味レベルであれば独学でも十分できると思いました。
最後までご覧いただきありがとうございました。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？