初心者でもわかるHTML&CSS講座　第1回HTML,CSSの概要

こんにちは、koheiです。

今回HTML,CSS講座ということで、何回かに分けてHTML,CSSについて説明していきます。
この講座の特徴は、復習を兼ねた演習問題と解答例をダウンロードできます。
（※そのうち動画解説も付ける予定ですので、しばしお待ち下さい。。）
（※動画解説追加しました。）
HTML,CSSを覚えるには、実際に手を動かして覚えるのが一番です。
ぜひ、チャレンジしてみてくださいね！
まず第1回目の記事は、HTML,CSSの概要を説明していきます。
さっそくいってみましょう！

動画解説

【更新情報】2018年10月21日動画解説を追加しました。
動画による解説です。記事内容と合わせて参考にしてみてください！

ホームページの仕組み

HTML,CSSを学びたいということは、最終的にホームページ(Webサイト)を作ってみたいという方がほとんどだと思います。
そこで、まずは、「ホームページってどうやって表示されるの？」というとこから説明していきます。これから、HTMLを学んでいく上で、ざっくりホームページがどういう仕組みで表示されるのかは把握しておきましょう。

みなさんが使っているパソコンでブラウザ（Chrome,FireFox,IEなど）を起動して、あるホームページのURL(アドレス）入力し、ホームページを閲覧したときの仕組みを見てみましょう。

超ざっくり説明すると以下のような流れになります。

普段意識することはありませんが、パソコンでホームページを閲覧するとき、私たちのパソコンとサーバーで上記のような情報を高速にやり取りしているのです。

HTML,CSSとは？

HTML

HTMLとは、Hyper Text Markup Languageの略でホームページ（Webサイト）を作るためのマークアップ言語です。

具体的には、タグを呼ばれる特別な記号で文章を囲み、文章に意味を与えていきます。このひとかたまりを要素といいます。ブラウザは、このタグの意味を解釈し、ホームページを表示してくれるのです。

以下の2つを比べてみましょう。
左は単なる文章が書かれたテキストファイルです。右はタグで囲んだHTMLファイルです。
ブラウザから見れば、左側は単なる文字情報にすぎません。右側は、タグで文章に意味が与えられていますのでブラウザがその意味を解釈して表示をしてくれます。

CSS

HTMLとセットで使用されるのがCSSです。
CSSはCascading Style Sheetの略で、HTMLを修飾（デザイン）する仕組みのことです。

以下の2つを比べてみましょう。

左は、HTMLファイルのみでCSSを適用していないもの、右がHTMLファイルにCSSを適用したものです。
HTMLファイルだけでも、ブラウザがタグの意味を理解し、ある程度の装飾はしてくれますが、最低限の装飾です。本来、自分が意図したものに装飾するためには、CSSファイルを作って、デザインしていく必要があるのです。

必要なものを準備しよう

これからHTML,CSSを学習するために、最低限以下のソフトウェアを準備しましょう。

●テキストエディタ
●ブラウザ

上記のソフトウェアがあれば、自分のパソコン上だけで表示されるホームページが作れます。
※ちなみに、作ったホームページをネット上に公開したい場合は、別途サーバー、ドメイン、FTPツールなどが必要です。ここはまたの機会に紹介します。

テキストエディタ

HTMLやCSSのコードを書いていくためのツール「テキストエディタ」を準備しましょう。フリーで使えるものが沢山あります。※Windowsの標準アプリ「メモ帳」でもOKです。（つかいにくいですが。。）
私は、Atomというエディタを使っています。他では、VisualCodeがおすすめです。
自分に合ったエディタを準備しましょう。

Atomダウンロードサイト
Visual Studio Codeダウンロードサイト

ブラウザ

この講座では、主にGoogleのChromeを使います。
Google Chromeダウンロードサイト

他にも、FireFox、Microsoft Edgeなど普段使用しているブラウザで問題ありません。

HTMLの基本構造を理解しよう

以下の「第1回 HTMLCSS講座」をダウンロードしてください。

第1回 HTMLCSS講座

1 file(s)   406.34 KB

Download

ファイルを解凍したら、フォルダの中に「00_サイトひな形」というフォルダがあります。この中にホームページを作るためのHTMLファイルとCSSファイルのひな形を入れています。
フォルダ構成は以下のようになっています。

index.htmlにホームページの内容（コンテンツ）を書いていきます。
cssフォルダの中には、style.cssというファイルがあり、これにホームページの装飾（デザイン）を定義していきます。
imageフォルダには、ホームページに張り付ける画像などのファイルを保管します。

さっそく、index.htmlというファイルをテキストエディタで開きましょう。以下のようなコードが書かれています。

HTMLは、基本的に上記の①〜④の構造で記載していきます。
①DOCTYPE宣言
このファイルは、HTML5で作成しています！というのを宣言しています。
おまじない的に覚えて必ず記載しましょう。
※この講座では、HTMLのバージョンは、HTML5で話を進めます。

②htmlタグ
htmlファイルは、必ずhtmlタグで囲みます。終了タグを忘れないように注意してください。また、htmlタグの横にlang=”ja”と書かれています。これは、日本語のサイトだということを示しています。これもおまじない的に覚えましょう。

③headタグ
ヘッダー要素といって、実際ホームページ上に表示されるわけではなく、ホームページに必要な色んな設定を書きます。とりあえず、今回は最低限の以下を覚えましょう。

• meta charset ・・・UTF-8という文字コードを設定しています。ここもおまじない的に覚えてしまいましょう。
• title ・・・ブラウザのタブに表示されるタイトルを記載します。
• スタイルシートの指定・・・リンクタグで、スタイルシート(CSSファイル）を指定しています。

④bodyタグ
bodyタグ内にページの内容を記載していきます。
ちなみに、<!–と–>で囲んだ範囲がHTMLのコメントになります。コメントの部分は、実際にブラウザには表示されません。

簡単なページを作ってみよう

さっそく、簡単なページを作ってみましょう。
ダウンロードしたフォルダの中に「01_簡単なページ」というフォルダがあります。その中のindex.htmlに以下の黄色いマーカー（10行目、11行目）を追加してみましょう。

h1タグは、見出し１（大見出し）です。
pタグは、段落を表すタグです。どちらも終了タグを忘れないようにしてくださいね。書き終えたら、ファイルを保存して、index.htmlをダブルクリックしてみてください。
以下のようにブラウザで表示できれば成功です。

見出しと段落

先ほど登場したh1タグ（大見出し）ですが、見出しタグは、h1〜h6まで指定できます。
イメージとしては、h1タグはページ全体のタイトルで、h2〜h6は、ページ内の章ごとに中タイトル、小タイトルに付けていくイメージです。
ダウンロードしたフォルダの中に「02_見出しと段落」というフォルダがあります。その中のindex.htmlに以下のコードを記載してみましょう。(10行目〜16行目）

使い方は、さっきのh1タグと同じですね。これも終了タグを忘れないように注意してください。
index.htmlをダブルクリックしてブラウザで開いてみましょう。

h1〜h6タグ、pタグで囲った文字のサイズが違うことがわかると思います。
これは、cssを書かなくても、ブラウザが自動でタグを認識してくれて、デザインを変更してくれているんです。

画像を配置する

次にホームページに画像を配置してみましょう。
画像を配置するには、imgタグを使います。imgタグには、srcとaltという２つの属性を指定します。
※imgタグには、終了タグはありません。

src属性には、配置したい画像のファイルを指定します。
alt属性は、もし画像が表示されなかった場合に代替となる文字列を記載しておきます。

早速練習してみましょう。
ダウンロードしたフォルダの中に「03_画像」というフォルダがあります。その中のindex.htmlに以下のコードを追加してみてください。(10行目〜14行目）12行目で画像を配置しています。配置する画像は、imagesフォルダ内にあるsample.jpgを指定しています。

index.htmlをダブルクリックしてブラウザで開いてみましょう。

画像がちゃんと表示されたら成功です！

今回出てきたHTMLタグまとめ

今回登場したHTMLタグを整理しておきます。

演習問題

最後に、今日学んだことを復習しましょう。
ダウンロードしたフォルダの中に「04_演習問題」というフォルダがあります。以下のようなホームページが表示されるように、index.htmlにコードを追加してみてください。
[補足]
・画像ファイルは、「04_演習問題」のimagesフォルダに入っています。
・トップタイトルの「サンプルページ」は、h1タグを使用します。
・「このサイトについて」、「お問い合わせ」の見出しは、h2タグを使用します。

いかがでしょう？
今回説明した見出しタグやimgタグなどを使えば簡単ですね。
※解答例は、「05_第1回演習解答例」に入れています。参考にしてみてください。

最後に

以上、第1回HTML&CSS講座でした。
今回は概要ということで、基本的なところを説明していきました。
今回の講座で少しでもHTMLの雰囲気が掴めていただけたら幸いです。
なるべく早めに第2回も公開したいと思います。

それでは！！

スポンサーリンク