永遠剣メモ倉庫トップに戻る

HTML5記述テスト資料

HTML5とCSS3の組み合わせでの記述テスト資料ページ。

このサイトのhtmlのソースコード記述は
2003年のサイト開設以来約21年間にわたりHTML3だったが、
HTMLのバージョンはとっくの昔にHTML5やCSS3になって久しい。

サイト整備を色々行ってきた最終段階として惰性の運営を脱するべく、
「HTML3がメジャーなWebブラウザで動作しなくなる」事態の回避を目的に
2024年に「HTML5とCSS3での記述へのリファクタリング」に踏み切った。

2024年10月19日(土)作業完了。

CSSファイル

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
セレクター(予約語)等に記述しCSS呼び出し時点で適用される
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

--------------------------------------------------------------------------------

●color系

HTML3での旧body要素指定系。
HTML3でbodyに続く「bgcolor」「text」「link」「vlink」「alink」は、
HTML5では記述できる場所や方法がやや散り散りになっており
それに対応した記述をCSS側で行っている。

▼bodyに適用

CSS記載に変更。
デフォルトの背景色はbodyの「background-color」に指定、
デフォルト文字色はbodyの「color」に指定。

▼a要素用セレクター

CSS記載に変更。
未訪問リンク色はセレクター「a:link」にcolorで指定、
アクティブなリンク色はセレクター「a:active」にcolorで指定、
訪問済リンク色はセレクター「a:visited」にcolorで指定。

--------------------------------------------------------------------------------

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
全編を通じて使用する前提の記述
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

--------------------------------------------------------------------------------

●p要素の配置

HTML3では「align」で指定していたが、HTML5では削除されている。
HTML5ではCSS側でtext-alignで指定。

左配置についてはCSS側でbody pに左配置を指定、
HTML5側ではその設定の適用を前提にpの指定をなくしている。

p要素配置のテスト・左(CSS側でデフォルト化)

p要素配置のテスト・中

p要素配置のテスト・右

--------------------------------------------------------------------------------

●表の配置

サイト整備の過程でデフォルトの左端寄せ以外の表配置が無くなった為、
現状ではdiv要素の指定を削除することで対応予定。

HTML3ではtableを「div」で囲んで「align」だけで表の位置指定ができたが、
HTML5ではその方法が削除されており表の位置指定は別の記述が必要。
詳細は本ページの後半で、おまけの資料として掲載。

また、HTML3ではborderによる枠線の指定がtableで一括で可能であったが、
HTML5ではtableとtrとtdそれぞれに指定が必要になっている為、
それも個別指定する形に記述を変更。

▼基本的な配置

▼一部ページ向けのテキスト左揃え・中央揃え・右揃え

--------------------------------------------------------------------------------

●文字色の変更

シンプルにカラーコード(24bitカラー)で指定。
HTML3にはあった「font color」はHTML5では廃止。
HTML5ではCSSに「color」を記載した上で「span」要素で指定。

文字色のテスト・赤

文字色のテスト・暗い緑

文字色のテスト・青

文字色のテスト・紫

文字色のテスト・マゼンタ

文字色のテスト・暗いグレー

文字色のテスト・白

--------------------------------------------------------------------------------

●文字サイズの変更

CSS3における絶対指定の全7段階に対応可能だが、
4段階目の「medium」は未指定時と同じ大きさのため基本は使用しない予定。
(稀に調整やテストを目的に使用する可能性あり)

HTML3にはあった「font size」はHTML5では廃止。
HTML5ではCSSに「font-size」を記載した上で「span」要素で指定。

文字サイズのテスト・xx-small

文字サイズのテスト・x-small

文字サイズのテスト・small

文字サイズのテスト・medium

文字サイズのテスト・large

文字サイズのテスト・x-large

文字サイズのテスト・xx-large

--------------------------------------------------------------------------------

●文字色と文字サイズの同時変更

ひとつの「span」の中で、
半角スペース区切りで文字色と文字サイズを同時指定。
前述の通り、4段階目の「medium」は未指定時と同じのためCSSではCO(class未指定)。

文字色と文字サイズの同時設定テスト赤xx-small

文字色と文字サイズの同時設定テスト赤x-small

文字色と文字サイズの同時設定テスト赤small

文字色と文字サイズの同時設定テスト赤medium

文字色と文字サイズの同時設定テスト赤large

文字色と文字サイズの同時設定テスト赤x-large

文字色と文字サイズ同時設定テスト赤xx-large

--------------------------------------------------------------------------------

●リンクの色指定確認用リンク

a要素の確認、色指定はスタイルシート側のセレクター(予約語)。
下記リンクはシャープ(その場遷移)のみ。

リンク表示テスト

--------------------------------------------------------------------------------

●imgのサイズ指定の確認

以下、横1200縦1200のイラストで動作テスト。

▼原寸・widthとheightは未指定

▼半分・widthをpx単位で指定(600px)、height未指定

--------------------------------------------------------------------------------

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
将来的に使用する可能性があるかもしれない記述
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

即実戦投入というわけではない実験的な内容の為、
下記内容はCSSファイルに書き込まずHTMLソース側に直接styleを記述。

--------------------------------------------------------------------------------

●div要素を残し「display」と「justify-content」で表配置

有識者であるmさん曰く
「divで配下のtable以下の位置を調整するなら無難な挙動の記述」とのこと。
divの子要素…ここではtableをdiv側からの指定でflex状態にした上で、
justify-contentの値でtableの位置を操作する。

▼justify-contentの値が「left」

tableが左。

▼justify-contentの値が「center」

tableが中央。

▼justify-contentの値が「right」

tableが右。

--------------------------------------------------------------------------------

●tableで「margin」に「auto」を指定し逆方向に押し出す表配置

有識者であるmさん曰く「裏技的な挙動の記述」とのこと。
(中央寄せ目的で使うことはあるそうだが左寄せと右寄せは…)

▼margin-right

「margin-right」に「auto」を指定した場合、
右から左端まで押し出される。
結果として、tableが左。

▼margin

「margin」に「auto」を指定した場合、
左右均等に限界まで押し出される。
結果として、tableが中央。

▼margin-left

「margin-left」に「auto」を指定した場合、
左から右端まで押し出される。
結果として、tableが右。

--------------------------------------------------------------------------------

●ソースコード記述協力：mさん
●ページ作成：2024年08月12日(月)
●最終更新：2024年10月03日(木)
●リファクタリング作業完了：2024年10月19日(土)