More than 1 year has passed since last update.

HTML CSS JavaScript 基礎編-第1回 HTML基礎

Last updated at 2023-04-25Posted at 2023-04-23

仕事で、Plotly.jsを使ってデータを可視化する必要があるため、JavaScriptに詳しくない私は、HTML、CSS、JavaScriptについての書籍を勉強して基本的な知識を身につけておくことにしました。自分ためのメモですので、記事の中で一部中国語で書くことがあります。また、自分にとって重要ではないところも飛ばしています。

HTML基礎

Web開発技術概要

ウェブ開発には、フロントとエンドと言われる二つあります。フロントは文字通り、ユーザ側で見せるものになります。エンドがサーバ側で動作するものです。

今回はフロントエンドに必要とされるHTML、CSS、Javascriptを勉強します。この3者の役割はそれぞれ以下の通りです。

フロントだけでも、いろんな技術がありますので、以下の順番で勉強するのがおすすめです。
HTML → CSS → JavaScript → JQuery → CSS3 → HTML5 → Vue.js

私の目標はフロントエンジニアではないので、基礎だけ学んで、自分が必要な可視化のWebページができれば良いです。

基本タグ

HTML構成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

一ページが四つの要素から構成されます：

<!DOCTYPE html>:これがHTMLページだよという声明
<html></html>:ブラウザへのお知らせ、このページが<html>から始まり、</html>まで終わる
<head></head>:ページのヘッダー部分、ページの表題や外部ファイルの定義
<body></body>:ページの本体

headタグ

headタグには、以下の六つタグしか入らないです。

titleタグ
- ページの表題
metaタグ
- ページの特定情報を定義することろ、例えば、検索エンジン用のキーワードやページのエンコードなど

linkタグ

これが外部を利用する際に使いします。たとえば：

<head>
	<meta charset="utf-8">
	<title></title>
	<link type="text/css" rel="stylesheet" href="css/index.css">
</head>

styleタグ

CSSを定義するところ

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">/*こちらでCSSを記載*/</style>
</head>

scriptタグ

javascriptを定義するところ

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">/*こちらでCSSを記載*/</style>
	<script>/*こちらでJavaScriptを記載*/</script>
</head>

baseタグ

bodyタグ

bodyタグの中身はページの本体です。以下は簡単の例です。

がコメント用タグです、例えば、 。

テキスト

HTMLの本文には、見出し、段落、改行などタグがあります。

見出しタグ `<h1></h1>`

段落タグ

<p></p>
一段落の内容を含む際に使うタグです。
<br/>
一段落内の改行をする際に使うタグです。

文字の装飾タグ

名称	标签记号
粗体标签	strong(推荐),b
斜体标签	i,em(推荐),cite
上标标签	sup
下标标签	sub
中划线标签	s
下划线标签	u

区切り線タグ `<hr/>`

hrがhorizonの略語です。

divタグ

「divタグ」の最も重要な用途は、領域を分割し、その領域に対してCSSを使用してスタイルを制御することです。divがdivisionのことで、内部には他のタグをいれてもOKです。

自己終了タグ

<p></p>や<div></div>がペアであり、開始と終了があります。自己終了タグhr/もあります、これが終了ないです。こちらで自己終了タグをまとめます。

タグ	説明
`<meta/>`	ページの特定な情報(検索エンジン用)
`<link/>`	外部ファイルの指定
`<br/>`	改行タグ
`<hr/>`	くきり線タグ
`<img/>`	画像タグ
`<input/>`	フォーム入力タグ

ブロック要素とインライン要素

「ブロック要素」と「インライン要素」は、HTMLにおいて極めて重要な概念であり、同時にCSSの重要な基礎でもあります。

ブロック要素

ブロック要素は、一行を独占します。他の要素(ブロック要素、インライン要素)と同じ行にならないです。
また、ブロック要素内部には、他のブロック要素やインライン要素を含むことができます。

ブロック要素	説明
`h1~h6`	見出し
`p`	段落
`div`	div要素
`hr`	区切り線
`ol`	順番ありリスト
`ul`	順番なしリスト

インライン要素
インライン要素は、他のインライン要素と同じ行にしてもOKです。
また、インライン要素内部には、他のインライン要素を含むことができます。

インライン要素	説明
`strong`	粗体
`em`	斜体
`a`	ハイパーリンク
`span`	よく使うインライン要素、CSSと一緒に利用

ブロックとインラインの例は以下の通りです：

HTMLの記号・特殊文字

いっぱいありますので、HTMLの記号・特殊文字の文字コード表（文字実体参照、数値文字参照）を参照ください。

リストタイプ	属性値	意味
li	1	1,2,3
li	a	a,b,c
li	A	A,B,C
li	i	i,ii,iii,
li	I	I,II,III...
ul	disc	●(default)
ul	circle	◯
ul	square	■

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
        <ul>
            <li>項目1</li>
            <li>項目2</li>
            <li>項目3</li>
        </ul>

        <ol>
            <li>項目1</li>
            <li>項目2</li>
            <li>項目3</li>
        </ol>
	</body>
</html>

説明リスト

<dl> は HTML の要素で、説明リストを表します。この要素は、一連の用語（<dt> 要素を使用して指定）と説明（<dd> 要素によって提供）をリスト化したものです。

	<body>
		<dl>
		  <dt>りんご</dt>
		  <dd>赤くてまるい果物</dd>
		  <dt>ぶどう</dt>
		  <dd>紫で房状の果物</dd>
		  <dt>めろん</dt>
		  <dd>緑で固い皮に包まれている</dd>
		</dl>
	</body>

テーブル

表とは、行と列にデータを配置して表示したものです。最も重要なのは、表の主要なコンテナになる <table> タグです。これは、表の開始位置と終了位置を示します。
その他のタグは、次の通りです。

タグ	意味
`<tr>`	行を表す
`<td>`	データセルの作成に使われる
`<th>`	表の見出しの追加に使われる
`<caption>`	キャプションの追加に使われる
`<thead>`	表に別のヘッダーを追加する
`<tbody>`	表の本体を示す
`<tfoot>`	表に別のフッターを作成する

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		table,
		td {
		    border: 1px solid #333;
		}
		thead,
		tfoot {
		    background-color: #333;
		    color: #fff;
		}
		</style>
	</head>
	<body>
		<table>
		  <caption>Free Coding Resources</caption>
		  <thead>
		      <tr>
		        <th colspan="2">October</th>
		        <th colspan="2">November</th>
		      </tr>
		    </thead>
		  
		    <tbody>
		      <tr>
		        <td>Sales</td>
		        <td>Profit</td>
		        <td>Sales</td>
		        <td>Profit</td>
		      </tr>
		      <tr>
		        <td>$200,00</td>
		        <td>$50,00</td>
		        <td>$300,000</td>
		        <td>$70,000</td>
		      </tr>
		    </tbody>
		      
		    <tfoot>
		      <tr>
		        <th colspan= "4">November was more produstive</th>
		      </tr>
		    </tfoot>
		</table>
	</body>
</html>

結果が以下の通りです：

See the Pen Untitled by Junlee (@utanesuke0612) on CodePen.

上では、列の結合がありますが、行の結合後ですと rowspan="2"です。

		    <tbody>
		      <tr>
		        <td rowspan="2">Sales</td>
		        <td>Profit</td>
		        <td>Sales</td>
		        <td>Profit</td>
		      </tr>
		      <tr>
		        <td>$50,00</td>
		        <td>$300,000</td>
		        <td>$70,000</td>
		      </tr>
		    </tbody>

画像

<img>タグは、画像を表示する際に使用します。必須属性のsrc属性で画像ファイルのURLを指定します。
<img src="" alt="" title="" width="" height=""/>

alt属性には、画像が利用できない環境向けのテキストを指定します。
title属性を指定すると、その値が画像のキャプション情報となります。

ハイパーリンク

<a>タグは、ハイパーリンクを指定する際に使用します。ウェブページ内のテキストや画像などを <a>～</a> で囲んで必要な属性値を指定してやることで、ハイパーリンクの始点（出発点）や終点（到達点）とすることができます。<a>は、anchor（アンカー）の略です。

<a href="a.shtml">相対パスでリンクします</a><br>
<a href="https://www.htmq.com/html5/a.shtml">絶対パスでリンクします</a><br>
<a href="../index.htm">ひとつ上のディレクトリへ</a><br>
<a href="mailto:info@htmq.com">メール</a><br>

<a href="a.shtml" target="_blank">別画面を開いてリンクします</a><br>
<a href="a.shtml" target="_self">リンク元と同じフレームにリンクします</a><br>
<a href="a.shtml" target="_parent">ひとつ上の親フレームにリンクします</a><br>
<a href="a.shtml" target="_top">フレームをすべて解除してリンクします</a><br>
<a href="a.shtml" target="abc">abcという名前のフレームにリンクします</a><br>

詳細はこちらを参照：

フォーム

HTMLではフォームを作るためにformタグを使います。またformタグの中にも、

inputタグ
labelタグ
textareaタグ
selectタグ
optionタグ

formタグ

formタグはフォームを構成する部品を囲って、どのプログラムに値を渡すか、どのようなメソッド（方法）でデータを送信するかを決めることができます。

<html>
   <form method="POST" action="sample.php">
     <p>お名前：<input type="text" name="NAME"></p>
     <p>メールアドレス：<input type="text" name="email"></p>
     <p><input type="submit" value="送信する"></p>
     <input type="reset" value="取消する">
   </form>
</html>

送信するボタンをクリックすると、 sample.phpページへ遷移します。

formタグにはまた他の属性もあります、詳細は以下のページを参照します。

inputタグ

タグはテキスト入力欄や実行ボタン等、フォーム（

～）を構成する部品を作成するタグです。 type属性の値により、一行テキストボックス・チェックボックス・ラジオボタン・実行ボタン・リセットボタン等の部品となります。

See the Pen book-02-input by Junlee (@utanesuke0612) on CodePen.

詳細は以下のリンク：

select タグ

See the Pen Book-03-select by Junlee (@utanesuke0612) on CodePen.

フレーム

<iframe> は HTML の要素で、入れ子になった閲覧コンテキストを表現し、現在の HTML ページに他のページを埋め込むことができます。

<html>
<iframe id="inlineFrameExample"
    title="Inline Frame Example"
    width="300"
    height="200"
    src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>
</html>

iframeに入れないページもある（iframeがインライン要素です）：

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up