皆さんおはこんばんにちは。
今回はパソコンでHTML,CSSを用いてコードを書き、ウェブを制作するための方法を、徹底解説していきます。
この記事を見ればパソコン1つでウェブ制作ができるようになるので、わからない方は是非読んでください。
パソコンでHTML,CSSを用いてウェブ制作・コードを書く方法
実際にプログラミング学習をして、ある程度知識が身についてきたら自分でコードを書いてウェブを制作してみたくなりますよね！
また、自分で手を動かし実際に作ってみることで勉強にもなりますし、実力もつきますからね。
ということで今回は、HTML,CSSを勉強してある程度の知識を持っている方がパソコンで実際にウェブを作っていく方法、というものを解説していきます。
まだ、HTML,CSSの勉強ができていない、という方はプログラミング学習のサービスを使って勉強するとスムーズにプログラミングの学習をすることができますよ。
以下の記事にて、おすすめのプログラミング学習サービスをまとめた記事を貼っておきますので、参考にしてみてください。
それでは早速いきましょう。
１. パソコンでHTML,CSSを書くための下準備
パソコンでHTML,CSSを使ってウェブを作っていくためにはいくつか準備をしていかないといけません。
予備知識として以下のことは理解しておきましょう！
自分のパソコンでHTMLとCSSのコードを書き、Webページ開発をする方法を紹介。一般的に、自分のPCで開発をする環境のことをローカル環境、開発する環境を用意することを環境構築と呼びます。ローカル環境を構築することで、自分のPCさえあればいつでもどこでも（インターネットに接続していなくても可能）HTMLやCSSのコードを書き、Webページ製作を進めることが可能です。
ということで、開発の環境を用意することで自分のパソコンでHTMLとCSSのコードを書き、webページの開発をすることができちゃうのです。
つまり！時間や場所に縛られず、webの製作ができる…これを仕事にできたら最高ですよね。
私は家で仕事がしたいと思い、ググりまくって様々なものを調べたのですが、将来的に見てもプログラミングを勉強しておけば間違いないな。と感じたので今にいたっています。
少し話がそれましたが、そういうことです。
また、開発環境を用意するにあたって、最低限のHTMLとCSSの基礎知識が必要です。ですのでまだ何も勉強していない！という方は少し基礎を勉強してからやってみましょう。
以下にプログラミング学習をするにあたってのおすすめのサービスを紹介している記事を載せておきましたので、プログラミング学習をしてみたい！と考えている方は参考にしてみてくださいね。
それでは、開発環境の用意の仕方を見ていきましょう。
２. HTML,CSSの開発環境を用意する
それでは早速やっていきましょう。
まず、webページの開発をするにあたって必要なツールが2つあります。１つ目がテキストエディタで２つ目がブラウザ。このふたつがあれば開発することができます。
ということでまずは、テキストエディタから用意していきましょう。
２.１ テキストエディタを用意する
まず、テキストエディタがどんなものかというと、簡単に言うとコードを入力する部分ですね。これはプログラミングをするにあたって必須のツールですので覚えておいてください。
もちろん、いろんな種類のテキストエディタがありますが、特にこれがいい！というこだわりがなければ様々なシーンで使われていたり、幅広いエンジニアが使っている『Atom』というエディタを紹介します。
無料で使用できるのでその点も安心ですね。
ここからは実際に『Atom』をパソコンにインストールする方法をご紹介します。
既にインストールしている方は飛ばしてしまいましょう。
インストールが完了したらさっそくAtomを起動してみましょう。以下の画面が表示されたらAtomの導入は成功です。
テキストエディタが用意出来たら、次はブラウザを用意していきましょう。
２.２ ブラウザを用意する
ブラウザはwebページを表示するためのツールですので、これも必須ですね。
今見ているこの画面も、ブラウザを使って閲覧しているわけです。無意識のうちに使っていますよね。
Windowsでは標準で「Internet Explorer」または「Microsoft Edge」がインストールされているはずですが、プログラミングをしていく際に「Google Chrome」というブラウザを使うと便利な場面が出てくるので、この機会にインストールして使っていきましょう。
ここからは実際に「Google Chrome」をパソコンにインストールする方法をご紹介します。
既にインストールしている方は飛ばしてしまいましょう。
Google Chromeの公式ページ（ https://www.google.co.jp/chrome/ ）にいきましょう。すると画面中央に青いボタンで「Chromeをダウンロード」をクリックして、インストールに必要なファイルをダウンロードします。
ダウンロードが完了したらそのファイルを開いて、インストールを完了させましょう。以下のような画面が表示されたらGoogle Chromeの導入は完了です。
これで「テキストエディタ」と「ブラウザ」が用意出来たので、ついにwebページの開発をする準備が整いました＾＾
それでは次は、実際にwebページの開発をしていきたいと思います。
３. 実際にwebページの開発（製作）をしていく
ここからは、webページの開発をしていくために２.の項目で用意したふたつのツールを使っていきます。
まずはこれから作成するHTMLやCSSを書いて作成したファイルを、まとめるフォルダを作っていきます。
①作業フォルダの作成
デスクトップ上で右クリックをすると一覧が出てくるので、そこから「新規作成」→「フォルダー」の順にクリックして新規フォルダを作成します。名前はわかりやすいものにしておきましょう。（例：今回はHTML、という名前でやっていきます。）
この作成したフォルダを『Atom』で開きます。
Atomを起動して、画面の左上にあるメニューバーから「File」をクリックして、下に出てくる一覧から「Open Folder…」をクリックします。
そうしたらファイルを選択する画面が出てくるので、先ほど作成したHTMLフォルダーを選択します。（見つからない場合はフォルダー名を打つか、保存場所のデスクトップから探しましょう。）
そうすると左側に「Project」という欄ができ、先ほどのHTMLというフォルダーが追加されたと思います。
これでAtomでフォルダを開くことができたので、次はHTMLやCSSのファイルを作成して実際にコードを書いていき、webページを作成できるようにしていきます。
②HTMLファイルの作成
HTMLのコードを書いていくファイルを用意していきます。
先ほど表示したサイドバー「Project」にあるHTMLフォルダーの上で右クリックをして、「New File」を選択します。
そうすると画面中央に入力欄が表示されるので、そこに「index.html」と入力して、エンターキーを押し、ファイルを作成します。
HTMLフォルダーの下に表示されればおっけいです。さらに、右側のバーに「index.html」という表示が増えたことも確認してください。
ファイル名を間違えた場合は、サイドバーで変更したいファイル名の上で右クリックをし「Rename」を選択すればファイル名の変更が可能です。
これでHTMLのファイル作成は完了です。
最後にしっかりと作成できたか、確認作業を行いましょう。
以下のコードを作成した「index.html」にコピー＆ペーストして貼り付けてみましょう。右側の部分に貼り付けます。
<html>
<head>
<link rel=”stylesheet” href=”stylesheet.css”>
<meta charset=”utf-8″>
<title>HTMLファイル</title>
</head>
<body>
<h1 class=”title”>HTMLファイルの確認作業</h1>
</body>
</html>
貼り付けたら「index.html」と書かれたバーの部分に青い丸が表示されていると思います。これは新しくコードを入力したら表示されるのですが、上書き保存がされていない、という状態を表しています。この青い丸の表示が消えれば、画面上のコードは保存されたということです。
ですので保存の仕方を教えます。「Ctrl」キー＋「S」キーを押すことで保存することができます。
オートでは保存してくれないので、こまめに保存することが非常に大事です。癖をつけて保存のし忘れに気をつけましょう。何かあってからでは遅いです…打ったコードが消えるとけっこうメンタルやられますので。笑
それでは先ほど入力したコードが反映されていることを確認しましょう。
デスクトップ上に一番最初に作成した「HTML」というフォルダーを開いて、その中にある「index.html」の上で右クリックをし「プログラムを開く」という項目を選択して、「Google Chrome」を選択してください。
そうするとGoogle Chromeが立ち上がり、画面が表示されます。
これが「index.html」に入力されたコードの表示結果になります。以下の画面が表示されれば成功です。
そうしたら次はCSSファイルの作成をしていきましょう。
③CSSファイルの作成
今度はCSSのファイルを用意して、先ほど入力したHTMLに装飾をしていきましょう。あと少しで一通りが完成します。
まずは、Atomのサイドバーにある「HTML」のフォルダの上で右クリックをして「New File」を選択します。
入力欄が表示されたら「stylesheet.css」というファイル名を入力してエンターキーを押しましょう。そうしたら右側にある「index.html」という欄の横に「stylesheet.css」という欄が追加されたと思います。
そこに以下のコードを貼り付けてみましょう。
そうすると先ほどのHTMLの時と同様に、Google Chromeが立ち上がると思います。そして文字の色が変わっていることを確認してください。
これでCSSファイルの作成は成功です。
HTML,CSSの環境開発が完了
これにて、HTML,CSSの環境の構築が終わり、webページの開発ができるようになりました。
あとは実際にコードを打ち込んでいき、webページの制作を楽しんでいきましょう！
プログラミング学習は難しいことも多いので、少しでもあなたの力になれたら幸いです。
それではまたどこかの記事でお会いしましょう。
see you next time.
コメント