Help us understand the problem. What is going on with this article?

ウェブデザイン初心者のための入門講座 (Part 1) - 環境構築編

初めに

こんにちは!
最近、プログラミングについて話すことができる友人が増え、嬉しく感じているこの頃です。

この前、友人が授業の一環でハイブリッドアプリを制作したいけど HTML、CSS、JS の知識がないため勉強しているけど面倒という話をもらいました。
そこでチートシートのような記事を投稿して少しでも、ウェブデザインについて教えられるといいなと思いました。

この記事では、数回に分けてウェブデザインを含めた HTML、CSS、JS のことを書いていきたいと思います。
「ここが分かりづらい」「ここはこうしたほうがいい」などあったらぜひ教えていただければと思います!

1. PC設定

使用する OS は基本的に好きな方でいいと思います。
個人的な感覚では、ウェブデザインをやっている人は macOS を使用しているイメージがありますが好きな方でいいです。MacBook は高いですし。
強いて言えば、画面解像度の高いモニターがついている PC にすると作業が楽になると思います。

ただし、PC 内の拡張子は、表示する設定にしましょう。
https://121ware.com/qasearch/1007/app/servlet/qadoc?QID=017779
Windows のパソコンで拡張子を表示していない設定にしてる方は、上記の URL を参考に設定を変更してください。

2. 開発環境について

基本的にプログラミングを始める際には、プログラミングコードが書ける開発環境と呼ばれるものを用意してあげる必要があります。
ウェブデザインでは、主に「HTML、CSS、JS」を使用します。これらは特別な環境構築は必要ないですが、「エディター」と呼ばれるソフトをインストールしてプログラミングを行います。
※ メモ帳でもコードは書けますが、非常に使用しづらいのでおすすめはしません。

このようなエディターをインストールして使用するといいと思います。
個人的には、高校時代からの惰性で Sublime Text を使用していますが、VSCode を使用するのが今時って感じがします。

エディターには、自分の使いやすいプラグインを導入しましょう
プラグインを導入するとぐっと作業効率が上がります。
HTML、CSS を書くには「Emmet」というプラグインの導入をおすすめします。
HTML/CSSを爆速コーディング Emmet入門 第1回 Emmetを薦める理由
他にも、自分に合う良いプラグインを探してみると良いと思います。

3. 使用するブラウザについて

ウェブデザインでは、基本的にどのブラウザで見ても同じデザインになるように制作する必要があります。

ブラウザ 全世界でのシェア率(https://www.netmarketshare.com)
このサイトの上位 5 つくらいのブラウザで表示できるようにコードを書けば良いと思います。

Windows macOS Android iOS
Internet Explorer 11
Microsoft Edge
Google Chrome
Mozilla Firefox
Android 純正ブラウザ
Safari

IE 11(Internet Explorer 11)を除いて、この辺のブラウザをカバーできていれば問題ないと思います。

IE 11 の対応について

このように、Windows 10 においては、Microsoft Edge と Internet Explorer というふたつのブラウザーが搭載されていますが、弊社としましては、Internet Explorer との後方互換性が必要な業務 Web システムには Internet Explorer を利用いただき、Internet Explorer でなければならない場合以外は Microsoft Edgeをご利用いただくことを提案してきました。
https://blogs.technet.microsoft.com/jpieblog/2018/07/18/internet-explorer-support/

IE 11 関しては、個人のサイトレベルだと対応させる必要がないような気がします… (できれば考えたくない)

まとめ

ここまで、コードを書く前の準備段階のことを書いてきました。
次回からは実際にHTMLについて説明していきたいと思います。
よろしくおねがいします。

(2018/12/27 追記)
次の記事を書きました。よろしくおねがいします。
ウェブデザイン初心者のための入門講座 (Part 2) - HTMLの基礎編

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away