超初心者向け！HTMLとCSSの基本を学ぶ：その①

どうも！職業訓練生のがっちゃんです！

　ただいま、「情報セキュリティ管理者資格コース」を絶賛受講中です！ここでは職業訓練で学んだことを復習がてら掲載しています。このコースの受講を検討中の方への参考になればと思います。

　今回は「HTML」と「CSS」の基本について学んだことをお伝えします！「その①」と「その②」とに分かれていますので、どちらも見ていただければ幸いです！

HTMLって、なんぞ！？

　「Hyper Text Markup Language」の略称で、ホームページを作るときに使うヤツです。「マークアップ言語」という、タグで囲んで構造を表現する目印をつけるルールのことです。仲間に「XML」とかいうヤツもいます。

　今回は、コードエディタ「Visual Studio Code」を使いました。無料のソフトですが、コードを入力するときに「このコードを使う！？」「このフォルダのこのデータを使う！？」みたいに入力補助をしてくれて、とても便利です。

　他にも「Dream Weaver」(ドリームウイーバー：有料。Macでよく使われるらしい)とか「Atom」（アトム：無料）とかも入力補助をしてくれて快適にコード入力できます。「サクラエディタ」「ノートパッド」（いずれも無料）でもコード入力できますが、入力補助とか便利機能はありません。

　「Visual Studio Code」をインストールしたら「拡張機能」から、コマンドを日本語表示してくれる「Japanese Language Pac for Visual Studio Code」と、HTMLコードをブラウザで表示できる「View In Browser」をインストールしておくことをオススメします！

ディレクトリ（フォルダ）の作成

　まずは、サイトで使用するデータをまとめるためのフォルダを作成します。一般的にはユーザディレクトリに「www」「htdocs」という名前でフォルダを作成するそうです。MacOSの場合、ユーザディレクトリに「Sites」というフォルダがあり、その中に作成します。今回はWindowsマシンで以下のようにフォルダを作成しました。お好きな場所（デスクトップでもＯＫ）にお好きな名前で、気軽に作成してください。

index.htmlファイルの作成

　「visual Studio Code」を開き、作成したフォルダ、ここでは「brog」フォルダを開き「index.html」というファイルを作成します。

下図の黄色いアイコンをクリックします。

　下図の黄色いところに「index.html」と入力すれば「index.html」ファイルの完成です！

ＨＴＭＬの基本構造

　これを入力しないとホームページとして表示されません。イチから入力すると大変ですが、入力補助があればチョーカンタンです！

　それではコードを入力していきましょう！なんかワクワクしますね！では「html」と入力してみてください。「ht」だけでもいいですよ。すると、以下のように入力補助が出てきますので、「html5:」を選択してください。

　あら不思議！ＨＴＭＬの基本構造が出来上がりました！

それぞれ簡単に説明すると以下のような感じです。

　これでホームページが表示されちゃいます！ではさっそく！bodyタグ内に文字を入力していきましょう！

開始タグと終了タグ

　表示したい文字を「開始タグ」（<  >）と「終了タグ」（<  />）で囲みます。終了タグには「/」がつきます。タグの中には「属性」（表示させるための設定）をあらわす英数字を書きます。たまに終了タグが必要ないものもあります。

見出しタグ

　見出しタグ（heading）には、<h#>を使います。<h1>から<h6>まであります。一番大きな見出しが<h1>で<6h>が一番小さい見出しです。

　見出しの数字には意味があります。大きなものから順番に使います。表示される大きさだけで判断するのは間違った使い方です。ｈ１タグはホームページタイトルになるため、１Webページに１回だけ、ｈ２～ｈ６は何回でも使用できます。

　それでは「body」タグの中に、以下の例を入力して表示してみましょう。

　これまた例の入力補助を使うとカンタンに入力できます！「h」と入力すれば、以下のように入力候補が出てきますので「h1」を選択すれば・・・、

　このように入力が完了します。あとはh1タグの間にはさむように、「これは見出しh1です」と入力すればOKです！

　同じように入力していきましょう。入力完了したらショートカットキー「ctrl」+「s」で上書き保存しておきましょう。下図中央上のファイル名の横に「●」が付いているのは「保存できてないよ」の合図です。「ファイル」→「保存」でもいいのですが、ショートカットキーを使えば、なんかプロっぽいでしょ！？保存もパパッとできますしね。入力して保存したら「View In Browser」でブラウザ画面で表示させてみましょう。画面左側に表示されているファイル名「<>index.html」の上にマウスを持っていき「右クリック」すると「View In Browser」のコマンドが出てくるので選択して下さい。

そうすると、こんな感じでブラウザ画面に表示されます。

　私は、はじめて自分の書いたコードがブラウザで表示されたとき、感動しちゃいましたもんね。でもって余計な文字をいっぱい入力して遊んじゃいましたよ。皆さんもはじめてのときは感動していろいろ文字を入力してませんでしたか！？

段落タグ

　段落（paragraph）タグは、＜ｐ＞で表します。＜ｈ＃＞タグと＜ｐ＞タグで囲まれた内容は改行されます。

コメント

＜！－－　と　－－＞ で囲んだ文字などはコメントになり、ブラウザに表示されません。何のコードを書いたのかをメモするのに使用します。

画像の表示

　画像を表示するには＜img＞タグを使います。src（ソース）属性で画像ファイルの場所を指定することで画像を読み込み、画面表示させます。＜img＞タグは開始タグのみで、終了タグがありません。終了タグがないタグは、開始タグの後ろに「/」を付けます。省略しても大丈夫です。widthは画像の横幅、heightは画像の縦幅を決める属性です。ほかにも画像の説明を書き込む「alt」属性があります。

リンクの作成

　リンクとはWebサイト上で他のファイルの住所（URL）を表すもののことです。リンクを作成するにはテキストを＜a＞タグ（アンカータグ）で囲みます。＜a＞タグにはリンク先を指示するhref属性を記載します。タグと属性は半角スペースで区切ります。属性の値はダブルクオート（”）で囲みます。＜a＞タグに囲まれた内容をアンカーテキストと言います。「target=”_blank”」を指定することで新しいウインドウ（タブ）でリンク先のwebページが開きます。

リスト（箇条書き）を作る

　リスト（箇条書き）とは、「・」や「番号」を使っていくつかの項目をひとつひとつ書き並べることです。リストを作成するには「＜ul＞タグと＜li＞」（先頭に「・」をつけてリスト作成）もしくは「＜ul＞タグと＜ol＞」（先頭に「番号」を付けてリスト作成）いずれかのセットで使います。

　今回も入力補助を使えばあっという間にコードを書くことが可能です。「ul>li*5」と入力して「enter」キーを押せば・・・、

あっという間に出来上がります！入力補助、ありがとう！！

　今回のように「＜ul＞」タグの中に「＜li＞」タグが入っていることを「入れ子構造（ネスト）」と言います。コードを書く場合、上の例のように、子の要素（「＜li＞」）をインデント（字下げ）して書くことによって読みやすく、見やすくしてあげます。

強調

　ある文字を強調したい場合は、＜strong＞タグを使用します。

内部リンクへのパス

　パスとは、現在のファイルから目的とするファイルまでの道筋を表現するものです。フォルダ（ディレクトリ）の区切りには「/」を使用します。コンピュータにファイルの場所を伝えるためにパスを書く必要があります。

同じサイト内のファイルや画像にリンクを張る場合（内部リンク）

　基準のページ「apple.html」で「apple.png」画像を使いたい場合、「../img/apple.png」と書きます。「../」は、１つ上の階層のディレクトリ（フォルダ）を示します。このような記述を「相対リンク」とか「相対パス」と呼びます。

　ちなみに同じ階層（カレントディレクトリ）の場合は「./」と示します。「./」は省略しても構いません。

https://webliker.info/78726/　より画像引用

　では問題です。次の図で「index.html」で、「lemon.png」を使いたい場合、相対リンクはどのように書けば良いでしょうか？

答えは「./img/lemon.png」もしくは「img/lemon.png」となります。

別のサイトのファイルにリンクする場合（外部リンク）

「http://」から始まるURLでリンクさせます。このような記述を「絶対リンク」とか「絶対パス」と呼びます。

特殊な文字の入力（文字実体参照）

　HTML上で「記述ができない」「入力が困難」な文字をブラウザに表示させるためのテクニックです。実体参照で書くことで、タグとして扱われないようにするということです。

実際にWebサイトを作成してみる

　今までのことを踏まえて、これから実際に「クジラカフェ」という架空のWebサイトを作成してみましょう。

事前準備

　Webサイトのデータを管理するディレクトリ（フォルダ）を作成します。今回は「cafe」というフォルダを作成します。

　「cafe」ディレクトリ内に「images」というディレクトリを作り、サイトで使用する画像を入れておきます。サイトで使用する画像は、以下の４つをダウンロードしてください。

クジラカフェのロゴマーク

サイトのキービジュアル

フッターライン

地図

メニューバー

トップページ「index.html」を作成する

　コードエディタ「Visual Studio Code」で、先ほど作成した「cafe」ディレクトリ内に「index.html」というファイルを作成します。内容は以下の通りに入力していきます。

※<head>内に、「その②」で作成するCSSファイルを適用させるためのリンク（<link rel=”stylesheet” href=”./style.css”>）をあらかじめ書かせてもらっています。ご了承ください。

今回新しく出てきたタグ

「index.html」の入力、お疲れさまでした！見慣れないタグが出てきましたね。それらについて少し説明しておきます。

要素のグループ化

　これから後半戦で出てくる「CSS」というWebページのレイアウトやデザインを整えていくものを使用する場合、複数の要素（タグ）をグループにしておく必要があります。グループ化に使うタグが「＜div＞」（ディブタグ）です。「index.html」では３か所書き加えています。

　「＜div＞」タグを追加して要素をまとめただけですので、今はまだブラウザで見ても、変化はありません。「＜div＞」タグに合わせてインデントしています。これによりHTMLを見やすくすると同時に記述ミスを減らす効果があります。

要素に名前を付ける

　要素をグループ化しましたが、それぞれのグループに名前を付けて区別することにより、特定の要素にだけCSSを反映させることができます。

　タグに名前をつける方法の一つが「class」（クラスセレクタ）です。

まとめ

　以上、ＨＴＭＬの基本でしたが、皆さん、いかがでしたか？Webページの作成って、そんなに難しくないですよね！？え！？今風な、画像がスライドするヤツとか出てけえヘンかったけど、あれはどないするって！？サイドバーとかも欲しいって！？

　それはまぁ、初心者にはちょっと手が負えないわけで、また次の機会ということで！

　次は、ここで作成した「index.html」をＣＳＳで、レイアウトやデザインを整えていきたいと思います。その②に続く、ということで！

それでは本日も最後までお付き合いいただき、ありがとうございました！