-
【初心者向け実践】HTMLとCSSの環境構築「8つの手順」
HTMLとCSSの基礎演習
今回は、プロも使う「テキストエディタ」を使って実際に「HTML」と「CSS」を取り扱う演習をしてみましょう。
自分のパソコン内でHTMLとCSSを扱える「環境構築」を行います。環境構築なんて聞くと大層なことに思えてしまいますが、本記事では、あくまでHTMLとCSSに絞った開発環境についてなので複雑ではありません。
無料かつ簡単にできる方法を「8つの手順」でご紹介しますのでご安心を。
今回の演習のように自分のパソコンで開発する環境のことを「ローカル環境」と呼びます。ローカル環境構築の演習を通し、自分のパソコンでいつでもHTMLとCSSを使える環境を整えましょう。
今回の作業メニュー
これからやる作業の内容は以下。
①ローカル環境にてHTMLファイルを作成
②さらにCSSファイルも作成し指示内容を記述
③HTMLファイルと連携させ
④ブラウザで確認するのがゴール
以上です。手順通りやっていくと「ああ、そういうことね」と理解できるのでやってみましょう。
MacやWindowsがあればやってみることができますので、お気軽にお試しください。必要な箇所は双方の手順を併記していきます。
では【手順①】から【手順⑧】の通りにやってみましょう。
【手順①】テキストエディタを用意しよう
今回テキストエディタは、テキストエディタのおすすめ記事でも最初にご紹介した『Visual Studio Code』（マイクロソフト社）を使用します。
初級者だからというわけでなく、開発現場のベテランのエンジニアにも支持されているエディタなので、安心して使ってみましょう。
ではさっそく『Visual Studio Code』（略称VSCode）を自分のパソコンにインストールしましょう。
インストール手順含め、次の項目からご説明していきます。
▶STEP1「サイトにアクセス」
まずは『Visual Studio Code』のサイトにアクセス。トップページだけは日本語となります。「今すぐダウンロード」をクリックします。
▶STEP2「OS（自分のパソコン）を選ぶ」
次の画面で、WindowsかLinuxかMacかを聞かれるので、自分のパソコンのOSと同じものを選びましょう。初心者の方なら、WindowsかMacのどちらかになると思います。
▶STEP3「アイコンを確認」
ダウンロードしたフォルダを開き、パソコンにインストールが完了すると、デスクトップやダウンロードフォルダにVisual Studio Codeのロゴマークが出てきます。これでダウンロードは完了です。
【手順②】ブラウザを用意しよう
次にWEBサイトを見るための「ブラウザ」を用意します。
開発環境を整え作業する際＝マークアップやプログラミングの作業の際はGoogleの「クローム（Chrome）」というブラウザが最適なので、それを用意しましょう。
もうパソコンに入れてあるという方は、この手順はスキップして大丈夫です。
【手順③】フォルダを用意しよう
デスクトップに「フォルダ」を用意します。
▶STEP1「フォルダを作る」
●Macの場合：デスクトップ上で右クリックし「新規フォルダ」を作成
●Windowsの場合：デスクトップ上で右クリックし「新規作成→フォルダ」で作成
▶STEP2「名前をつける」
フォルダを作成したら「HTML-folder」というフォルダ名にしましょう。
▶STEP3「Visual Studio Code」で開く
ここで「VSCode」ことVisual Studio Codeの登場です。VSCode（以下略称のVSCodeで表記します）のアイコンをクリックして立ち上げてください。
アイコンをクリックして立ち上げると、下の画面になります。
上の画像のオレンジ矢印の箇所「Open Folder」をクリックします。そして先ほど作ったデスクトップ上の「HTML-folder」を指定します。
すると下の画像のようにVSCodeに自分が作ったフォルダが反映されます。
ここまでで、まず「テキストエディタ上でフォルダを開く」という下準備のひとつが完了です。
【手順④】HTMLファイルを作ろう
次は「HTMLファイル」を作成します。
以前別記事ではテキストエディタなしで簡易的にHTMLフォルダを作る手順をご紹介していますが、今回は『Visual Studio Code』を使ってますので、ステップアップしているかたちですね。しかも今回の方法が王道であり、実際にはテキストエディタを使ったほうが作業はとてもラクです。
▶STEP1「New Fileを作成」
下の画像のように「HTML-FOLDER」の右側に出るアイコンから一番左の「New File」を選択してください。
すると下の画像のように入力欄が表示されます。ここに「index.html」と入力しましょう。
これで「index.html」すなわちHTMLファイルが作成されました。
【手順⑤】HTMLファイルをカスタムしよう
いま作ったHTMLファイルに、サンプルのコードを貼り付け、ブラウザで確認するところまでやりましょう。
▶STEP1「コードを貼り付ける」
下記のコードをコピーしてください。
枠右上の白いマークをクリックするとコピーできます。
※ブラウザや環境によっては不要なスペースができることもあるので、あえて下記は左詰めにしています（他記事も原則このスタイルです）インデントは各自でつけてください。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML＆CSSの練習</title> </head> <body> <h1 class="title">自分で開発環境を作ってみよう</h1> </body> </html>コピーしたら、VSCodeの中にある自分が作ったファイル「index.html」に貼り付けましょう。下の画像のようにやってみます。
▶STEP2「保存する」
大切なポイントです。いま貼り付けたコードを保存します。
VSCodeではタブの「●」印が「まだ保存されてない」状態を示しています。下の画像は保存されていない状態です。
保存するには、MacとWindowsでそれぞれ下記の操作を行います。
●Macの場合：「command（⌘）」キーを押しながら「s」キーを押す
●Windowsの場合：「Ctrl」キーを押しながら「s」キーを押す
保存されると、タブには「✕」が出ます。下の画像のようになります。
ここでひとつ不安な方もいると思います。「毎回、手動で保存するの…？忘れたらおしまいってやつ？」と。ご安心ください。VSCodeには「自動保存（Auto Save）」の機能がついています。
当サイト内に別途記事にてシンプルにまとめたので『VSCodeの「自動保存」の方法は？写真付きで解説するよ。』をチェックしておくと安全です。
▶STEP3「ブラウザで確認しよう」
実際に今作っているHTMLファイル（index.html）が、ダウンロードしてあるブラウザ「クローム」で見れるか確認してみましょう。
手順としてはindex.htmlの上で右クリックをし、出てくるメニューの中から「Copy Path」を選びます。下の画像のようにやってみましょう。
特に「コピーされました」などの表示が出ないのでコピーした感触はないかもしれませんが、これでURLがコピーできた状態です。そのまま、ブラウザに貼ってみましょう。
下の画像のように、ブラウザで見ることができるはずです。
▶STEP4「HTMLファイルをいじってみよう」
ここで、VSCodeに戻って「index.html」の内容を変えてみましょう。
例えば下のように、<h1>の
文章を「プログラミングに挑戦しよう」に変えてみます。
▶STEP3「保存する」
保存を忘れずにしましょう。
●Macの場合：「command（⌘）」キーを押しながら「s」キーを押す
●Windowsの場合：「Ctrl」キーを押しながら「s」キーを押す
以上で保存したら、ブラウザを更新してみましょう。下の画像の箇所の回っている矢印をクリックすると、ブラウザが更新されます。変更したテキスト「プログラミングに挑戦しよう」が出れば成功です。
【手順⑥】CSSファイルを作ろう
では次に、CSSファイルを作ってみます。
先ほど作ったHTMLファイルの「見栄え」を変える役目がCSSです。
▶STEP1「CSSファイルを作ろう」
まずVSCode上で「CSSファイル」を作成します。HTMLファイルを作ったときと同じように「index.html」にマウスを当てて「NewFile」を選びます。
そして今回はCSSですので拡張子は「.css」に。ファイル名はわかりやすいよう「sample.css」にしましょう。
下の画像を参考にしてください。
これでCSSファイルの作成は完了です。
▶STEP2「コードを貼り付けよう」
下記のコードをコピーして「sample.css」に貼り付けてましょう。
.title { color: #ff0000; }「sample.css」が下の画像のようになっていればOKです。
▶STEP3「保存する」
保存を忘れずにしましょう。VSCodeの自動保存設定をしておくと保存作業は省けますのでおすすめです。
【手順⑦】HTMLファイルにCSS用のコードを追加しよう
HTMLファイルの中にCSS用のコードを追記します。
これをすることで、CSSからのリクエストを受け取ることができるからです。
▶STEP1「コードをコピーしよう」
下記のコードをコピーします。
<link rel="stylesheet" href="sample.css">▶STEP2「index.html」の<head>〜</head>に貼る
コピーしたコードを「index.html」ファイルのタグ<head>〜</head>タグの間にコピペしましょう。
下記の画像を参考にしてください。
▶STEP3「保存する」
保存を忘れずにしましょう。VSCodeの自動保存設定をしておくと保存作業は省けますのでおすすめ。
【手順⑧】ブラウザを更新しよう
下の画像の矢印の箇所で、ブラウザを更新します。
文字が「赤色」になれば成功です。
CSSファイルの「文字を赤にしてね」というリクエストを、HTMLファイルがキャッチできたので、文字の色が変わりました。
HTMLとCSSの関係性を理解する
今回はHTMLとCSSの関係性を体感できる演習として、ローカル環境での開発環境の構築をやってみました。
内容としてはCSSからのリクエスト「文字を赤にする」とHTML側でキャッチして反映するというシンプルなものでしたが、この連携が今後プログラミングを学んでいくうえでのひとつの基本概念になります。
WEBサイトはHTMLファイルやCSSファイル、JavaScriptファイルや画像ファイルなどが個別に存在し、またサーバーも含めそれぞれが正常に機能する「総合力」で成り立っています。
この記事の内容を試してみたあとは、続編の『【初心者向け実践】WEBページの作り方。セクションとパスを理解しよう。』にもトライしてみましょう。基礎的かつ応用的な理解を深めることが可能です。
基礎を笑う者は基礎に泣く
正確なコードの記述はもちろんですが、大前提としてマークアップ言語やスタイルシート言語、コンピューターに関する「理解」ができていないと、急に複雑化してくるプログラミング学習の途上で行き詰まってしまいます。
例えばGitやGithubのような快適ツールにも無用のビビりを持ってしまったり、プログラミング以外においてもWEBフォントの意義自体もピンとこなかったり。
基礎を「まあ、だいたいでいいでしょ」と軽視すると、つまづくのは確実に「基礎に関わること」になります。スーパーエンジニアたちが当然にように大切にしている基礎力を、初級者がどうして軽視できるのでしょう。
当サイト「メンタレ」では、プログラミングの挫折者の多くは「基礎理解不足」「先を急いで学ぶ昨今の学習方法」「プログラミングスクール側のペースで消化されるカリキュラム」等にあると見ています。
それらの挫折要因を解消できるのが「基礎プログラミングの徹底理解」。
簡単に見えて奥の深い基礎段階のプログラミングをしっかりと学び、後々の成長に確実につなげたい方。一度プログラミングを挫折している方。文系出身でITの世界を警戒している方などにおすすめです。
学費も高く、実績も派手なプログラミングスクールはなんとなく気が引けてしまう方は「メンタレ」を時折活用する経済的かつ効率的なスタイルで、コツコツと学びを重ねていきましょう。
お気軽にご質問、ご相談くださいね。
