初めに
こんにちは！
最近、プログラミングについて話すことができる友人が増え、嬉しく感じているこの頃です。
この前、友人が授業の一環でハイブリッドアプリを制作したいけど 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 3
- Atom
- VSCode（Visual Studio Code）
- WebStrom (基本は有料ですが、学生であれば無料)
このようなエディターをインストールして使用するといいと思います。
個人的には、高校時代からの惰性で Sublime Text を使用していますが、VSCode を使用するのが今時って感じがします。
(2020年11月20日追記) WebStrom に移行しました…。学生であれば無料なので試しに使用した結果、便利で今も使用しています。
エディターには、自分の使いやすいプラグインを導入しましょう
プラグインを導入するとぐっと作業効率が上がります。
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 関しては、個人のサイトレベルだと対応させる必要がないような気がします… （できれば考えたくない）
(2020年11月20日追記)
IE もサポート完全終了に向かっているそうですね。まだ、終了は数年ありますが、対応は考えずに実装して問題ないと思われます。
いよいよ完全終了へ。Internet Explorer（IE）サポート終了スケジュール：Tech TIPS - ＠IT
まとめ
ここまで、コードを書く前の準備段階のことを書いてきました。
次回からは実際に HTML について説明していきたいと思います。
よろしくおねがいします。
（2018/12/27 追記）
次の記事を書きました。よろしくおねがいします。
ウェブデザイン初心者のための入門講座 (Part 2) - HTMLの基礎編