【初心者向け】プログラミングを学ぼう！HTML&CSS編

こんにちは。引地啓です。

今回はWebの作成に欠かせないHTMLとCSSについてまとめました。

HTMLとは

HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。

普段、windowsであれば「Internet Exproler」や「Microsoft Edge」、Macやスマホだと「Google Chrome」「FireFox」などのブラウザを起動して、Webサイトを見ますが、そのWebサイトのほとんどがHTMLで作れています。

Webサイトを開いた状態でキーボードの「F12」をクリックすると、以下のような画面が右側に表示されます。

真ん中の英文を「ソースコード」といい、ソースコードはHTMLで構成されています。

このソースコードをブラウザが読み込んでページが見れるようになっています。

Hyper Text（ハイパーテキスト）

ハイパーテキストとは、高性能なテキストという意味です。

HTMLに、文章中にリンクを張って、他のページに飛ぶことができます。この機能をHyper Text Link（ハイパーテキストリンク）といいます。

HTMLの種類

HTMLの種類には「HTML」「HTML5」「XHTML」など、いくつかあります。

使えるタグに違いがあり、使いたいタグによって使う種類が違います。

HTMLファイルを作成する

HTMLのファイルを作成するときには、ファイル名の後ろに「.html」と拡張子を付けます。これを付けることで、HTMLファイルであることをコンピューターが認識してくれます。よく使う名前が「index.html」です。indexの部分は何でもいいです。適当に作ってみます。

①デスクトップにフォルダを新規作成

②フォルダ内でテキストを新規作成

③作成したファイルの名前を「index.txt」に変更します

④index.txtを開くとメモ帳が開きます。メモ帳にコードを書きます。
HTMLのソースコードは基本が決まっています。

⑤保存する際、下の文字コードを「UFT‐8」に変更して保存します。これをして文字化けを防ぎます。

⑥ファイルの拡張子を「html」に書き換えます。

⑦index.htmlを開くと、ブラウザが起動し、書いた内容が反映されていたらOKです。

このように、ブラウザ上で文字が表示されます。しかしこれはあくまでファイルをブラウザ上で表示させているだけで、Web上には公開されていません。Webで公開するにはこのファイルをサーバーにアップロードする必要があります。

公開する方法はのちに別記事にまとめます。

エディタを使う

上記に書いたのは、メモ帳にソースコードを書く方法ですが、ソースコードを書くための「エディタ」という便利なソフトがあります。

HTMLを書く上で大事なのがエディタ選びです。ソースコードを書きやすく、分かりやすくなっているソフトで、無料で使えるものばかりですので、これからプログラミングを始めようと思っている人は、エディタ選びにも少しこだわってみてはいかがでしょうか。

おすすめのエディタに関しては、また別の記事で紹介したいと思います。

CSSとは

次にCSSです。CSS（Cascading Styly Sheets　カスケーディング・スタイル・シート）とは、Webページのスタイルを指定するための言語です。

HTMLと組み合わせて使用する言語で、Webページ内での文字の色、サイズ、レイアウトなどの表示スタイルうあ、印刷する際の出力スタイル、音声で読み上げられる際の再生スタイルなどを指定することが出来ます。

詳細はまた次回の記事で書きます。

最後まで見ていただきありがとうございます。

今後ともよろしくお願いします。

またお会いしましょう。