上質な情報発信を続けてお役に立てるようサイト運営費用を賄うために、Googleアドセンス・アフィリエイト等を利用しており本記事はプロモーションを含みます。
Web 制作に必要なテキストエディターを準備するよ
テキストエディター？？
テキストファイルを作成、編集、保存するものだよ
Web制作に必要なもの
HTML・CSSをWeb上に表示するために必要になってくるテキストエディターですが、種類は様々なものがあります。「Windows」や「Mac」に入っているメモ帳でもコードを書くことができますが、これだと機能が少なかったり、初心者には使いにくいというデメリットがあります。そこでオススメなのが「VSコード（Visual Studeo Code）」です。こちらは無料で使うことができます。
なぜVSコードを使うのかというと、Web制作をする中でとても役に立つ機能が沢山盛り込まれているからです。例えば補完機能があり、候補を出してくるのでミスが減ったり作業効率が大幅にUPします。標準に入っていなくても拡張機能で追加することも出来るのです。Web制作者、コーディングを行う人にとっては欠かせないものになってきますので是非ダウンロードして使うようにしましょう。
VSコードのダウンロード
まずはこちらをダウンロードしてください↓↓
自身の【Windows・Mac】環境に合うものをダウンロードします。ダウンロードしたら早速コードを書き込む準備に入りますがその前に、標準では表記が英語になっています。なので初めに「日本語の設定」をしていきます。
操作は簡単です。VSコードを開いてもらって「拡張機能」を使って【Japanese Language Pack for Visual Studio Code】をインストールします。インストールしたら再起動し日本語表記になっている事を確認すれば完了です。※私は過去に日本語をインストールにしているにも関わらず英語表記になった状態になりました。その時パソコンの電源を切って再起動することで解決しましたのでもし困った場合は一度試してください。
日本語があるとわかりやすいね
すごく使いやすくなったよ💕
コードを書き込む準備
まずはパソコンのデスクトップに新規フォルダーを作成します。次にそのフォルダーをVSコードのアイコンの上に持ってきてドロップします。
フォルダーをドロップすると下記のようなコメントが出ますので「信頼」を押すと作成開始となります。
その後に今回作成した「Practice」というフォルダーのみが表示されている状態になっています。
そこで次に実際にHTMLとCSSを書き込んでいきます。今回はHTMLの書き方を説明します。
コードを書いてみよう
- 新規ファイルの作成
- ファイル名を決める
- コードの入力
- データの保存
- Web上で表示されているか確認
①Practiceフォルダーがあるので、その中に新規のHTMLファイルを作ります。
②ファイル名を決定しますが注意点があります
- 半角英数を使う
- 拡張子をつける「〇〇.html」「〇〇.css」のようにします
- 使えない記号がある
- 空白が使えない
③コードの入力をしますがHTMLの記事で説明した基本の形で書くようにします。
④入力が完了したらデータを保存します。保存することでWeb上でも反映されます。
※ファイルの右上が「◯→✕」に変わっていれば保存が完了しています。
⑤Web上でどのように表示されているのかを確認します。
HTMLに書いた文字が表示されていたら完了です。
Web上に文字が書けたんだけど！！やったー💕
おめでとう！ついにWebデザイナーへの道が開いたね♪
次回はHTMLのタグの種類についてさらに深く学んでいくよ。
HTMLのタグは１００種類くらいありますが、その中でもよく使うものを選んで学んでいくので、どういった事ができるようになってくるか理解できます。さらに基礎知識をつけていきましょう。
