こんにちはManaBuです
今日からmanablogさんのロードマップを参考に、Web制作の独学を実践していきます！
【！継続中！】manablogさんの記事を参考に、Web制作の独学にゼロから挑戦しています！
【プログラミングはじめました】の回での宣言通り、MacBook Proをゲットしたので今日からWeb制作のためのプログラミング学習を開始いたします！
Web系のプログラミング言語の学習方法は本や学習サイトでの独学からプログラミングスクールまで様々あると思いますが、2020年9月現在の筆者ManaBuの状況からまずはスモールスタートで行きましょうということで独学スタイルを採用することにしました
独学でのWebマスターと言えば、当ブログnichizero.com的には勝手にマイメンターのmanablogのマナブさんということで（”まなぶ”がたくさん出てくる記事ですみません…w）manablogさんの-【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】-という記事を参考に学習を進めていきます！
おすすめの学習方法を個別に記載している記事や、学習サイト・スクールのまとめ系の記事は世間に数多く存在しますが、”無料で”ここまで具体的なロードマップが紹介されているサイトは他に類が無く、私のようなゼロから初心者にはとってもありがたい存在です
この記事は日々更新スタイルで、manablogさんの参考記事に沿って学習を進めて行った過程をその都度更新していくような構成としたいと考えています
「Web制作のためのプログラミングって独学でできるのだろうか？」
「独学するとしたらどんな流れで進めていけば良いのだろうか？」
そんな私と同じような疑問をもつ読者の方へ向けて、プログラミング初心者のManaBuがセロから少しずつ学習を進めていく過程をできるだけ詳細かつ正直に発信してまいります！
少しでも参考になったり何かのきっかけになったりすることがあれば嬉しいです！
記事への感想やコメントは下部コメント欄やTwitterで大募集中です！（「私も独学でやってまーす」という方、是非、競争しながら進めてみませんか！）
それではよろしくお願いいたします！
この記事-【Web制作はじめました】manablog独学ロードマップを実践します！-の構成
この記事は、manablogさんの記事-【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】-のロードマップに沿った章立てで構成し、それぞれの内容について筆者ManaBuの感想や学び、到達度などを掲載した個別記事へのリンクを整理することで学習状況の全体像を把握できるように構成します
日々学習を継続しながらこの記事自体も更新していきますので、一度お読みいただいた方でも「さて、ちょっとは進んだかい？」といった感じで再訪していただけるととても嬉しいです！
それではさっそく始めてまいります！！
※※※※※
学習を進めていく中では学習サイトなどで有料の講義動画を参照するタイミングも出てくることが予想されます
特にそういった有料ソースの場合には情報の内容を詳細にご紹介することができませんが、講義の結果どのような成果を得たか、どのようなことができるようになったかついてはできる限り詳細にお伝えできるよう努めてまいります
途中読みにくい箇所も出てきてしまうとは思いますが、どうぞよろしくお願いいたします！
※※※※※
【1】Webサイトの仕組みと基礎を理解する【HTML／CSSの入門編】
1-1. ドットインストール（HTML入門／CSS入門）
それではさっそくレッスン1から始めてまいります！
ここでは1-1としてドットインストールというプログラミング学習サービスを使って進めていくことになります
ヘルプに個人ブログへの引用ルールが記載されていましたので、こちらに配慮しながら学習記録をしていきたいと思います！
HTML入門 (全24回) – プログラミングならドットインストール
HTML/CSSの学習環境を整えよう [macOS版]
- 「詳解HTML 基礎文法編」講座の前に学習環境を整える必要があるようです
- 私はMacBook Proで進めていくので【macOS版】を選択しました
01 Chromeブラウザを導入しよう
- 実践日：2020年9月27日
- 作業記録
- Chromeをインストールしました
- 学習メモ・感想など
- ドントインストールではWebブラウザとしてGoogleChromeを採用しているそうです
- 元々使っていたのでラッキ〜
02 VS Codeエディタを用意しよう
- 実践日：2020年10月4日
- 作業記録
- Visual Studio Codeをインストールしました
- 学習メモ・感想など
- ドットインストールではコードエディタ＝プログラムのコード編集アプリ、としてMicrosoftのVisual Studio Code【無料】を採用しているそうです
- まだ何もコード書いたわけではないのになぜか少しテンションが上がります
03 VS Codeエディタを設定していこう
- 実践日：2020年10月4日
- 作業記録
- ドットインストールおすすめのVS Code初期設定を行いました
- 学習メモ・感想など
- こちらは右も左も…なのでこういうの地味に助かりますね
04 プログラミング用フォントを導入しよう
- 実践日：2020年10月4日
- 作業記録
- Ricty Diminishedをインストールしました
- 学習メモ・感想など
- ドットインストールではプログラミング用フォントとしてRicty Diminishedというものを採用しているそうです
- プログラミングでは全角スペースと半角スペースなど通常のフォントでは見た目で判別しにくいところが違うだけでバグになるので、プログラミング用フォントの導入が重要なのだそう
05 ファイルの拡張子を表示させよう
- 実践日：2020年10月4日
- 作業記録
- Finder（macOSのファイルアプリ）でファイル拡張子を表示する設定を行いました
- 学習メモ・感想など
- プログラミングではファイルの拡張子（〜〜〜.pdfや〜〜〜.txtなどファイルの種類を表す情報）が重要なので表示しておくのだそう
詳解HTML 基礎文法編
- manablogさんの記事のリンクは旧版の講座だったので新版で受講することにしました
01 HTMLを学んでいこう
- 実践日：2020年10月4日
- 作業記録
- HTMLという言語の超概要を学びました
- 学習メモ・感想など
- Webページを作成するためにはHTMLとCSSというプログラミング言語を使うのだそうです
- HTML：内容について
- CSS：見た目について というざっくりとした理解をしました
02 学習の準備を整えよう
- 実践日：2020年10月4日
- 作業記録
- sample素材のDLとVS Codeのファイル新規作成を行いました
- 学習メモ・感想など
- sample素材とかあるととても助かりますね〜
03 HTMLを書いてみよう
- 実践日：2020年10月4日
- 作業記録
- hタグとpタグの練習を行いました
- 学習メモ・感想など
- HTML=Hyper Text Markup Languageの頭文字で「テキストをタグでマークアップしていく言語」という意味なのだそうです
- VS Codeだと対応するエンドタグ（このタグはここまでですよ〜というコード）を自動で入力してくれる機能が備わっているらしく、便利！
04 imgタグで画像を配置しよう
- 実践日：2020年10月4日
- 作業記録
- imgタグの練習を行いました
- 学習メモ・感想など
- imgタグはエンドタグで閉じなくていいらしい（なんでかは特に説明なく、そういった空要素と呼ばれるものがあるらしいくらいに思っておきます）
- imgの入っているフォルダがindex.html があるのと同じ階層にないと画像が表示されない（初回ではこのミスをやらかしておりましたが、講義の「質問と回答」に同じ悩みの人の質問が載っており、回答を参考に修正できました←これ結構有用ですね）
05 文書全体を囲うタグを見ていこう
- 実践日：2020年10月4日
- 作業記録
- 文章全体を囲うタグを練習しました
- 学習メモ・感想など
- VS Codeでの字上げ下げの調整はテキストを範囲選択してタブキー：インデント、シフト＋タブキー：アウトデントとなっているらしい（ショートカットは覚えた方が良さそうな感じですね）
06 全角文字に気をつけよう
- 実践日：2020年10月4日
- 作業記録
- コーディングにおける全角文字に関する注意点について学びました
- HTML内にメモを書く方法について学びました
- 学習メモ・感想など
- 基本的にコードに全角は使わないってことみたいです（デバグにはまずここを疑うそう）
- メモはブラウザの「ソースを表示」で表示可能なのだそう（なので機密情報はメモでも書いてはNG！）
- VS Codeはメモ化のショートカット（macOS：Command + /）あるらしく便利そうです
07 headタグを見ていこう
- 実践日：2020年10月4日
- 作業記録
- headタグ内の内容について学習しました
- 文字コード（コンピューターが使う文字セットの種類だそうです）
- titleタグ（文章のタイトルです）
- metaタグ（この講義では文章の内容を説明するタグを入れていました）
- favicon（ブラウザタブの左側に表示される画像のことみたいです）
- headタグ内の内容について学習しました
- 学習メモ・感想など
- 「属性」とやらが出てくると聴き慣れない言葉も多く「むむ」となりますが、それぞれの細かい内容は説明せず「こんな感じで入力できますよ〜」といった流れでした（習うより慣れろ的なことなのかもしれません）
08 bodyタグを見ていこう
- 実践日：2020年10月5日
- 作業記録
- bodyタグの内容について学習しました
- imgタグの属性（サイズやalt属性）
- h2タグ
- bodyタグの内容について学習しました
- 学習メモ・感想など
- imgタグのalt属性（画像が何らかの理由で表示出来なかった場合に表示される代替テキストだそう）を指定すると目が不自由な人が使っている、音声読み上げブラウザで読み上げられるのだそうです（覚えておこうと思いました）
09 strong､blockquote､hr､brを使ってみよう
- 実践日：2020年10月5日
- 作業記録
- 文章と関連して使うタグについて学習しました
- strongタグ：強調
- blockquoteタグ：引用（cite属性：出典）
- hrタグ：水平線（話題変更などにつかう）
- brタグ：改行
- 文章と関連して使うタグについて学習しました
- 学習メモ・感想など
- hrタグで水平線が出たりするので見た目も変わるのですが、「HTMLで装飾をしてはいけない、装飾はCSSで」という注意喚起があり重要ポイントと感じました
10 実体参照とpreタグを使ってみよう
- 実践日：2020年10月11日
- 作業記録
- 文字実態参照の使い方について学習しました
- HTMLそのものを書きたい場合にその記号がHTLM記号と認識されないようにする
- preタグの使い方について学習しました
- すでに整形されたテキストをそのまま表示する
- 文字実態参照の使い方について学習しました
- 学習メモ・感想など
- VS Codeのマルチカーソル（macOS：Command + D）は複数記号を同時編集部きて便利そうと感じました
11 リストを表現してみよう
- 実践日：2020年10月11日
- 作業記録
- リストの表現について学習しました
- 箇条書きリスト<ul>
- 順序つきリスト<ol>
- 説明リスト<dl>
- リストの表現について学習しました
- 学習メモ・感想など
- <●l>の●のところでリストの種類を定義し、項目をタグづけしていく手法だと理解しました
12 ol､ul､dlタグでリストを作ろう
- 実践日：2020年10月11日
- 作業記録
- リストについて実際の作成手順を学習しました
- 学習メモ・感想など
- <dl>タグは項目に種類があるので単に<li>：リストアイテムでは定義できない点が注意だなと感じました
13 表を表現してみよう
- 実践日：2020年10月11日
- 作業記録
- HTMLで表を表現する方法の概要を学習しました
- 学習メモ・感想など
- 表となるとマトリクス（平面的広がりのあるもの）を文字で適宜していくことになるのでいろいろなタグが登場してちょっと大変そうな印象を受けました
14 tableタグで表を作ってみよう
- 実践日：2020年10月11日
- 作業記録
- 表について実際の作成手順を学習しました
- 学習メモ・感想など
- タイトル込みでたった2×3の表を表現するのにも4階層のコーディングが必要であり、しっかりとインデントを整理して構造的に理解して記述する必要がると感じました
15 リンクを張ってみよう
- 実践日：2020年10月11日
- 作業記録
- リンクを貼る方法を学習しました
- 学習メモ・感想など
- リンク先のURLやブラウザの新しいタブでリンクをに飛ぶようにする設定は属性を使ってできることがわかりました
16 別ファイルへのリンクを作ろう
- 実践日：2020年10月11日
- 作業記録
- 複数ページ（別ファイル）へのリンクの貼り方について学習しました
- 学習メモ・感想など
- 一つのHTMLを長大にしすぎるのではなく、複数のファイルに区切ってファイルのフォルダ構成も考慮した構成は実践的と感じました
- 階層に応じて属性の記述方法が違うので要注意ですね
17 ページ内リンクを作ろう
- 実践日：2020年10月11日
- 作業記録
- 同一ページ内にリンクを貼る方法について学習しました
- 学習メモ・感想など
- 目次に各見出しまでのリンクを貼ると記事が読みやすくなると思うのでこれはさっそく当ブログnichizero.comの記事でも使おうと思いました！
18 文書の構造を見やすくしよう
- 実践日：2020年10月11日
- 作業記録
- ページ内の区切りを表すタグの種類と内容について学習しました
- 学習メモ・感想など
- 構造的にまとまっている文章は読みやすくデザインもしやすいと思ったのでしっかり意識して構成したいと感じました
19 文書の構造をマークアップしてみよう
- 実践日：2020年10月11日
- 作業記録
- 区切りを表すタグの実際の作成手順について学習しました
- 学習メモ・感想など
- 後々この文章の構造・区切りを示すタグをキーにしてCSSでライアウトの調整などをするのだろうなーと想像しました
- 慣れるまでは手書きのスケッチか何かでビジュアル化しつつどのタグで囲うかを考えてもいいかもなと感じました
20 article､timeタグを使ってみよう
- 実践日：2020年10月11日
- 作業記録
- articleタグの実際の作成手順について学習しました
- 学習メモ・感想など
- 「外部への発信を目的とした独立したコンテンツ」に使うを覚えておこうと思いました
21 div､spanタグを使ってみよう
- 実践日：2020年10月11日
- 作業記録
- スタイリングのためのdivタグとspanタグの作成手順について学習しました
- div：ブロック全体へのスタイリング
- span：文中の一部にだけスタイリング
- スタイリングのためのdivタグとspanタグの作成手順について学習しました
- 学習メモ・感想など
- 「div」と聞いて「おぉ、マコなり社長出た！」と思いましたw
- CSSとセットで使うタグだということを覚えておきます
22 MDNでHTMLの仕様を確認しよう
- 実践日：2020年10月11日
- 作業記録
- MDN（Mozilla Developer Network）というWebディベロッパー向けのサイトの使い方について学習しました
- 学習メモ・感想など
- 「困ったらどこを見ればいいか？」というのは初心者であればあるほど情報が少ないと思うのでかなりお世話になる情報ソースであると感じました
- サイト構成もウィキペディアみたいな感じで見やすそうです！