HTML

提供：GNU social JP Wiki

About

HTML (Hyper Text Markup Language) はウェブ用の文書を記述するためのマークアップ言語だ。文章を構成する要素 (見出しや段落など) にマークアップを施す (明示的に印をつける) ことで文書を表現する。HTMLは手作業で記述されることもあるが、プログラムから生成されることもある。

HTMLは単なるテキストだけではなく、画像や動画などのメディア、テキスト入力欄・ボタンなどのフォーム、JavaScriptによるプログラムなどを埋め込むことができるため、プログラムのGUIとしても使用される。ウェブブラウザーから表示した時のSNSやWikiの画面はHTMLで表現されている。

HTMLの見え方はスタイルシートという仕組みで決まる。これにより例えば見出しは大きな文字で、段落の前後は1行あけて、リンクは青い文字で表示される。スタイルシートを記述するための代表的な言語はCSSだ。一般的に、HTMLの制作者が自分でCSSを用意してHTMLと紐づけてウェブサイトの外観をデザインする。

Standard

HTMLの現行の標準仕様は「WHATWGのHTML Standard」および「ISO/IEC 15445:2000」だ。一般的なウェブ開発では前者が使用される。

HTMLの構文は仕様通りに記述されるべきだが、ウェブブラウザーはエラー修正機能を持ち、誤ったHTMLをなるべく正しく表示しようとする。そのためHTMLの誤りには気づきにくいが、有耶無耶にするとトラブル解決や互換性の面で問題の元になりかねない。

XHTML

通常のHTMLはXMLに似ているが厳密にはXMLではない。XHTMLを使用すれば完全なXMLの構文でHTML文書を記述できる。GNU socialの画面はXHTMLで表現されている。

PHPなどのプログラムでHTMLを生成する場合、XHTML構文を使用するか、通常のHTML構文を使用するかを区別する必要がある。また、JavaScriptでDOMを操作する場合も現在の文書がHTMLかXHTMLかで挙動に差が発生するため注意が必要だ。

HTMLとXHTMLとの主な差異は次の通りだ。

  • XML宣言がある
  • 要素名は小文字でなければならない
  • 開始タグ/終了タグの省略ができない
  • 通常のHTMLで終了タグの無い <img> 要素などは <img /> の様に閉じる必要がある

Form

About

Ref: <form>: フォーム要素 - HTML: ハイパーテキストマークアップ言語 | MDN

form関係の要素はWebアプリで非常に重要。

form要素外のinputとの連携。

基本的にform要素内に配置されたinputなどのフォーム関係要素の情報が同じform要素ないのtype=submitのボタンで送信される。

form要素外部に配置したform関係要素を送信に含めたい場合、form要素にidを指定しておき、外部のform関係要素のform属性で指定する。

<body>
    <form id="form1" method="POST" action="test.php">
        <input type="text" name="text1" id="text1" />
        <input type="submit" value="submit" />
    </form>
    <input type="text" name="text2" id="text2" form="form1" />
</body>

submitのボタンがform要素外部にある際も、form属性で指定すれば連携できる。

  • form: フォーム連携要素の処理、サーバーへのデータ送信用 (HTML Standard)。
  • fieldset: フォーム要素のグループ化用の要素 (The legend element)。
  • legend: fieldsetのラベル。

fieldsetが一番外側で、その中にformやinputがあるイメージ。

Attribute

重要な属性が何個かある。

  • action: 送信先のURL。
  • enctype: method="post"の場合のMIME。application/x-www-form-urlencoded=デフォルト。基本はこれで問題ない。multipart/form-data=画像やファイル類の場合。text/plain=デバッグに便利。
  • method: 送信時のHTTPメソッド。get=デフォルト。URLクエリー (?と&区切り)。post=フォームデータをリクエスト本体に設定。dialog=dialog要素内で有効。
  • novalidate: 論理値。フォーム送信時の検証を無視。

Autocomplete

Ref: HTML 属性: autocomplete - HTML: ハイパーテキストマークアップ言語 | MDN

input系要素の場合、autocomplete属性でWebブラウザーで自動入力できる。入力の手間を省くのに重要。

autocomplete属性の値で、Webブラウザーに自動入力の種類などを示唆できる。「HTML Standard」に指定可能な値がある。

いくつかよく使いそうなものを記載しておく。

  • email
  • url
  • username
  • off
  • on

Webブラウザーがオートコンプリートで認識してくれる項目がけっこう限定されている (Chrome でフォームに自動入力する - パソコン - Google Chrome ヘルプ)。

WebブラウザーがやってくれていないやつはJavaScriptでやっていることがある。

[Settings]-[Autofill and passwords] で管理されている。基本的に以下のデータが対象 (オートコンプリート属性入門 〜Chromeで設定できる項目を試してみた〜 - asoview! Tech Blog)。

  • username
  • password
  • 住所
  • 決済方法
  • email

その他の情報。

自動補完の条件がある。他のドメインにsubmitする場合はそのままだと対象外。また、autocomplete=usernameすると、ログイン時の入力補完の支援を受けられる。ややトリッキー。自動補完してほしいところはこれを指定しておくとひとまず楽ではある。

datalist

Ref: datalistタグ＆inputのlist属性の使い方と注意点 [無料ホームページ作成クラウドサービス　まめわざ]

autocompleteに近いものとしてdatalistがある。こちらはinput+selectのようなことができる。いわゆるコンボボックス的なことが簡単にできる。

    <input id="MaMiShare.host" list="MaMiList" type="email" inputmode="email"
      autocomplete="on" autocorrect="off" autocapitalize="off"
      formnovalidate='formnovaildate' placeholder="mstdn.jp misskey.io"
      style="background-color:rgb(158,194,63)" />
    <datalist id="MaMiList">
      <option value="fedibird.com"></option>
      <option value="gp.tsukimi.club"></option>
      <option value="mastodon.social"></option>
    </datalist>

数値入力

数値入力系のフォーム作成。ポイントがいくつかある。input[type=number]は一見するとこれがふさわしく見える。が、いろいろ問題がある。たとえば、e.+-が入力できる。

数字以外も入力できるが、イベントではこれらは空になる。文字数制限などで困る。type=textで実装したほうが都合がよいだろう。 

<input type="text" inputmode="numeric" pattern="\d*">

他の方法で頑張ったほうがいい。

type="tel"だとイベントで値をとれる。

readonly/disabled

input要素の入力禁止の属性がreadonlyとdisabledの2種類ある。

readonly disabled
submit x -
focus x -

値の送信可否が非常に重要な違い。見た目だけで、送信する必要がないならば、disabledでOK。

CSS

HTMLへの適用方法

CSS の構造 - ウェブ開発を学ぶ | MDN

CSSのHTMLへの適用方法が大きく3種類ある。

  1. 外部スタイルシート: head要素内のlink要素での参照     <link rel="stylesheet" href="styles.css" />
  2. 内部スタイルシート: head要素内のstyle要素内
  3. インラインスタイル: html要素のstyle属性 (非推奨)。

text-indent

Ref: CSS text-indentなコンテンツ内にinline-blockな要素がると崩れる - かもメモ.

text-indentが設定されているとinline-blockが崩れることがある。

inline-blockの要素に対して「text-indent: 0 又は、display: inline;」で解決するらしい。display:inlineで自分の場合解決した。

Selector

CSS セレクター - CSS: カスケーディングスタイルシート | MDN

CSSの適用範囲を指定する。document.querySelectorなどでも使用する。非常に重要。

スペースに意味があるので注意する。

結合子とセパレーター

組み合わせると、対象の下、左右を指定できる。後ろは選べるが、前は選べない。

  • + 次兄弟結合子next-sibling combinator: 直後の要素 (1個)。
  • > 子結合子child combinator: 直接の子要素 (1階層)。
  • || 列結合子 column combinator (実験的): 2のセレクターの間。
  • ~ 後続兄弟結合子subsequent-sibling combinator: 以後の要素 (全部)。
  • " " 子孫結合子descendant : 以後の子要素 (全階層)。
  • | Namespace separator: 左の名前空間に属する右にマッチ。

前は選べないが、:has()などと併用すると、前に近いものは選べる。

JSなしでタブ切り替えデザインを実装できるの、、、！？ #CSS - Qiita

属性セレクター

Ref: CSSで複数の属性セレクタを指定する #CSS - Qiita. 

div[data-color="red"][data-size="small"]

[属性名="属性値"]の書式。.クラス名は[class="クラス名"]の省略記法？

スペースを開けずに複数列挙することで複数指定できる。その場合、AND指定になる。

フォームのCSS required

<style>
input[required='required']::after {
	content: '*';
}
input[required='required'] {
	color: red;
}
input[required='required'] {
	background-color: red;
}

/* input[required='required'] {
    background-image: radial-gradient(#F00 15%, transparent 16%), radial-gradient(#F00 15%, transparent 16%);
    background-size: 1em 1em;
    background-position: right top;
    background-repeat: no-repeat;
} */
</style>

例えば、radioボタンの場合、ラベル側を修飾したい。.requiredのクラス属性を指定しておいたほうがいいだろう。 

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>

他に以下のようなCSSで<label><input /></label>だとラベルを修飾できる。 

	label:has(:required):after {
		content: " *";
		color: red;
	}

Tab menu

JavaScript使用可否で実装方法が異なる。JSを使う場合、リストのclickで表示、非表示用のクラスを脱着してやる。

JavaScript使わない場合、input[type=radio]のcheckedで表示させる形で実装する。 

			<section class="tab-wrap">
				<label class="tab-label">ボタン1<input type="radio" name="tab" class="tab-switch" checked="chekced" /></label>
				<div class="tab-content">コンテンツ1</div>
				<label class="tab-label">ボタン2<input type="radio" name="tab" class="tab-switch" /></label>
				<div class="tab-content">コンテンツ2</div>
				<label class="tab-label">ボタン3<input type="radio" name="tab" class="tab-switch" /></label>
				<div class="tab-content">コンテンツ3</div>
			</section>

	.tab-wrap {
		display: flex;
		flex-wrap: wrap;
		.tab-switch {display: none;}
		.tab-label {
			color: White;
			background: LightGray;
			margin-right: 5px;
			padding: 3px 12px;
			order: -1;
		}
		.tab-content {
			width: 100%;
			display: none;
			padding: 10px 20px;
			background-color: #eee;
			border: 1px solid #ccc;
		}
		.tab-label:has(:checked) {
			background: rgb(231, 85, 1);
			+.tab-content {
				display: block;
			}
		}
	}
「https://wiki.gnusocial.jp/index.php?title=HTML&oldid=378」から取得