見出し画像

継続は力なり#39

その他の要素


主題の変わり目

「hr要素」は元々は単純に横線を表示させるだけの空要素だった
HTML5から変更され、線を表示させるのが目的ではなく、その部分で話題(または物語の場面など)が変わっていることを示すことが目的の要素となった
セクションレベルでの大きな主題の大きな変わり目で使用するのではなく、段階レベルでの小さな変わり目に使用することが想定されている
役割の変更はあったが、現在でも一般的なブラウザにおいては横線として表示される事に変わりはない

HTML

<p>
僕はhr要素の「エイチ・アール」は何の略なのか先輩に聞いてみた。
「ヘアライン」だと先輩は言った。
それなら「エイチ・エル」にならないですが、と僕は聞き返した。
先輩は無表情で僕の顔を3秒ほど見つめてから、そんなこと気にしないで
自分へのヘアラインが後退しないように気楽に生きた方がいいぞ、と言った。
その話はそれで終わった。
</p>
<hr>
<p>
翌日の午後、今度はul要素の「ユー・エル」が何の略であるのか尋ねてみた。
先輩はパソコンの画面を見つめたままで「ウルサイ」の略だ、と言った。
そして「そんなことぐらい自分で調べるもんだぞ。ほら、そこに
「よくわかるHTML5+CSS3の教科書」があるだろう。
その本にはちゃんと書いてあるから、しっかり読んだ方がいいぞ」と続けた。
</p>


追加と削除

「ins要素」はあとから追加された部分、「del要素」はあとから削除された部分を表す要素
一般的なブラウザでは、ins要素は下線付きの状態で、del要素は取消線が引かれた状態で表示されるが、表示方法についてはCSSで自由に変更できる
これらの要素は、インラインの範囲にでもマークアップできる

ins要素・del要素 に指定できる属性

・cite="ファイルのURL"
追加・削除した理由が書かれているページのURLを指定する

・datetime="変更した日時"
追加・削除した日時(時間はなくても可)を「2020-04-08」や「2020-04-08 13 : 00」といった書式で指定
仕様上はこのほかのさまざま書式も用意されており、「2020-04-08T13 : 00」のように日付と時間の間を大文字の「T」で区切ったり、「2020-04-08 13 : 00:55+09:00」のようにタイムゾーンを付加することなどができる


HTML

<h1>To Do リスト</h1>
 
<ul>
<li>『よくわかるPHPの教科書』を購入</li>
<li><del datetime="2020-04-08">『よくわかるHTML5+CSS3の教科書』の原稿執筆
</del></li>
<li><ins datetime="2020-04-08">『CSS3妖怪図鑑』の原稿執筆</ins></li>
</ul>


スクリプト

「script要素」は、HTMLにスクリプトを組み込むための要素
CSSの場合、要素内容としてCSSを書き込むなら「style要素」、CSSのファイルを読み込むなら「link要素」と使い分けが必要だったが、script要素の場合はこれだけで要素内容としてスクリプトを書き込むことも外部のファイルを読み込むことも可能

以下の値が指定できるが、要素内容としてスクリプトを書き込むことができるのは、src属性を指定していない場合に限られる
「src属性」を指定した場合は、要素内容は空にしておかなければなりません
(コメントによる注意書きなどは入れられる)

script要素 に指定できる属性

・src="ファイルのURL"
スクリプトを記述したファイルのURLを指定

・type="MIMEタイプ"
スクリプト言語のMIMEタイプを指定できる
script要素は元々JavaScript専用ではなく、JavaScript以外のスプリクト言語にも対応できるようになっているため、この属性が用意されている
この属性を指定しなかった場合は「text/javascript」が指定された状態となる

・charset="文字コード"
src属性で指定しているファイルの文字コードを示す


HTML

<script src="js/example.js"></script>
 
<script>
〜スクリプト〜
</script>

スクリプトが動作しない環境向けには

スクリプトは全てのユーザーの環境で動作するわけではない
意図的にスクリプトが動作しないように設定している人もいるし、そもそもスクリプトが動作しない(一般的ではない)ブラウザを使用している人もいる
そのようなスクリプトが動作しない環境向けの内容を別途用意しておきたい場合には、「noscript要素」を使用する
この要素の要素内容は、スクリプトが動作する環境では無視されるが、動作しない環境においては有効となる

noscript要素は、body要素内で使用できるだけでなく、head要素内で使用することも可能
その場合は内容としてlink要素・style要素・meta要素が入れられる


インラインフレーム

「iframe要素」を使用すると、Webページの中に別のWebページをインラインの状態で表示させることができる
要素内容は、インラインフレームが表示できない時に限り表示される
この要素は、Youtubeの動画や一部の広告などをWebページに組み込む際に利用されている

iframe要素 に指定できる属性

・src="ページのURL"
インラインフレームの中に表示させるページのURLを指定

・width="幅"
インラインフレームの幅をピクセル数(単位をつけない整数)で指定

・height="高さ"
インラインフレームの高さをピクセル数(単位をつけない整数)で指定

・name="フレーム名"
インラインフレームの名前を指定
この名前は、リンク先を表示させるフレームとして a要素の target属性の値などで指定できる


HTML

・・・
<body>
 
<iframe src="index-2.html" width="250" height="150">
</inframe>
 
</body>
</html>

HTML(index-2)

・・・
<body style="background: steelblue">
 
<p>
これは「index-2.html」の内容です。
このページは、body要素にstyle属性を指定して、背景を青くしています。
</p>
 
</body>
</html>