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>
// markdownの場合
| 項目名 | 項目 | 項目 |
|-|-|-|
| レコード1 | 1 | 2 |
| レコード2 | 3 | 4 |
| | | |
折り畳み
例
ここを展開
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コード
<font size="-2">サイズが相対サイズで-2</font><br>
<font size="+2">サイズが相対サイズで+2</font><br>
左右横並び
記事 1 左側の記事
記事 2 右側の記事
ナビゲーション
- 見た目には何も変わりません(<div> と表示上の違いはなし)
- スクリーンリーダー(視覚障害者向けの読み上げソフト)が「ここはナビゲーションです」と伝えられる
- 検索エンジンがサイト構造を正しく理解できる
<!-- nav が2つ以上 → aria-label で区別する -->
<nav aria-label="メインメニュー">
<a href="/home">ホーム</a>
<a href="/about">概要</a>
</nav>
<nav aria-label="フッターメニュー">
<a href="/privacy">プライバシー</a>
<a href="/contact">お問い合わせ</a>
</nav>
エディタでの使い方
- vscodeでhtmlファイルを作成
- < ! + tab > で保管可能