(ちょっとメモ)属性の「引用符」や「値」の省略について

属性値の「引用符」を省略できる場合がありますので、その条件をまとめます。
それから「属性値」そのものを省略できる「Boolean属性」というのもあります。

属性値の「引用符」を省略できる場合

引用符とは、「 "(ダブルクォーテーション)」 や「 '(クォーテーション)」のこと 。
HTML4、HTML5は、「 " " 」と「 ' ' 」のどっちで囲んでも良いのですが、
HTML5では「属性値」の記述に下記が含まれていなければ、引用符の省略OK。

引用符を省略できない属性値の内容
  • 空白スペース
  • <(小なり記号 less-than sign)
  • >(大なり記号 greater-than sign)
  • '(クォーテーション)
  • "(ダブルクォーテーション)
  • `(バッククォート)
  • =(イクォール)
<input type="text">  <!--ダブルクォーテーションで囲んでも、もちろんOK-->
<input type='text'>  <!--クォーテーションもOK-->
<input type=text>  <!--以下は引用符無しでOKな例-->
<input type=number min=0 max=20 step=5>
<div id=container>
<span class=red>
<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属性は下記のものです。

*リンクの無い要素は、まだ紹介していません。今後記事にしていきます。

W3Cのバリデートサイト「Markup Validation Service」

作ったHTML文書が正しいかどうか、バリデートしてくれるサイトがあります。

クリックで別ウィンドウで開きます。

「Address:」の入力欄にサイトのURLを入れて、Check ボタンを押すだけ。

何か問題箇所があれば、「何行目の、どの要素が、こうだから」と解説まで出してくれて超便利。

問題が無ければ、このような画面になります。

次回予告

次回はまたまた「ちょっとメモ」で、
SyntaxHighlighter(シンタックス ハイライター)の使い方をメモっておこうと思います。

その次からは「他のコンテンツの組み込み」のためのHTML要素を使っていきましょう。
すでに登場した<img>もこのカテゴリーです。
まずは、この<img>要素にリンク領域を複数作ることができる<map>要素を使ってみます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

テーマ : webサイト作成
ジャンル : コンピュータ

tag : HTML5 属性

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.