アラフィフ初心者がHTMLに取り掛かる（前編）

HTML & CSS
2021.10.26

こんにちは。アラフィフでプログラム初心者のcatteaです。

目下の夢はHTMLとCSSが書けて、バナーも自作できるようになること、です。

今回はその第一行程であるHTML & CSS の学習法を簡単に箇条書きしてみます。

  1. HTMLの独学といったら必ず登場するProgateの「HTML & CSS 中級編」(有料版)をざっとやる。（目を通す程度。受験勉強みたいに理解しないと先に進めない、なんてやっていると永遠に終わらない。昔と比べて頭が鈍くなっているのでその辺は割り切った）
  2. HTMLを書いていく上でのテキストエディタ（高機能なメモ帳のようなもの）を決める。有名どころの「Visual Studio Code(通称: VSCode)」か「Atom」かで迷ったが、Microsoft社が開発しているVSCodeに軍配が上がる。なんといってもカスタマイズ性が高く、環境設定を変更できたり、機能を追加できる拡張機能が充実していたため。あとはよく見ているIT系のYouTuberさん達がVSCodeを使っていたのも影響したかも。
    （注：2021.10.20にVSCodeはブラウザ版を公開した。Webブラウザから「https://vscode.dev/」にアクセスするだけで利用でき、インストール不要となった）
  3. VSCodeは機能を拡張して使いやすい環境にするべき。私は以下の拡張機能を追加。
    • Auto Rename Tag　HTMLの編集時に、開始タグを変更したら自動で終了タグも編集してくれる。
    • Bracket Pair Colorizer 2 対応する括弧を色分けして表示してくれる。
    • Code Spell Checker タイトルの通り、ソースのコードをスペルチェックしてくれる。問題がある箇所には波線が付いてアピールしてくれるので気付きやすい。これは絶対入れるべき。
    • Japanese Language Pack for Visual Studio Code 元々の表示言語になっている英語を、日本語化してくれる機能。グッと使いやすくなる。
    • zenkaku コードを動かなくしてしまう全角スペースを無意識に入力できないようにしてくれる。全角スペースを使ってしまった場合はグレーの四角い記号で知らせてくれるのでわかりやすい。初心者にはありがたい機能。
  4. 機能を充実させたVSCodeを使って、「HTML＆CSSとWebデザイン〜入門講座〜」を一通りやってみる。実際にWebサイトを作ってみる。

・・・と、とりあえずここまででひと段落ですね。

後編に続きます！！

コメント

タイトルとURLをコピーしました