2021/2/18 「HTML&CSS辞典」をオープンしました! 是非、ご覧になってください!

[準備編] HTMLとCSSでWebページを作成していくのに必要な開発環境を整えよう!

HTMLとCSSの開発環境を整えたい人

HTMLとCSSでWebページを作成していくのに必要な開発環境を整えたいんだけど、どうすればいいのかな?

この記事は上記のような疑問を解消するものとなっています。

Webページを作成するためにはHTMLとCSSの専用ソフトウェアを購入しないといけないと思う方もいるかもしれません。

しかし、そんなことはありません。

HTMLとCSSはテキストファイルでできており、テキストエディタがあれば誰でも簡単にWebページを作成することができます。

また、作成したWebページがうまく表示されるかチェックするためにブラウザも用意する必要があります。

そこで、ここではWebページを作成するための必要な開発環境を詳しく解説していきたいと思います。

Webページを作成するために必要なツール
  • テキストエディタ
  • ブラウザ
  • サーバー
補足

サーバーは勉強の段階では必要ありませんが、Webページが実際にどのように表示されるのか知りたい方はレンタルサーバーを契約するといいかと思います。

1.テキストエディタ

テキストエディタとは?

テキストエディタはテキストファイルの文字を入力したり、編集したりできるソフトウェアのことです。

テキストエディタの例
  • Visual Studio Code
  • Sublime Text
  • Atom
  • サクラエディタ

Windowsを利用している方であれば「メモ帳」、Macを利用している方であれば「テキストエディット」でテキストファイルを作成・編集できます。

「メモ帳」、「テキストエディット」を利用する方は文字コードの項目を「UTF-8」にすることを忘れずに行って下さい。

文字コードを「UTF-8」以外にすると文字化けが発生する可能性があります。

「メモ帳」、「テキストエディット」でもテキストファイルを作成することができますが、高機能なテキストエディタを利用するといいでしょう。

上記で紹介したテキストエディタはソースコードを読みやすくする機能、入力を簡単にする機能などが搭載しています。

是非、自分に合うテキストエディタを見つけておくことをオススメします。




2.ブラウザ

ブラウザとは?

ブラウザはWebページを閲覧・表示するためのツールです。

ブラウザの例
  • Google Chrome
  • Firefox
  • Microsoft Edge
  • Safari

私たちは何か調べたことがあったら、ブラウザを使って、様々なWebページを閲覧することが多いと思います。

そんなブラウザですが、HTMLやCSSで作ったファイルがどのように表示させるか確認するためにも使用します。

上記で紹介したブラウザ以外にも様々な種類があり、Webページの表示のされ方が異なります。

そのため、それぞれのブラウザでどのように表示されるのかをしっかりとチェックしながら作成することをオススメします。




3.サーバー

サーバーとは?

サーバーはWebページをインターネット上に公開するのに必要です。

勉強の段階ではテキストエディタとブラウザがあれば進めることができます。

しかし、Webページを公開した時、どのように表示されるのか知りたいという方は上記で紹介したレンタルサーバーを利用してみることをオススメします。




4.テキストエディタとブラウザを利用してHTMLとCSSを勉強しましょう!

テキストエディタとブラウザが準備できたら、HTMLとCSSの勉強ができます。

途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

以下のような本を一冊もっておくと何か分からないことがあったら便利です。(kindle unlimitedに会員登録をすると無料で読むことができるのでオススメです。)

以下の本はより実践的な内容になっているので、もっとHTML&CSSを学びたい方は取り組んでみることをオススメします。

他にもHTML&CSSを学ぶことができる教材を知りたい方は以下の記事もご覧になってください。

[初心者・中級者向け] HTML & CSS を学ぶことができるおすすめの本 [必見!] Udemy(ユーデミー) おすすめのHTML/CSS講座

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です