最近私がハマっているのがHTMLで手作りのホームページ・サイトを作ること。
これまで私はサイト作成時いつもwordpressで行っていました。wordpressの最も優れたところはプログラミングが解らなくても誰でも簡単に作れてしまえることです。
あまり威張って言えることではありませんが、幾度とブログを作っては壊しを経験してきたため、ちょっとしたデザインならば1時間もあれば簡単に作れてしまいます。
でも、wordpressでは全てが自分の思い通りに作れるというわけではなく、ある程度は「テーマ」によってできる範囲を決められてしまいます。その範囲を超えて作成するにはやはりPHPなどのプログラミングができないといけません。
ふと「HTMLを学習してwordpressとは違ったホームページ・サイトを作成してみたい」と思い勉強を始めたのですが、これがすごく楽しい！
自分の手で画像の配置場所を決めたりデザインを考えたり、HTMLを覚えてホームページを飾っていくとホント感動します。
まだまだ初学者なので覚えたタブ等も忘れやすく、実際学んだことを当ブログでまとめていけば記憶の定着になるかなと記事にすることにしました。
HTMLを勉強してみて
HTMLを少しかじってみてまず思うことは「初学者でも覚えやすい」ということ。私はExcelなどのVBAしかプログラミングしたことがありませんが、VBAに比べてもHTMLは簡単です。
一般的にHTMLはプログラミング言語ではないらしいのですが、独学でも何とかなります。趣味として行うならなおさらですね。
基本、本とネット検索で学べばある程度作成することは可能です。つまづいたら有料ですが「ココナラ」などでプロに質問すれば問題ありません。
また、私は趣味で始めてますが経験を積めば「Webデザイナー」や「Webエンジニア」としての道も開きます。ITエンジニアを目指すならHTML・CSSの学習は登竜門なのかもしれません。
開発環境を作ろう
前置きが長くなりました。まず初めにHTMLを勉強するために私がしたことは「開発環境を作る」ことです。
開発環境を作るといっても簡単で、まずはプログラムを記述するソフトを準備します。記述するソフトは「visual studio code」（VScord）になります。
「visual studio code」はマイクロソフトが開発したテキストエディターでHTML以外のプログラミング言語でも使用でき、Macでも使用することができます。
ちなみにWindowsの「メモ」やmacの「テキストエディット」など、テキストエディターならどれでも作成できます。Macでは15種類くらいあるようですね。「visual studio code」もその中の一つです。色々とあるのでご自分に合ったものを探してみるのも良いかもしれません。
今回は「visual studio code」をインストールする方法についてまとめていきたいと思います。
visual studio codeをインストールしよう
それではインストールしていきます。インストールは下記URLから行ってください。
①画面左側のその他のプラットフォームをクリックしてください。（下の画像は日本語翻訳しています）
②詳細なダウンロードページが開きますので、PCの環境に併せて選んでください。（私はMacなのでMacのダウンロードを選択します。当たり前ですが・・。）
③ダウンロードしたファイルを開き、インストールを行います。
セキュリティ画面が表示されますが、開くで問題ありません。
無事インストールが完了するとvisual studio codeが起動し表示されます。
便利な機能をインストールしよう
1.日本語パックのインストール
このままVScodeを使用しても良いのですが、インストール初期時は英語表記になっていると思いますので、やはり使い辛いですよね。日本語パックをインストールし日本語で表示されるようにしましょう。
①VSコードが開いている画面でメニューバーから「View」→「command palette」をクリックします。
②command paletteを開いたら「configure display language」と入力し、クリックします。
③install additional languagesを選択。表示されたリストから日本語をインストールしましょう。
④インストールが完了したら、再起動をすれば日本語表示に変わっています。
2.HTMLの記述をチェックしてくれる機能をインストール
①左側にある拡張機能のアイコンをクリックします。
②検索バーに「HTMLhint」と入力し、インストールを行います。
その後注意書きが表示されますが、「信頼してインストール」で大丈夫です。
3.cssの記述をチェックしてくれる機能をインストール
次にHTML同様、CSSの記述を確認してくれる機能をインストールしておきます。
①左側にある拡張機能のアイコンをクリックします。
②検索バーに「CSSTree validator」と入力し、インストールを行います。
これで、HTML・CSSどちらとも構文をチェックする機能を備えることができました。実際入力を間違えると間違っている箇所を波線で表示してくれるようになります。
4.Live Server（プレビュー機能）をインストールしよう
最後にプレビュー機能をインストールしましょう。
作成したいHPどおりにHTMLやCSSのコード入力ができているか、都度ブラウザを更新しながら作業を行いますが、ブラウザを毎回表示し更新するのってかなり面倒なんですよね。
そこで便利な機能があります。Live Serverです。
こちらの機能を使えばテキストエディタを保存するだけで、ブラウザの内容を自動更新してくれます。エディタとブラウザを同じ画面に表示していれば、都度確認でき大変便利です。
①左側にある拡張機能のアイコンをクリックします。
②検索バーに「Live Server」と入力し、インストールします。
③テキストエディタの右下に「GO Live」と表示されますので、こちらをクリックするとブラウザ上に記述した内容が表示され、以降エディタを保存するだけでブラウザが自動更新されるようになります。
google chromeをインストールしよう
VScodeの設定が終わったら、google chromeをインストールしましょう。
現在最も使用されているインターネットブラウザは「google chrome」なので、chrome基準で作成した方が良いからです。
最後に・・
今回はHTMLでホームページ（サイト）作成するための準備をまとめてみました。
今回ご紹介したVScodeの機能以外にも便利なものあると思います。ネット検索を活用してみてもっと楽に開発ができる環境を探してみてください。
