はじめに
HTMLとCSSはホームページの見た目を生成する言語です。
「HTML」はページの要素や構造を指定し、「CSS」はHTMLで作った要素を装飾します。
この２つをマスターすることで簡単なホームページの画面を作ることができます。
始める前の準備
①作業する前に「index.html」というファイルを作成しましょう。
まずはVSCodeを開いて、以下を実行するとファイルの保存ができます。
mac: 「command」キー ＋ 「s」
Windows: 「ctrl」キー ＋ 「s」
ファイル名: index.html
保存する場所: 任意の場所
※ここで使用している「拡張子.html」はhtmlという言語を記載したファイルということを表しています。
②次にVSCodeの設定です。
黒い画面の右下に英語が書いてあります。（画像ではPlain Text）
ここをタップすると言語の一覧が表示されます。
その中の「HTML」を選択してください。
※この部分はファイルの保存をした時点で拡張子を指定しているので自動的に設定されている場合があります。
③黒い画面上で「html:5」と打ち込み、「tab」キーを押す。
すると以下のような画面が出てきます。
今回はこの中の「body」タグで囲った中に記述していきます。
その他の部分に記載されていることは文字コードの指定などは、設定部分になるのでまずは気にせずに進めてください。
HTML
早速ここからはHTMLという画面の構成を生成するソースコードを記述していきます。
HTMLの記法は、下のコードのように開きタグと閉じタグで囲むような形になっています。
「タグ」と呼ばれる印で要素を囲むことで囲まれた文字が「見出し」や「リンク」に変化したりします。
<タグ名1>...</タグ名1>
<タグ名1> はタグの始まりを示し、 </タグ名1> はタグの終わりを示します。
【実践】文字の大きさを変える
記述した文字の大きさを変えるということをやってみましょう。
「h1」と記述されたタグで要素を囲むと一番大きな見出しになります。
「index.html」に以下のコードを記述しましょう。
<h1>これはh1です</h1>
では、ブラウザ上でどのように表示されるか確認してみてください。
以下のように「これはh1です」という文字が表示されていれば成功です。
ここで使用しているタグの「h」は「heading（見出し）」の頭文字です。
この見出しを生成してくれるタグは「h1〜h6」まであり、数が小さくなればなるほど大きくなっていきます。
【実践】段落をつける
先ほど作成した「h1」タグ最後で「enter」キーをし、改行しましょう。
そこで「段落です」と３つ段落を変えて打ち込んでブラウザで表示してください。
下のように横並びに文字が出力されましたね。
段落を分けて表示するためには「p」タグを使用します。
「p」は「paragraph(段落)」の頭文字です。
では早速先ほど打ち込んだ文字を「p」タグで囲ってみましょう。
<p>①段落です</p><p>②段落です</p><p>③段落です</p>
このように「p」タグで囲むことで段落をつけることができます。
ちなみに上記のように横並びで記述しても「p」タグを使用していれば段落をつけることはできますが、ソースは見やすさ重視なので、以下のように記述するようにしましょう。
<p>①段落です</p> <p>②段落です</p> <p>③段落です</p>
【実践】コメントの書き方
ここまでタグでくくったり、タグが無くても文字を打ち込めばブラウザに表示されましたね。
プログラムを作成していく上でコメントと言って、メモを残したりします。
その場合は <!-- --> で囲むとブラウザに表示されなくなります。
やり方はコメントアウトしたい範囲を指定し、以下のキーを押す。
mac: 「command」ボタン ＋ /
Windows: 「ctrl」ボタン ＋ /
「これはコメントです」という文字を囲んでブラウザで表示してみましょう。
<!-- これはコメントです -->
【実践】リンクを作成する
よくWEBサイトで見るリンクを作成してみましょう。
リンクは「a」タグで作成できます。
「a」＋「tab」キーと打つと、以下が出てきます。
<a href=""></a>
そして、「リンクです」という文字を「a」タグで囲ってあげましょう。
ブラウザで表示してみるとテキストがリンクになって表示されます。
今の状態では、リンクをクリックしてもどこの画面にも遷移しない状態なので、飛ぶ先のURLを指定します。
以下の記述をし、ブラウザ上でクリックしてみると「Google」のページに飛びましたね。
その場合は「a」タグに「href」属性を追加して使用します。
<a href ="https://www.google.com/?hl=ja">Google</a>
今、「href」属性を加えた際に他にも「イコール」と「ダブルコーテーション」も加えました。
このように既存の要素に属性を足すことが多くあるので、その際にはイコールとダブルコーテーションを使用することを覚えておいてください。
【実践】画像を表示する
画像を表示する場合には要素を使用します。
「img」と打ち込んだあとに「tab」キーを押すと、以下が出てきます。
<img src="" alt="">
ここでは「src」属性に画像のURLを入れることで画像を表示できます。
「img」要素はテキストを囲むことがないため、終了タグが要りません。
以下のURLを埋め込んでブラウザ表示すると青色のハートが出てきます。
https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSyoJPTwLzCeYgaDKw6y6zBmoHxrpHlJE9rxzfC5_8iJzD_3OWpMQ
【実践】リストを作成する
以下のようなリストを作成する場合にはどのようにすると思いますか？
恐らくここまで勉強してきた皆さんなら下のようなコードを思い浮かべるのではないでしょうか？
<p>・山田</p> <p>・佐藤</p> <p>・鈴木</p>
しかし、リストを作成する場合は以下を使用します。
<ul> <li>山田</li> <li>佐藤</li> <li>鈴木</li> </ul>
「ul」タグでどこまでがリストなのかの範囲を指定します。
「li」タグの部分は指定する要素によって種類が変わるといった特徴を持っています。
今回は「・」を出すために「li」タグにしましたが、例えば「ol」タグにすると「数字」が連番で出力されます。
このように要素に要素を組み合わせて使用する際に、囲む側を「親要素」、囲まれる側を「子要素」と言ったりします。
【実践】インデントについて
今までソースコードを打つ際に何気なく改行して来たかと思います。
例えば今のリストの部分にて「ul」タグと「li」タグを使用する際に以下のような形にしていませんか？
<ul> <li>山田</li> <li>佐藤</li> <li>鈴木</li> </ul>
改行をする「p」タグの説明の際に「閉じタグ」があったら改行して記述するとお話しましたが、親要素と子要素のような構造の場合は インデント といって字下げを行います。
インデントを行う場合は半角スペース４つが基本で、「tab」キーを打つと一瞬で半角スペース４つになります。
このようにすることで「ul」タグという親要素の中に「li」タグが入っていると一目で分かるようになります。
<ul>
<li>山田</li>
<li>佐藤</li>
<li>鈴木</li>
</ul>
-2020年1月6日より追記-
【実践】表組み
表を作成する場合は「table」タグを使用します。
<table> は表組みデータ全体のエリア、 <tr> は行、 <td> はセル(列)を表し、下記のソースコードは2列1行の表組み構造を示しています。
また、1つ目のセル(行)には見出し項目が入ります。
表組みデータのうち、見出しとなるセル(行)に関しては「td」要素ではなく「th」要素を使います。
表組みの構造について説明しましたが、実際に以下の表(3列2行)を作成してみましょう。
見出しは「名前」「性別」「年齢」になります。
文言は自分の情報を記述してください。
「table」タグに記述されている「border属性」は枠の幅の太さを指定できます。
<table border="1"> <tr> <th>名前：</th> <td></td> </tr> <tr> <th>性別：</th> <td></td> </tr> <tr> <th>年齢：</th> <td></td> </tr> </table>
よく使う要素一覧
この表に記載されているものは代表的な要素になります。
これらはよく使われるものなので、使い分けられるようにしっかりとインプットしておきましょう。
他にも要素の種類はありますので自分でも調べてみましょう。
