目的
このシリーズではhtmlとcssを完全に理解するまでの道筋を大まかに書いていきます．対象は初めてウェブページを作成したいけど何をすればよいかわからない人です．このシリーズを読み終わるころには，あなたはウェブページ作成マスターだ！
各記事は以下の表から飛べます．
html編
css編
第1回
導入
第9回
文字 (coming soon)
第2回
環境構築
第10回
罫線 (coming soon)
第3回
タグ Part1
第11回
inlineとblock (coming soon)
第4回
タグ Part2(coming soon)
第12回
リスト (coming soon)
第5回
画像 (coming soon)
第13回
テーブル(表) (coming soon)
第6回
テーブル(表) (coming soon)
第14回
レスポンシブデザイン (coming soon)
第7回
リンク (coming soon)
第15回
各ブラウザへの対応 (coming soon)
第8回
レイアウト (coming soon)
環境構築
プログラミングをする上で環境構築は重要です．よりよい環境を構築することでプログラムを書く時間は大幅に減少し，ストレスフリーに楽しく書くことができます．自分に合った環境を手に入れるのに1日を費やしてもかまいません．
Windows User
windowsを使っている人はMicrosoft loverなので(偏見)，VisualStudioCode(以下，VSCode)を使うことを強く推奨します．VSCodeはMicrosoftが提供しているテキストエディタであり，自由なカスタマイズを特徴とした無料で使えるツールです．VSCodeのインストールは以下のリンクから．
Visual Studio Code – コード エディター | Microsoft Azure
詳しくはこの記事 1 などを参考にするといいと思います．
私が実際に使用している拡張機能はコチラ
Japanese Language Pack for Visual Studio Code(推奨)
VSCodeを日本語化します．
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja
Material Icon Theme
拡張子ごとにファイル名の横にアイコンを表示してくれます．
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
indent-rainbow
インデントの深さごとに色分けしてくれます．マジ便利
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
インデントについてはこの記事 2 を読むといいと思います．
Code Spell Checker
タイピングミスを指摘してくれます．
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
Visual Studio IntelliCode
「もしかしてこれを書きたいんじゃない？」って候補を表示してくれる賢い子です．
https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode
Live Server(推奨)
htmlやcssファイルに変更を加えたとき，リロードせずとも表示してくれます．
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Bracket Pair Colorizer 2
今回はあまり出番はないですが，「この}はどの{と対応しているんだ！」なイライラを失くせます．
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
HTML Snippets
htmlを書きやすくしてくれます．
https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets
HTML CSS Support
cssを見やすく色分けしてくれます．
https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css
IntelliSense for CSS class names in HTML
classなどの名前をいい感じに提案してくれます．
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
Mac User
私は宗教上の理由によりApple製品を携帯していませんので，どのエディタがいいなどはわかりません．迷ったらVSCodeを使えばいいと思います(布教)．以下にいくつかエディタの候補を挙げておきます．
CotEditor
DreamWeaver
Sublime Text
Atom
実行環境
このシリーズでは以下の実行環境で動作を確認しています．それ以外の環境では正常に動作しない場合がありますので，コメントにてお知らせいただくと幸いです．
windows 10
ブラウザ:Google Chrome (version 95.0.4638.69)
Microsoft Edge (version 95.0.1020.44)
参考文献
高橋朋代，森智佳子，"作りながら学ぶ HTML/CSSデザインの教科書"，SBクリエイティブ，2019年
次回はhtml編1回目，タグについて理解していきます．たぐとはなんぞや？の頭で読んでください．
htmlとcssを完全に理解する【導入】#1←前回 次回→htmlとcssを完全に理解する【タグ Part1】#3
Visual Studio Code (Windows版) のインストール ↩
インデントは大事だよっていう話 ↩
↧