Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@Toya-Onodera

ウェブデザイン初心者のための入門講座 (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 を使用するのが今時って感じがします。

(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の基礎編

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  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
Toya-Onodera
東北の田舎でプログラムを書いている大学生です。 頑張って記事を増やしていきたい 💾

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?