WEBページの作り方－VSCodeのインストール方法－
皆さん、こんにちは🌞
そしてお久ぶりでございます！
皆さんはどこかのホームページを見て
『こんなWEBページ作ってみたい』と思ったこと
ありませんか？
これからWEBページを作りたい・情報を自ら発信して
みたい・+αでデザインの幅も広げてみたいと思っている
方もいらっしゃるかもしれません。
でも、『どう学んでいいかわからない・・・』・
『学ぶならデザインの幅も広げたい』と思う方も
いらっしゃるかと思います！
このシリーズはそんな完全初心者の方向けに、
WEBページの作り方を独学で1から学べ・
デザインの幅も広げていける場を作ることをコンセプトに
しました。
※HTML・CSSを扱うため、wordpressを使う方にも役立つ
内容になっています(^^♪
このシリーズを読み終えて習得できるもの
- HTML・CSSの基本的な使い方
- シングルカラムレイアウト
- フレックスボックスレイアウト
- 問い合わせフォームの作り方etc
レイアウトはグリッドレイアウトなどECサイトに使える
物も勉強内容に含めていきます。
最終的に初心者の皆さんのバイブルとなるような
記事を作り上げたいと思っています(^_-)-☆
この記事はこんな方にオススメ！
- WEBページ完全初心者の方
- WEBページ作成に挫折した事のある方
- 要点を早く・わかりやすく・簡潔に知りたい方
- デザインの幅を広げていきたい方
この記事では、私の作成したWEBページと
テキストエディタというコードを記述するツールを
ご自身のパソコンへインストールする方法を
解説していきます。
目次
1.私の作ったWEBページ
いきなりWEBページと言われても、
どんなものが作れるのかと思われる方も
いらっしゃるかと思います。
ここでは私自身が作成したWEBページがどんなものか
実際にお見せしたいと思います。
《私のWEBページ--一部抜粋--≫
全てのページをご覧になりたい方は
下記URLよりご覧ください。
(FC2が運営するホームページサービスです。
安心して見てみて下さいね！)
URL：https://takuchan223.web.fc2.com/
私自身今までWEBページを作ったこともなく
完全未経験でしたが独学でここまで作成することが
出来ました。
このシリーズを読み終えるころには、
皆さんもWEBページを自分で作ることが出来るように
なっている事でしょう！
2.テキストエディタとは
さて、WEBページを作ろうと思っても何から始めたらと
思う事でしょう。
そこで登場するのがテキストエディタと呼ばれるコードを
入力していく物になります。
代表的なテキストエディタには下記のようなものが
あります。
- Visual Studio Code(VSCode)
- Atom
- PyCharm などなど
VSCodeの方が操作性が良く扱いやすいので
お勧めです(*'ω'*)
(無料でインストールすることが出来ます)
3.テキストエディタのインストール方法
ここからはVSCodeのインストール方法を
見ていきましょう！
下記の手順に従って実際にインストールして
みましょう。
①以下のURLからVSCodeの公式ホームページに
アクセス
URL：https://azure.microsoft.com/ja-jp/products/visual-studio-code/
『今すぐダウンロード』をクリックする。
②お使いのOSに合わせてインストーラーを
ダウンロードする。
私の場合は、OSがWindowsのため、
左の青色部分をクリックしました。
③規約同意画面にて『同意する』を選択し、
『次へ』をクリックしていく。
④『追加タスクの選択』画面が出てきたら、
『デスクトップ上にアイコンを作成する』に
チェックを入れ→『次へ』 をクリック
→『インストール』を押すと完了！
⑤このままでは英語のため、日本語対応させて
いきます。
VSCodeを立上げ下記のように画面横の
『拡張機能バー』から日本語対応ツールを
インストールします。
上部の『拡張機能を検索する』と書かれた検索窓で
『Japanese Language Pack for Visual
Studio Code』と検索しインストールすることで
VSCodeを日本語対応することが出来ます。
以上で、コードを入力する準備が整いました！
これで終わりでもいいのですが、コードを入力する中で
どんなWEBページに仕上がってきているか確認しながら
作業を進めたいと思うはず(笑)
そこで作成途中のWEBページを確認する拡張機能も
入れておくと便利です！
⑥画面横『拡張機能バー』を開き、
上部の『拡張機能を検索する』と書かれた検索窓で
『Live Server』と検索し、インストールすることで
作成途中のWEBページを確認することが出来ます。
これでコードを入力し、作成途中のWEBページを
確認しながら作業をすることが出来ます。
では、次回からVSCodeを使って実際にWEBページを
作っていきましょう(^^)/
(遅くとも週1ペースで記事を更新できればと
思っております)
記事のご感想等頂けますと、今後の励みになりますので
お待ちしております！
応援宜しくお願いします↓
にほんブログ村