この記事ではHTMLとCSSをマークアップするためのツールの説明、導入の手順を説明していきます。
前回は普段使っているWEBのしくみについて学びましたね。
このレッスンにも関わってくる分野ですので、まだ読んでいない方はぜひ目を通してください。
この記事では、分かりやすくWEB全体の仕組みと、WEBサイトを表示させるためのHTMLとCSSの役割を説明していきます。 本格的にHTML学習を始める前に、まずはWEBのしくみがどうなっているのか見ていきましょう。 HT[…]
他のプログラミング言語とはちがい、HTMLとCSSの準備はとてもかんたんなので、この記事を読んでささっと環境を整えていきましょう！
必要なのはこの２つだけ！
- ブラウザ
- テキストエディタ
では順にそれぞれの詳細と導入手順を説明していきます。
もくじ
ブラウザを用意しよう！
前回、ブラウザはHTML文書を人間でもわかるように変換、表示させていると説明しました。
ブラウザにはGoogle ChromeやSafari、Edge、FireFoxなどがあります。
これらはモダンブラウザと呼ばれ、どれもHTML５という最新のバージョンに対応しています。
(Internet Explorerは完全に対応していないので注意が必要です。)
これからレッスンで学んでいくのも、HTML5になります。
ですので表示させるだけであれば、どのブラウザも大差はないのですが、コード食堂はGoogle Chrome（以下クローム）を使って学んでいくことをおすすめしています。
理由はこの２つ
- 国内、世界ともにシェア率が圧倒的に高い
- グーグルデベロッパーツールが使える
シェアが高いとなにがいいの？
現在クロームのシェア率は世界で約６０％、国内で４０％を占めています。
「もうすでにクロームを使っているよ」というひとも多いと思います。
そんなみなさんは、インストールはスキップしてそのまま使えます！
世界的にシェアが高いということは、世界中のひとが同じ設定の画面で見ているということです。
実はブラウザごとに、それぞれ微妙にデフォルトの表示設定が異なっています。
たとえば、こだわり屋さんの人がSafariで完璧にミリ単位でデザインを仕上げたのに、友達のパソコンで見たら表示がすこし違っていてがっかり、ということがよく起こります。
これに加えて、クライアント側（前回勉強しましたね！）のパソコンの設定もあり、すべての人に、まったく同じレイアウトでページを表示させるのは難しいのです。
そこで世界標準であるクロームを使って、なるべくユーザー間の差をなくしてデザインをしていくことが大切になります。
デベロッパーツールってなに？
Google Developer Tool（グーグル デベロッパーツール）、初めて聞く方も多いのではないでしょうか？
developer（開発者）のtool（道具）の名の通り、これからWebデザインやWeb開発に携わっていく人には、とても心強いパートナーになってくれます。
クロームに標準で搭載しています。
デベロッパーツールを使うと、他のサイトで「この色いいな」と思ったらその色番号を知ることができたり、デザインの構造をHTML言語で情報を見ることができます。
また、実際にCSSを書いてみる前に、ツール上で試したりできて作業の効率も大きく変わってきます。
特に最初のうちは、デザイン面で思った通りのサイトを作るのがむずかしいと思うので、お手本のサイトを見つけて、どんどん参考にすることでWebデザインのスキルアップにつながりますよ！
（あくまで参考程度にしておいてくださいね）
デベロッパーツールには機能がたくさんあります。
これだけでひとつの記事書けてしまいますので、後のレッスンで特集していきますね。
まずはこんな機能があるのだな、と覚えておいてください。
クロームをインストールしてみよう！
ではさっそくクロームをインストールしていきましょう。
画像ではMac版で説明しています。
新しい Google Chrome で毎日をもっと快適に。Google の最先端技術を搭載し、さらにシンプル、安全、高速…
‘Chromeをダウンロード‘のボタンを押すと、ダウンロードがはじまります。ダウンロードしたファイルからPCにインストールしていきましょう。
クロームのインストールが終わりました。
簡単ですね！
テキストエディタとは？
さて、クロームの準備ができました。
次はテキストエディタを用意していきます。
テキストエディタとは、まさにコードを書いていくためのアプリで,こんな画面になっています。
自動的に閉じタグを付けてくれたり、色を付けて構造を分かりやすくしてくれたりと（シンタックスハイライトといいます）、たくさんの機能があり作業をサポートしてくれますよ。
おすすめのエディタとは？
エディタもたくさんの種類があり、いろいろな情報が乱立しているのですが、コード食堂ではVisual Studio Code（以下VS CODE）を強くおすすめしています。
まず、MicroSoft社により提供されているため、とても信頼性が高いです。
長く使っていくものですので、サポート面もとても大事なポイントです。
そしてクロームと同じようにシェア率が最も高く、それだけ多くのエンジニアやプログラマに支持されているということです。
特に、コードの自動補完（予測変換のようなもの）をはじめ、機能面ではずば抜けています。
拡張性もとても高いので自分好みにカスタマイズすることができます。
そして現在開発において、必須の管理ソフトウェアであるGITがデフォルトで組み込まれていて、これがほんとうに分かりやすいです。
もし将来プログラミングを仕事にしたいという方は、コードを勉強しながらGITも少し意識するのもいいかもしれません。
エディタはいちど使いはじめると、替えどきがなかなか見つけられません。
細かいショートカットを覚え直さなければいけなかったり。
途中まで他のエディタをずっと使っていたのですが、はじめからVS CODEを使っておけばよかったなと思うくらいです。
高機能でありながら、初心者にもとてもやさしいエディタです。
- テキストエディタはVS CODEで決まり！！
- マイクロソフト社が提供している
- いちばんシェアされているエディタソフト
- 拡張性が高く、アップデートの更新も早い
- 初心者にもとても使いやすい設計になっている
VS CODEをインストールしてみよう！
それではVS CODEをインストールしていきましょう。
こちらのページにアクセスしてください。
ほぼすべての言語で動作し、任意の OS で実行される強力なコード エディターである Visual Studio Code…
‘今すぐ無料でダウンロードする‘のボタンをクリックします。
使っているOSを選んでボタンを押してください。
これでダウンロードは終了です。
クロームと同じように、ダウンロードしたファイルからインストールしていきましょう。
VS CODEの設定をしていこう
VS CODEのインストールが終わりました。
ここからは快適にコードを書いていくための、基本的な設定をしていきます。
VS CODEを日本語化しよう！
現段階では英語の画面になっていると思います。
VS CODEの拡張機能を使えば、あっという間に日本語にすることができますよ！
事前にこちらの文をコピーしておいてください。
Japanese Language Pack for VS Code日本語化の手順
- 左下にある’拡張機能’のアイコンをクリック
- 検索窓にペーストして検索
- 検索結果のいちばん上に出てくるので、クリック
- ‘Japanese Language Pack for VS Code’ の画面の’Install’ボタンをクリックしてインストール
- アプリを再起動
以上で終了です！
基本的な設定をしよう！
最後に基本的な設定も終わらせてしまいましょう！
こちらはお好みですので、試してみてから調整してください。
設定画面を表示する
上メニューバーの‘Code’をクリック
’基本設定’▶︎’設定’をクリックして設定画面に入ります
オートセーブの設定
自動でセーブするか設定していきます。
うっかり保存を忘れてしまうのを防ぐためにも、設定しておきましょう。
’よく使用するもの’▶︎’Auto Save’メニューから’afterDelay’を選びます
コードを書いたりファイルに変化があったときに、自動で保存してくれる機能です。
行の回り込みを’ON’にする
次に行の表示について、設定していきます。
’よく使用するもの▶︎’Word Wrap’のメニューを’ON’にします
これは１行が長くなり、画面からはみ出したときにつぎの行に折り返して表示させてくれる機能です。
ぜひこちらも設定しておきましょう。
編集画面のテーマカラーの設定
ざっくりいうと画面の背景が黒か白かを選びます。
こちらもお好みですが、黒い方が目にはやさしいです。
’外観’▶︎’Color Theme’のメニューから
黒は’Default Dark+’
白は’Default Light+’
を選んでください
基本的な設定は以上です。
まずは使ってみて、ほかにも自分好みでいろいろカスタマイズしてみてください。
まとめ
この記事ではHTML/ CSSを書いていくための準備と設定の手順を説明してきました。
ドットインストールでも動画で説明していますので、もしどうしても分からないことがあれば確認してみてください。
3分動画で初心者や独学の方でも無理なく勉強が続くプログラミング学習サービスです。Web制作の基礎から子供向けのゲーム制作…
次のレッスンでは、HTMLタグについて詳しく見ていきますね！