（ちょっとメモ）属性の「引用符」や「値」の省略について
最終更新日：2018年04月03日 （初回投稿日：2013年11月25日）
属性値の「引用符」を省略できる場合がありますので、その条件をまとめます。
それから「属性値」そのものを省略できる「Boolean属性」というのもあります。
属性値の「引用符」を省略できる場合
引用符とは、「 "（ダブルクォーテーション）」 や「 '（クォーテーション）」のこと
。
HTML4、HTML5は、「 " " 」と「 ' ' 」のどっちで囲んでも良いのですが、
HTML5では「属性値」に下記が含まれていなければ、引用符の省略OK。
- 空白スペース
- <（小なり記号 less-than sign）
- >（大なり記号 greater-than sign）
- '（クォーテーション）
- "（ダブルクォーテーション）
- `（バッククォート）
- =（イクォール）
OKな例
<input type="text"> <!--ダブルクォーテーションで囲む-->
<input type='text'> <!--クォーテーションもOK-->
<input type=text> <!--ここからは引用符無しでOKな例-->
<input type=number min=0 max=20 step=5>
<div id=container>
<span class=red>
NGな例
<body class=front-page home main> <!--属性値の中に空白スペースがあります-->
<output for=na nb> <!--属性値の中に空白スペースがあります-->
<input type=text placeholder=「18<」か「"20"」を記入してください> <!--NG記号-->
こうして見ると、属性値を複数「半角スペース」で区切って指定する時が要注意ですね。
そんな時はちゃんと「 " " 」か「 ' ' 」で囲むこと。
NG記号は、上の例のように placeholder属性くらいでしか使わないかもね。
「値」を省略できる Boolean（ブーリアン）属性
Boolean（ブーリアン）属性は、値が true（真）か false（偽）しかない属性。「論理属性」とも呼ばれます。
この属性は、値がtrueにするときしか使いません。falseなら指定不要。
というわけで、属性値を省略してOK。（例：<input type="radio" checked>）
属性名を値として指定したり（例：<input type="radio" checked="checked">）
空文字列を指定（例：<input type="radio" checked="">） しても「true」です。
HTML5のBoolean属性は下記のものがあります。
- checked（フォームのラジオボタンやチェックボックスで使用）
- disabled（フォーム部品を使用不可にする）
- readonly（フォーム部品を読み取り専用にする）
- required（フォーム部品を入力必須にする）
- autofocus（フォーム部品を自動的にフォーカスする）
- multiple（フォーム部品に複数入力を可能にする）
- novalidate（form要素のバリデーションをOFFにする）
- hidden（グローバル属性。関連性が無いことを示し非表示になる）
- draggable（ドロップ＆ドラッグAPIで、ドラッグ元に指定）
- scoped（style要素に使用すると範囲を限定してCSSを適用できる）
- async（script要素に使用して非同期で実行させる）
- defer（script要素に使用して実行の 保留をさせる）
- reversed（ol要素で番号リストの番号を大きい順にする）
- ismap（img要素などに使用しサーバサイド・イメージマップを指定する）
- loop（メディア要素 (video, audio) でループ再生させる）
W3Cのバリデートサイト「Markup Validation Service」
作ったHTML文書が正しいかどうか、バリデートしてくれるサービスがW3Cにあります。
クリックで別ウィンドウで開きます。
「Address:」の入力欄にサイトのURLを入れて、Check ボタンを押すだけ。
問題箇所があれば「何行目のどの要素がこうだから」と解説まで出してくれます。
問題が無ければ、このような画面になります。
次回予告
次回からは「他のコンテンツの組み込み」のための要素を使っていきましょう。
すでに登場した<img>もこのカテゴリーです。
まずは、この<img>要素にリンク領域を複数作ることができる<map>要素を使ってみます。
- 関連記事
-
- [67]「mediagroup属性」でメディア要素を同期させよう
- [66] 音声をプラグイン無しで組み込もう audio要素・source要素
- [65] 動画をプラグイン無しで組み込もう video要素・source要素
- [64] プラグインで再生されるコンテンツを組み込もう embed要素
- [63] インラインフレームで 他のHTMLファイルを組み込もう iframe要素
- [62] 外部コンテンツを組み込もう object要素・param要素
- [61] イメージマップ（リンク領域）を作ろう map要素・area要素
- （ちょっとメモ）属性の「引用符」や「値」の省略について
- （ちょっとメモ）HTML5 での 省略可能なタグについて
- [60] フォームを美しく整えよう（CSS使用）
- [59] フォームの属性 逆引き一覧 (どの属性がどの部品に使えるか)
- [58] 暗号鍵を作ろう keygen要素（HTML5.2で削除されました）
- [57] プログレスバー（進捗状況）を出そう progress要素
- [56] 数量や割合のゲージを表示しよう meter要素
- [55] 計算結果の出力欄を作ろう output要素
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
コメントの投稿
はじめまして
こちらのサイトにはずいぶんお世話になっています。
[1]から初めて２～３ヶ月程でここまできました。
ざっと入力して感覚を掴んだ程度でまだまだ自分の力になっているという所までは行けてないのですが。
大量にあるであろう情報を丁寧に纏めておられ感服します。
大変かとはおもいますが頑張ってください応援しています！
Re: はじめまして
コメントありがとうございます。励みになります！
じつは....
読んでくださったこの記事までは、最近新しい情報を加えて修正したものですが、
次回からの [61] イメージマップ から、記事が古い情報のままです。
すみません。時間が取れ次第、修正するつもりですが
記事が「古い（かも）」と言うことを念頭に置いて見てやってください。
