HTML

HTML

特徴

インライン要素かブロック要素かを見極める
- インライン要素
  - <span>などが代表的
  - **横並び**
    に要素が配置される
  - 横幅と縦幅を指定できない
  - cssでdisplay: blockとするとブロック要素として扱うことが可能
- ブロック要素
  - <div>が代表的
  - **縦並び**
    に要素が配置される
  - 横幅と縦幅を指定できる
  - cssでdisplay: inlineとするとインライン要素として扱うことが可能
  - cssでdisplay: inline-blockとするとインライン要素とブロック要素を併せ持って扱うことが可能
プロパティ
- clsは複数のタグに紐付け可能
- idはhtml内にの１つのみのタグに紐付け可能

構文

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  aaaaaaaa
</body>
</html>

リンク関連

リンク作成

基本

<a href="ここにURL">ここにリンクテキスト</a>

aタグにtarget=”_blank”属性をつけることで、リンクを押下するとタブで開くようにする

<a href="ここにURL" target="_blank">ここにリンクテキスト</a>

上記の例を書いたものがこれ

作成したリンクを押下すると写真を開く

<A href="next.jpg">次の絵</A>

ファイルをダウンロード

<A href="next.zip">ファイルをダウンロード</A>

FTPサーバー上のファイルをダウンロード

<A href="ftp://ftp.company.com/some/next.zip">

リンク部分にマウス・カーソルを載せるとポップアップで文字が表示される → title属性を使用

<A href="https://github.com/a11wa11/memo" title="テスト">次のページ</A>

上記の例を書いたものがこれ

整形済みテキスト(pre)

例

  HTMLのpreタグは、"preformatted text"（整形済みテキスト）を表すために使用される要素です。
  preタグ内のテキストは、そのままのスペース、改行、およびインデントが保持され、ブラウザによってそのまま表示されます。

コード

<pre>
  HTMLのpreタグは、"preformatted text"（整形済みテキスト）を表すために使用される要素です。
  preタグ内のテキストは、そのままのスペース、改行、およびインデントが保持され、ブラウザによってそのまま表示されます。
</pre>

フォーム

例

コード

// form作成
<form method="GET" action="対象ファイル.php">
指名
<input type="text" name="対象変数">
<input type="submit" value="送信">
</form>

# input.php?you_name=入力名 のようにURLの末尾にGETメソッドの内容が表示される(クエリ、クエリストリング)

テーブル

例

ヘッダー1	ヘッダー2
`項目1`	`項目2`

コード

<table>
  <tr>
    <th>ヘッダー1</th>
    <th>ヘッダー2</th>
  </tr>
  <tr>
    <td><code>項目1</code></td>
    <td><code>項目2</code></td>
  </tr>
</table>

折り畳み

例

ここを展開

Something small enough to escape casual notice.

コード

<details>
    <summary>展開</summary>
    Something small enough to escape casual notice.
</details>

色

例

赤色テキスト

緑色テキスト

青色テキスト

黄色テキスト

紫色テキスト

コード

<font color="red">赤色テキスト</font><br>
<font color="green">緑色テキスト</font><br>
<font color="blue">青色テキスト</font><br>
<font color="yellow">黄色テキスト</font><br>
<font color="purple">紫色テキスト</font><br>

サイズ

例

サイズが相対サイズで-2

サイズが相対サイズで+2

コード

<font size="-2">サイズが相対サイズで-2</font><br>
<font size="+2">サイズが相対サイズで+2</font><br>

左右横並び

記事 1 左側の記事

記事 2 右側の記事

エディタでの使い方

vscodeでhtmlファイルを作成
- < ! + tab > で保管可能