【初心者必見】HTML/CSSファイルの作り方を解説

Webページを作成するために必要なツール

テキストエディタ

テキストエディタは1970年代から存在しており、テキストファイルの作成やテキストデータの編集を行うためのアプリケーションです。

テキストファイルやテキストデータとは文字情報のみのファイルやデータのことをいいます。

HTMLやCSSに限らず、プログラミングをする上では必須のツールです。

エディタにはサクラエディタ、秀丸エディタ、Visual Studio Code、Atom、TeraPad、Sublime Textなど様々な種類があります。

世の中には、機能性や視覚効果、拡張性に優れたエディタが多数存在します。

色々とエディタを利用してみて自分に合うエディタを見つけていただければ幸いです。

ブラウザ

ブラウザとはWebページを表示するためのツールであり、今もこの記事をブラウザを用いて閲覧しています。

ブラウザにもいくつか種類があり、カスタマイズや同期などそれぞれ便利な面や機能、特徴が違います。

具体的にはGoogle Chrome、Firefox、Microsoft Edge、Safari、Operaなどがあります。

標準搭載されているものだけでなく、自分が使いやすいと思うブラウザを無料でダウンロードして使うのがおすすめです。

HTMLとCSSでWebページを作成するのに必要な開発環境（エディタ・ブラウザ・サーバー）を整えたい方は「【準備編】HTMLとCSSでWebページを作成するのに必要な開発環境（エディタ・ブラウザ・サーバー）を整えよう」の記事をご覧ください。

HTML&CSS事典を欲しい方必見（kindle unlimitedだと無料で読めます）

HTML&CSSを学びたい方必見

HTMLファイルの作り方

HTMLは文書を構造化するための言語で マークアップ言語といいます。

HTMLではタグというものを使って内容を定義することができます。

タグにはhead要素、body要素、title要素、h1要素など様々なものがあり、これらを組み合わせることでWebページを作成することができます。

HTMLファイルはメモ帳やテキストエディタで作成することができます。

ここではメモ帳でHTMLファイルを作成していきます。

メモ帳を開き、「名前を付けて保存」をクリックすると以下のような画面が表示されます。

ファイル名は「index.html」とします。

文字コードは「UTF-8」として保存をクリックすると完了です。

CSSファイルの作り方

次にデザインを設定することができるスタイルシートファイルを作成していきます。

CSSは作成されたHTMLの見た目や装飾を整えるもので スタイルシート言語ともいいます。

色を付けたり 横幅を指定したり、装飾を行うのがCSSです。

CSSもメモ帳で作ることができます。

スタイルシートファイルを「style.css」という名前で保存します。

文字コードを「UTF-8」として保存をクリックすると完了です。

エンコードについて

文字コードには様々なものがありますが、その中でもスタンダードなのがUnicodeの「UTF-8」です。

日頃、文字コードを意識している方は少ないかと思いますが、コンピューター上で文字を扱うための重要な要素ですので、基本的なことはぜひ知っておきたいものです。

「UTF-8」とは、世界的にも最もポピュラーな文字コードで、Unicode用の符号化方式の1つです。ASCIIで定義している文字を、Unicodeでそのまま使用することを目的として制定しています。

文字コードは「UTF-8」以外にも数多くの種類があります。

UTF-8以外の代表的な文字コードは以下の通りです。

しかし、HTMLファイルとCSSファイルは「UTF-8」というエンコードで保存するのが標準となっています。

UTF-8はASCIIコードとの互換性が良いため、パソコンで扱いやすく、多くのソフトウェアで「UTF-8」が使用されています。

そのため、Webページを作成する時は、エンコードを「UTF-8」にすることをオススメします。

【実践編】レンタルサーバーにファイルをアップロードしてみましょう!

HTMLやCSSで使ったファイルをレンタルサーバーにアップロードすることでインターネット上にWebサイトが公開されます。

今までローカル環境でしか見れなかったWebサイトがインターネット上に公開されるとわくわくしますよね!

余裕がある方はレンタルサーバーにファイルをアップロードしてみましょう。

無料お試し期間もあるので是非レンタルサーバーを利用して学習してみてはいかがでしょうか!?

格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

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

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

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

まとめ