このシリーズはHTML,CSS初心者が基本的なWebぺージを製作できるようになることを目的としています。
なので、すでにHTML等が難なく書ける方、基本は熟知している方は時間の無駄になるかもしれません。
完全初心者の方でもきちんと習得できるよう丁寧に解説していこうと思いますので、習得したい方はパソコンとやる気だけ必ず用意してください！
また記事もできるだけ高い更新頻度で投稿できるよう頑張りたいと思います。
環境を整える
おそらくこの記事をよまれている方はパソコンを持っていると思います。
そこで編集環境や実行環境を構築していきます。
編集環境
プログラムを記述するためのテキストエディターが必要になります。
今回はさまざまあるテキストエディターの中から「Sublime Text」を使おうと思います。
理由は特にありませんが、シンプルで使いやすいのでこれを使っていきましょう。
※他にエディターをすでに使用している方はそちらでも構いません。
Sublime Textをインストールする
まずは「Sublime Text」のダウンロードぺージにアクセスします。
ダウンロードぺージはこちら「Sublime Text｜Download」
ここで自分のパソコンがWindowsかMacでダウンロードの手順が違います。
【Windowsの場合】
こちらのリンクをクリックしてダウンロードを行いましょう。
ダウンロード完了後ダウンロードしたファイルを探します。
次に「このアプリがPCに変更を加えることを許可しますか？」という注意書きが出てくるので「はい」をクリックします。
そして「NEXT」をクリック。
この画面では「Sublime Text」のインストール先を決めます。
特にこだわりのない方はそのまま「NEXT」をクリックしてください。保存場所は C ＞ Program Filesの中にインストールされます。
保存場所を変えたい方は「Browse...」で変更してください。
最後にこちらにチェックを入れるところがあります。
このチェックを入れると、ファイルを右クリックしたときに 「Sublime Textを開く」という欄が追加されます。
好みの問題ですがチェックしておいてよいでしょう。
次画面で「Install」をクリックすると一瞬でインストールが完了します。
起動する際は先ほどダウンロード先に指定したフォルダに行き「Sublime Text.exe」をクリックすると起動します。
「Sublime Text.exe」を右クリックしてタスクバーにピン止めすると今後使いやすくなります。
【Macの場合】
こちらのリンクをクリックしてダウンロードを行いましょう。
すると「Sublime Text ～」という名前のファイルがダウンロードされます。
ダウンロードが終了したら「Applications」フォルダにダウンロードしたファイルをドラックアンドドロップして終了です。早い。
起動する際はFinderからアプリケーションフォルダ内にある「Sublime Text」を実行するだけです。
実行環境
続いて実行環境について、実行環境と言っても作成したhtmlファイルをブラウザ上で表示するためのものです。
InternetExploereやChrome、FireFox、safariなどがあります。
今回はその中でも「Google Chrome」を使っていこうと思います。
理由はたくさんありますが、大きな要因としてデベロッパーツールというものがあり、webぺージを作成する上で非常に便利な機能がついているからです。
これに関しては以下で少し説明したいと思います。
なので今回は「Google Chrome」をインストールしていきましょう！
※すでに使用しているという方はこの項は飛ばしてください。
Google Chromeをインストールする
インストールされていないかたはこちらからダウンロードぺージにアクセスすることができます。
「Google Chrome｜ダウンロード」
またWindows、Mac、Linux向けにそれぞれインストール方法が公式サイトにあったのでそちらをご覧いただくと確実にインストールすることができます。
「Google Chromeのダウンロードとインストール」
インストールが完了すると環境準備は終了です！お疲れさまでした！
Chromeのデベロッパーツールとは
上記画像のように、Chromeでサイトを開いているときに右上の設定タブの「その他のツール ＞ デベロッパーツール」と進んでいただくと見つかるかと思います。
こちらはこのサイトがパソコン以外にタブレットやスマホだと実際にどのように見えるか知ることができます。
そして画面右にはそのぺージがどのようにプログラムで書かれているか表示してくれます。
他にも使う用途はまだありますが、とても便利であることがわかります。
今回のまとめ
まだ実際にHTML,cssに触れていないため何の手ごたえもないかもしれませんが、環境構築は何をするにしても必要な作業なのでしっかり行いましょう。
次回からみっちりププログラムを書いていくので一緒に頑張りましょう！
ここまで読んでくださりありがとうございます。