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

HTML/CSSファイルを作成したい人

HTML/CSSファイルを作成したいんだけど、どうすればいいのかな?

上記のようなお悩みを持っている方はいないでしょうか?

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

この記事でお話すること
  • Webページを作成するために必要なツール
  • HTMLファイルの作り方
  • CSSファイルの作り方
  • エンコードについて
  • [実践編] レンタルサーバーにファイルをアップロードしてみましょう!

HTML/CSSファイルを作成したいけど方法が分からないという方はいませんか!?

まずはWebページを作成する必要があります。

具体的にはコンテンツをHTMLでマークアップして、デザインをスタイルシートで設定します。

一般的に、自分のPCで開発をする環境のことをローカル環境、開発する環境を用意することを環境構築と呼びます。

ローカル環境を構築することで、自分のPCさえあればいつでもどこでもHTMLやCSSのコードを書き、Webページ製作を進めることが可能です。

実際に手を動かして、Webページ製作の第一歩を踏み出しましょう。

それではHTML/CSSファイルの作り方をみていきましょう。

気になる方は是非、最後まで読んで頂ければと思います。

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

Webページの開発を進めるために必要なツールは、主にテキストエディタとブラウザの2つだけです。

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

テキストエディタ

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

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

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

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

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

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

ブラウザ

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

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

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

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




2.HTMLファイルの作り方

HTMLファイルの作成手順
  1. メモ帳を開く
  2. ファイルのエンコードの種類を「UTF-8」にする
  3. 「ファイル名.html」で保存する
注意

ここではメモ帳でHTMLファイルを作成していきますが、他のテキストエディタでもHTMLファイルを作成できます。

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

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

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

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

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

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

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

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

HTMLファイルの拡張子について

HTMLファイルの拡張子は「ファイル名.html」または「ファイル名.htm」とします。




3.CSSファイルの作り方

CSSファイルの作成手順
  1. メモ帳を開く
  2. ファイルのエンコードの種類を「UTF-8」にする
  3. 「ファイル名.css」で保存する
注意

ここではメモ帳でCSSファイルを作成していきますが、他のテキストエディタでもCSSファイルを作成できます。

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

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

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

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

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

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

CSSファイルの拡張子について

CSSファイルの拡張子は「ファイル名.css」とします。




4.エンコードについて

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

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

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

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

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

UTF-8以外の代表的な文字コード
  • JIS
  • Shift_JIS
  • EUC
  • Unicode

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

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

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




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

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

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

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

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

おすすめのレンタルサーバー




6.まとめ

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

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

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

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

低価格のサブスク型プログラミングスクール
  • Freeks:月額9,800円で全ての言語が学び放題で、現役のエンジニアに質問し放題
  • DigSkill:かんたん登録ですぐにオンライン学習を始められる! 30日間無料体験も行っています!
  • 侍テラコヤ:月額2,980円で学び放題! 入学特典として、SAMURAI Founder木内の非売品電子書籍をプレゼント!

\格安! 無料カウンセリングを受けてみる!/

FREEKSに申し込む!

\かんたん登録ですぐにオンライン学習を始められる!/
30日間無料体験も行っています!

\入学特典として、SAMURAI Founder木内の非売品電子書籍をプレゼント!/
現役エンジニアとの1時間のレッスンが毎月無料!
最短30秒で登録完了!

侍テラコヤに申し込む!

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

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

コメントを残す

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