はじめに
自分でさまざまなサービスやシステムを提供できるようにしたくてJavaやC言語を触っていましたが、難しすぎて去年の自分は形になるプログラムを組むことができませんでした。
ですので、簡単なHTML CSSの勉強から始めてみたので頭の中で整理して記憶するため書いていきます。 記述するソースコードはすべてHTMLとなります。
HTMLとは
HTMLとは「Hyper Text Markup Language」の略で、HTMLファイルにwebページに表示したいテキストをタグという特殊文字で囲むことでさまざまな意味を持たせられます。
例えば、見出しや画像、リンクタグを作ったりできます。
Qiitaに記事を書く際にマークダウン記述だとHTMLを文章に直接記述した時にプログラムと認識されてしまうので半角やら全角やらでわざと空白部分作ります。実際にやるとエラーの原因になります。
HTMLファイルの構造
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>タイトル名記述</title>
</head>
<body>
<!-- サイトで表示したいホームページの中身 -->
</body>
</html>
< !DOCTYPE html>でHTMLのバージョンを記述しています。上記のように特に指定をしなければ、現在最新のHTML5になります。
< head>〜< head>でページのタイトルや外部から引用して使うファイルへのリンクを記載します。
CSSの読み込みなどもここに記載します。
< html lang="ja">はタグ内に記述する言語を記載します。サイトに記載したい文章が英語ならここの記述は< html lang="en">でEnglishを記載します。
< meta charset="UTF-8">は文字コードをUTF-8に指定する記述です。記載しないと文字化けするリスクがあるので必ず記載されているか確認します
< meta name="viewport" content="width=device-width, initial-scale=1.0">はwebサイトをレスポンシブ対応にするための記述です。PCやスマホ、タブレット等の使うデバイスでサイトの表示幅が変わりますので、端末画面の幅ごとに自動で変更されます。
HTMLの書き方
基本的にタグで囲んで記述します。
<タグ>テキスト文タグ>
タグを使うことでさまざまな意味付を行ったり、色や文字サイズ等の装飾を行います。
タグを使わなくてもホームページに文字を載せることはできますが、一切タグを使わないで記述したら文字の色の変更どころか改行もできませんw
見出しタグ
見出しを記載するには< h1>〜< h6>タグを使います。数が小さいほど大きな見出しになりCSSで指定していない場合は文字サイズもかわりますが、文書構造を指定するために記載するので文字サイズで変えたい場合はcssで記載します。
<h1>プログラムの勉強</h1>
<h2>プログラミング言語</h2>
<h3>HTML</h3>
<h3>CSS</h3>
<h3>JavaScript</h3>
<h2>実際に書いてみよう</h2>
## 段落を作成
段落を指定するには< p>〜< /p>のタグを使います。HTMLファイル内で改行をしても実際のホームページでは反映されないので...
<p>Hello World</p>
<p>こんにちは</p>
コメント
プログラムは誰が読んでもすぐに意味のわかる記述にしなければいけないので、ソースコードの意図を明確にするためにコメントを残します。< !--コメントしたい部分 -->で囲った部分がコメントになります。コメントで記述されたテキストはWebサイトには表示されません。
また、記述したコードが実行されないようにするためにも使用したりします。その行為をコメントアウトと言います。
<!-- これは見出しです-->
<h1>プログラムの勉強</h1>
画像の表示
オシャレなサイトには画像が使われてると思います。画像を表示するには< img>タグを使用します。終了タグはありません。
< img>タグを記載するだけでは画像は表示されないのでタグ内にsrc属性を記載して画像のリンクを設定します。この際に画像やファイルを呼び出すためのファイスパスを記述して画像の保存場所を指定します。ファイルパスは相対パスと絶対パスの二通りあります。
相対パスは、呼び出し元のファイルから見た、呼び出したいファイルの位置を指定する書き方です。
同じフォルダ内なら直接ファイル名を記述します。
しかし下記のファイル構造だった場合はファイルパスを記述します。
色付き四角形はフォルダです💦
index.htmlでtop.jpgを使用する際には
index.html → topフォルダ → HTMLフォルダ → imagesフォルダ → top.jpgという道筋でファイルの所在を記述します。
top.jpgとindex.htmlはそれぞれ違うフォルダにあるのでまずは一つ上の階層にいく指定をします。ファイルパスでは「../」と記載します。よってtopフォルダに辿り着きます。../
topフォルダからはimageフォルダがどこにあるかまだわからないのでもう一つ上の階層に行きます。
よって、もう一度「../」と記載します。../../
ここでHTMLフォルダに辿り着くとtop.jpgが入ってるimagesフォルダと同じ階層になりました。その際は直接フォルダ名を記載します。../.../images
そしてimagesフォルダにtop.jpgがありますので一階層下に行きます。その際は「/ファイル名」と記載します。
よって、相対パスでindex.htmlからtop.jpgを呼び出すファイルパスは「../../images/top.jpg」になります。
絶対パスは外部サイトで公開されているフォルダを指定する際に使用します。
したがって、< img>タグで画像を表示するには次のように記述します。
src属性で記述するファイルパスは"で囲む必要があります。
<img src="../../images/top.jpg">
リンクを作成
リンクは< a>タグで囲うことで作れます。
囲った中身のテキストをクリックすると別のページへ飛ぶことができますが、その際にリンク先を< a>タグ内にhref属性を追加してURLを記載する必要があります。
<!-- yahooへのリンク -->
<a href="https://www.yahoo.co.jp/">Yahoo</a>
リストの作成
リストを作成するには、< ul>タグか< ol>タグで囲んでから箇条書きで表示したいテキストを< li>タグで囲む必要があります。
< ul>で囲むと黒番が、< ol>タグで囲むと番号付きリストになります。
<ul>
<li>りんご</li>
<li>みかん</li>
<li>れもん</li>
</ul>
<ol>
<li>金賞</li>
<li>銀賞</li>
<li>銅賞</li>
</ol>
ちなみに箇条書きリストにそれぞれリンクを作成するには< li>タグの中身を< a>タグで囲めば大丈夫です。
<ul>
<!-- yahooへのリンク -->
<li>
<a href="https://www.yahoo.co.jp/">yahoo</a>
</li>
<!-- Googleへのリンク -->
<li>
<a href="https://www.google.com/">google</a>
</li>
</ul>
表の作成
表を作るにはまず< table>タグで表全体を囲みます。その中で< tr>タグでテーブルに記載したい中身を1行ごとに囲みます。< tr>タグ内でテーブルに記載したいセル(表の一マス)の中身を< td>タグで囲っていきます。< th>や< tf>タグもありますが省略します💦
<table>
<tr>
<td>
大人
</td>
<td>
1000円
</td>
</tr>
<tr>
<td>
中高生
</td>
<td>
700円
</td>
</tr>
<tr>
<td>
子供
</td>
<td>
400円
</td>
</tr>
</table>
上記のはこのようなテーブルになります。
| 大人 | 1000円 |
| 中高生 | 700円 |
| 子供 | 400円 |
テーブルには横方向にセルを結合させるcolspan属性と縦方向にセルを結合させるrowspan属性があります。使用する際は何個のセルを結合させるか記載しなければなりません。
<!-- 横方向のセルの結合 -->
<table>
<tr>
<th colspan="2">
遊園地の料金
</th>
</tr>
<tr>
<td>
大人
</td>
<td>
1000円
</td>
</tr>
<tr>
<td>
中高生
</td>
<td>
700円
</td>
</tr>
<tr>
<td>
子供
</td>
<td>
400円
</td>
</tr>
</table>
<!-- 縦方向へのセルの結合 -->
<table>
<tr>
<td rowspan="3">
遊園地の料金
</td>
<td>
大人
</td>
<td>
1000円
</td>
</tr>
<tr>
<td>
中高生
</td>
<td>
700円
</td>
</tr>
<tr>
<td>
子供
</td>
<td>
400円
</td>
</tr>
</table>
| 遊園地の料金 | |
|---|---|
| 大人 | 1000円 |
| 中高生 | 700円 |
| 子供 | 400円 |
| 遊園地の料金 | 大人 | 1000円 |
| 中高生 | 700円 | |
| 子供 | 400円 |
フォームを作る
お問い合わせページや会員登録でフォームを使うと思いますが、HTMLで作ることができます。
まず、< form>タグでお問い合わせフォーム全体を囲みます。< form>タグで囲うことでここはフォームなのだとコンピュータに認識させることができます。
またaction属性で入力されたデータの送信先の指定、method属性でデータの転送方法(HTTPメソッド)を< form>タグ内に記載します。データを取得したい際に使うのはgetですが、個人情報やアカウントのパスワード等の秘密にしたいデータを送信する際はpostを指定します。
< form>タグ内には入力フォームを作成するために< input>タグを使用します。< input>タグ内にtype属性を記述することでさまざまな使い方ができます。
| 属性値 | 用途 |
|---|---|
| text | 入力エリア |
| search | |
| tel | |
| url | |
| radio | ラジオボタンの作成 |
| checkbox | 項目を複数選択する |
| submit | フォームの送信ボタン |
<!-- 名前入力フォーム -->
<input type="text" name="name" placeholder="名前を入力してください" >
<!-- 性別選択するラジオボタン -->
性別:
<input type="radio" name="gender" value="男" checked>
<input type="radio" name="gender" value="女">
<input type="radio" name="gender" value="その他">
<!-- 使用するPCのOSを複数選択できるチェックボックス -->
使用するPCのOS:
<input type="checkbox" name="OS" value="MacOS">
<input type="checkbox" name="OS" value="Windows" checked>
<input type="checkbox" name="OS" value="Linux">
<input type="checkbox" name="OS" value="Ubuntu">
<input type="checkbox" name="OS" value="その他">
<!-- 送信アクションが行える送信ボタン -->
<input type="submit" value="送信">
他にもセレクトボックスを作るには< select>タグで囲み、その中にそれぞれの選択肢を< option>タグで囲みます。セレクトボックスもラジオボタンやチェックボックスと同様にcheckedを使用することで最初から選択された状態にすることができます。
<!-- 住んでる地方を選ぶセレクトボックス -->
住所:
<select>
<option name="area" value="選択してください。">
選択してください
</option>
<option name="area" value="hokkaido">
北海道
</option>
<option name="area" value="tohoku">
東北
</option>
<option name="area" value="tokai">
東海
</option>
<option name="area" value="kanto">
関東
</option>
<option name="area" value="chubu">
中部
</option>
<option name="area" value="kinki">
近畿
</option>
<option name="area" value="chugoku">
中国
</option>
<option name="area" value="sikoku">
四国
</option>
<option name="area" value="kyusyu">
九州
</option>
<option name="area" value="okinawa">
沖縄
</option>
</select>
またフォーム名やラジオボタンやチェックボックスを一つのパーツとして扱える< label>タグがあります。ラベル部分にはfor属性をつけてテキストを囲み、関連付けたいパーツにそれぞれのid属性をつけます。
<!-- 性別選択するラジオボタン -->
性別:
<input type="radio" name="gender" value="男" id="male" checked>
<label for="male">男</label>
<input type="radio" name="gender" value="女" id="female">
<label for="female">女</label>
<input type="radio" name="gender" value="その他" id="others">
<label for="others">その他</label>
<!-- 使用するPCのOSを複数選択できるチェックボックス -->
使用するPCのOS:
<input type="checkbox" name="OS" value="MacOS" id="MacOS">
<label for="MacOS">MacOS</label>
<input type="checkbox" name="OS" value="Windows" id="Windows" checked>
<label for="Windows">Windows</label>
<input type="checkbox" name="OS" value="Linux" id="Linux">
<label for="Linux">Linux</label>
<input type="checkbox" name="OS" value="Ubuntu" id="Ubuntu">
<label for="Ubuntu">Ubuntu</label>
<input type="checkbox" name="OS" value="その他" id="others">
<label for="others">その他</label>
グループ分け
私はこの勉強に苦労しましたが、HTMLをCSSやJavaScriptで指定する際にクラスやタグを使用します。なのでヘッダー部分やメニュー欄、本文にヘッダー部分をそれぞれ意味付けしてクラスごとに分けなければなりません。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>タイトル名記述</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<!-- ヘッダー記述 -->
</header>
<nav>
<!-- ナビゲーションメニュー記述 -->
</nav>
<main>
<article>
<!-- 一つで完結する内容 -->
</article>
<article>
<!-- 一つで完結する内容 -->
<article>
</main>
<footer>
<!-- フッター部分記述 -->
</footer>
</div>
</div>
</body>
</html>
というふうにホームページに表示させたい内容をマークアップして意味付けしていきます。
見やすいコードを記述するにはとても重要です。
最初に< div>タグにclass="wrapper"とclass="container"と意味づけをしましたがクラス名はわかりやすければなんでも大丈夫です。wrapperはCSSで記載しますが、サイト全体のレイアウト幅等を指定する際に使用し、containerはサイトに載せるテキストや画像等のコンテンツを囲うために使用します。（一番大事な場所なのに言葉にするのが難しい）
< header>< nav>< main>< footer>タグ内ででそれぞれのテキストを記述し、< article>タグでmainタグ内の内容を大きく分けます。例:会社の方針、事業内容、お問い合わせ等
更に細かくレイアウトなどでclassが必要になったら< div>タグで囲っていきます。
最後に
HTMLは頭では分かっていても言葉にするとすぐ出てこないことが多かったので、サイトを実際に作ったりして練習していきたいです。誤字脱字や間違えた解説ありましたら、教えていただけるとありがたいです。近いうちにCSSも復習の為にまとめたいので投稿します