1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

HTML,CSSだけでホームページ作成『開発環境編』「前編」

Last updated at Posted at 2020-07-10

#はじめに
HTMLとCSSでホームページを作成するためには

  • エディタ
  • ブラウザ

この2つが必要になってきます。

スクリーンショット 2020-07-11 0.28.00.png

グラフを見て分かるようにエンジニアの3人に1人がVisual Studio Codeを使用
していることになります。

なので、今回はVisual Studio Codeを使用していきます。

#1.VisualStudioCodeをインストール

  • サイトにアクセス

今回はmacOSでやっていきます。
下記のリンクからアクセスして「Download for Mac」をクリック
https://code.visualstudio.com/
スクリーンショット 2020-07-11 1.01.19.png

  • ダウンロード

クリックすると自動でダウンロードが開始されます。
スクリーンショット 2020-07-11 1.04.51.png

  • zipファイルを解凍

画面右下の ① のアイコンをクリックすると、ダウンロードフォルダに入ったファイル一覧が出てくるので、該当の ② をクリックします。

※Finderから直接でも上記でもどちらからでも良いです
スクリーンショット 2020-07-11 1.08.31.png

  • アプリケーションフォルダに移動

ダウンロードフォルダVisualStudioCode表示されると思いますが、まだ開かないでおきましょう。
そのアイコンをドラッグアンドドロップで、サイドメニューの「アプリケーション」に移動させます。

スクリーンショット 2020-07-11 1.15.10.png
  • 認証ボタン押す

画面が表示されたら「認証」ボタンを押して、管理者のログイン情報を入力し認証してください。

スクリーンショット 2020-07-11 1.20.33.png
  • アプリケーションフォルダから「VisualStudioCode」を開く
スクリーンショット 2020-07-11 1.21.10.png

これでエディタの開発環境は終わりです。
お疲れ様でした!

#まとめ
今回、ブラウザのことまで書きたかったんですが長くなりそうなので「前編」「後編」と言った形に分けさせてもらいます。

今回ご紹介したVisualStudioCodeは、デフォルトで便利な機能が備わっていますし、扱いやすさも抜群なので、初心者の方でも使っていて不便ということがほぼないと思います。

もし機能で困ったことがあっても、VSCodeは認知度が高く、ネットに多くの情報が載っているため、検索すればいくらでも解決策が出てきます。
※Qiitaを有効活用しましょう!!!!

ただ、初めのうちはどのエディタを使用しても違いがよくわからないと思います。

しかし、使っていくうちに『こんな機能をつけたい』『これが便利』と感じることが増えてくると思いますので、その後に自分に適したテキストエディタを見つけてどんどんコードを書いていきましょう!

#参考文献
【2020年最新版】プログラミング効率を上げるテキストエディタ
https://frontend-diary.com/programming-editor/
MacOSでVisual Studio Codeをインストールする手順
https://qiita.com/watamura/items/51c70fbb848e5f956fd6

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?