こんにちは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ディベロッパー向けのサイトの使い方について学習しました
- 学習メモ・感想など
- 「困ったらどこを見ればいいか？」というのは初心者であればあるほど情報が少ないと思うのでかなりお世話になる情報ソースであると感じました
- サイト構成もウィキペディアみたいな感じで見やすそうです！
CSS入門 (全23回) – プログラミングならドットインストール
詳解CSS 基礎文法編
01 CSSを学んでいこう
- 実践日：2020年11月1日
- 作業記録
- CSSの学習の流れについて概要を学習しました
- 学習メモ・感想など
- 多種多様な内容を含むことがなんとなくわかりました
02 学習の準備を整えよう
- 実践日：2020年11月1日
- 作業記録
- 学習用のHTMLを準備しました
- 学習メモ・感想など
- 空ですらすらHTML書けるようになるとかっこいいなぁある程度のレベルまでは時間かけて慣れるしかない感じですね、きっと
03 はじめてのCSS
- 実践日：2020年11月1日
- 作業記録
- CSSを書く方法主な方法について学習しました
- 学習メモ・感想など
- HTMLの中に書く方法
- styleタグの使い方
- 別のCSSファイルに書く方法
- CSSファイルの作成方法・ファイル階層（VS Codeの便利機能）
- 要素に直接styleをつける方法
- style属性の使い方
- HTMLの中に書く方法
04 CSSの文法に慣れよう
- 実践日：2020年11月1日
- 作業記録
- CSSの記法について概要を学習しました
- 学習メモ・感想など
- { 波括弧の前後の用語の定義について
- セレクター{宣言}
- 宣言＝プロパティ: 値;
- 宣言の記法について
- 後から書いた方が有効
- コメント化（非実行）の方法について
- macOS ＝ Command + /
- { 波括弧の前後の用語の定義について
05 スタイルの継承を理解しよう
- 実践日：2020年11月1日
- 作業記録
- CSSという言葉の定義からスタイルの継承について学習しました
- 学習メモ・感想など
- CSS＝Cascading Style Sheets（段階的に流れるスタイルシート）
- HTMLの親要素から子要素へスタイルが継承される
- 継承されないプロパティもある
- CSS＝Cascading Style Sheets（段階的に流れるスタイルシート）
06 CSSの仕様を調べてみよう
- 実践日：2020年11月1日
- 作業記録
- CSSの仕様を調べる方法を学習しました
- 学習メモ・感想など
- HTMLと同様MDNが最も信頼できる
- 各プロパティの仕様書に継承の有無などが記載されている
- デフォルトで非継承のプロパティを継承したい場合
- inheritキーワード
- HTMLと同様MDNが最も信頼できる
07 デベロッパーツールを使ってみよう
- 実践日：2020年11月1日
- 作業記録
- CSSに関するブラウザ（Google Chrome）のデベロッパーツールの使い方を学習しました
- 学習メモ・感想など
- 開き方
- macOS ＝Command + Option + I
- 右クリック→検証
- Elements パネルでプロパティのCSSが確認できる
- user agent stylesheet ＝ブラウザが標準で持っている CSS
- Elements パネルComputed タブでプロパティをまとめて確認できる
- 開き方
08 テキストにスタイルを設定しよう
- 実践日：2020年11月1日
- 作業記録
- プロパティの基本的なスタイル設定の使い方を学習しました
- 学習メモ・感想など
- テキスト関係の基本スタイル
- color＝文字色
- font-size＝文字のサイズ
- text-align＝行の揃え
- font-weigh＝文字の太さ
- text-decoration＝テキスト装飾
- テキスト関係の基本スタイル
09 font-familyでフォントを指定しよう
- 実践日：2020年11月1日
- 作業記録
- font familyの概要を学習しました
- 学習メモ・感想など
- font familyで指定したフォントが閲覧者のPCにないと表示されないのでいくつか候補を書いておく必要がある
- 空白ありフォントは”で囲む
- CSSに日本語を書く場合はCSS ファイルの先頭に @charset “utf-8”;を記載
- 日本語より英語フォントを先に指定
- 全部なかった時用にsans-serif（総称フォントフォントファミリー）を指定しておく
- font familyで指定したフォントが閲覧者のPCにないと表示されないのでいくつか候補を書いておく必要がある
10 line-heightで行の高さを調整しよう
- 実践日：2020年11月1日
- 作業記録
- 行の高さを指定する方法を学習しました
- 学習メモ・感想など
- line-heightプロパティの概要
11 単位無しでline-heightを指定しよう
- 実践日：2020年11月1日
- 作業記録
- line-heightの指定におけるem単位の有無による違いを学習しました
- 学習メモ・感想など
- 単位あり：子要素にも親要素の絶対値が継承される
- 単位なし：子要素の文字サイズに対して再計算される
12 vertical-alignで位置を調整しよう
13 RGBAを使った色の表現方法を覚えよう
14 HSLAを使った色の表現方法を覚えよう
15 リストをスタイリングしてみよう
16 一括指定プロパティを使ってみよう
17 クラスセレクターの基本をおさえよう
18 ボックスモデルを理解しよう
19 width､heightを設定してみよう
20 borderで境界線をつけてみよう
21 paddingで内側の余白をつけよう
22 marginで外側の余白をつけよう
23 marginの相殺を理解しよう
24 displayプロパティについて理解しよう
25 displayプロパティを操作してみよう
26 positionで要素の位置を変えよう
27 要素を絶対配置してみよう
28 z-indexで重なり順を操作しよう
29 box-sizingを使ってみよう
30 calcで単位が違う計算をしてみよう
31 要素に影をつけてみよう
32 背景のスタイリングをしていこう
33 floatを使ってみよう
1-2. よくわかるHTML5+CSS3の教科書
1-3. ディベロッパーツールの使い方
1-4. フレームワーク（Bootstrap）の使い方
【2】Webサイトにアクセスを集める【SEOの入門編】
2-1. これからはじめる SEO内部対策の教科書
2-2. バズ部のご紹介
2-3. コピーライティング入門
2-4. キーワードの検索ボリュームの重要性
【3】実用的なWebサイトを制作する【WordPressを使う】
3-1. ドットインストール（WordPress入門）
3-2. 本格ビジネスサイトを作りながら学ぶ WordPressの教科書
3-3. WordPressで個人ブログを作成する
3-4. ブログに広告を掲載してみる
【4】Webサイトに動きをつける【jQuery】
4-1. ドットインストール（jQuery入門）
4-2. Web制作の現場で使うjQueryデザイン入門
4-3. jQuery最高の教科書
【5】もっと自由にWebサイトをつくる【PHP】
5-1. よくわかるPHPの教科書
5-2. ドットインストール（PHP入門基礎編）
5-3. Webサイト制作者のための PHP入門講座
5-4. Tut+（海外のプログラミング勉強サイト
映画「えんとつ町のプペル」を応援します
