vanillaice (Akira)

vanillaice (Akira)

sample「tableタグが使えません」「hspaceが使えません」「フォントが等幅になりません」
といったご質問が非常に多いので記します

現在のweb標準HTML規格 = HTML5
私のテンプレート = 全てHTML5

html5(大文字・小文字の別に意味はありません 癖です(笑)) ではこれまで有った「html要素」「html属性」が廃止 または 非推奨 または 変更 されております
特に「廃止」となったものについては html5のテンプレートでは使えないと思って頂いて間違いではありません

何故廃止や非推奨になるかというと
それは「構造上の問題になったり」「不要になったり」したからです
html4から5に移行するのに
構造と装飾の分離
というのが一つの大きな目的になっているかと思います
その理由は htmlというのは「意味」であり「定義」であって
見た目の「スタイル」「見栄え」とは一切関連を持つべきではないからです
htmlというのは例えば「音声読み上げ」なんかで一役買っていますよね
html構造が正しくない あるいは装飾によって解釈が妨げられる なんてのは理にかなっておりませんし
また「検索システム」もhtmlが正しければ正しいほど 正確の情報が発信・受信できるようになるわけです
検索に装飾など不要なんです

装飾
というと背景が「画像である」だとか
「アイコンがある」だとか
そういったことに注意が向きますが そうではなくて
web標準では文字は左寄せ・横書き ですよね
この水平位置を変更してセンタリングしたり右に寄せたり
文章を縦書きにしたり
はたまたスクロールバーの位置を左にしたり
これ即ち「装飾」にあたります
文字の色を変更することもそうです

html5では「全ての装飾はCSSにお任せしましょう」という大前提がありますので
それに沿って多くのhtml要素・属性 特に装飾に絡むものが排除されております
表に於ける「セル周りの空白」「ボーダーの有無」等々 も含まれます

以下は個人的に よく使われており重要であろうと思うものについて表にまとめたものです
全てを網羅しているわけではありません
あくまでもFC2ブロガーさんが使っているのではないか と私が推測するものに限定しています

「あれー!なんか今まで通りにやってるのにできない!」
という場面に出くわしましたらご参照くだされば幸いです


要素名or属性名関連要素名扱い用途説明廃止に於ける代替
href属性
<a>
変更リンクする先のURL必須属性ではなくなった
記述が無い場合は
<a>
はプレースホルダー(場所確保)として扱われる
-
target属性
<a>
変更リンクを開く際の選択肢(_self, _blank, _top, _parent)_blank の選択肢が非推奨ではなくなった-
rel属性
<a>
変更リンク先リソースの位置づけユーザーの自由拡張が不可に(規定値のみに変更)
プラグインのソースに含まれていることがよくあります
-
name属性
<a>
廃止リンクされる側の指定, ページ内移動-id属性による指定
background属性
<body>
廃止背景の指定-CSSプロパティ background
bgcolor属性
<body>
廃止背景色の指定-CSSプロパティ background-color
link属性
<body>
廃止未訪問リンクの色指定a擬似クラスは記述順序が決まっています
LoVeHAte(link, visited, hover, active)
下手に指定しない方が無難
CSS a:link {値;}
alink属性
<body>
廃止選択中リンクの色指定同上CSS a:hover {値;}
vlink属性
<body>
廃止訪問済リンクの色指定同上CSS a:visited {値;}
clear属性
<br>
廃止回り込み解除-CSS clear: left/ right/ both;
align属性
全て
廃止水平位置指定(ブロックレベル要素内のインライン要素に作用)-CSS text-align: left/ center/ right;
vlign属性
多岐
廃止垂直位置指定(ブロックレベル要素内のインライン要素に作用)-CSS vertical-align: top/ middle/ bottom;
width属性
多岐
一部廃止要素の横幅指定
<img>
要素などには使えるが
<table>
などでは廃止
CSS width: 値(ゼロ値以外は単位必須);
height属性
多岐
一部廃止要素の縦幅指定
<img>
要素などには使えるが
<table>
などでは廃止
CSS height: 値(ゼロ値以外は単位必須);
hspace属性
<img><object>
廃止画像左右の余白-CSS 画像に対し margin あるいは padding指定
vspace属性
<th>
廃止画像上下の余白-CSS 画像に対し margin あるいは padding指定
abbr属性
<th>
廃止見出しセル内テキストの略称指定(正式名称記述)この記述は公式プラグインのカレンダー内に含まれます 要削除title属性
cellspacing属性
<table>
廃止セル周りの空白指定-CSS cellspacing: 値;
cellpadding属性
<table>
廃止セル内の空白指定-CSS padding: 値;
<td>
に対してのみ有効
border属性多岐廃止画像周りやセル周りのボーダー(枠線)-CSS border: 太さpx スタイル 色; (ショートハンド(略式)の場合)
abbr要素-変更テキストの略称指定(正式名称記述)abbr属性とは別物です
<acronym>
要素が廃止されて
<abbr>
に一本化
-
center要素-廃止ブロックレベル要素のセンタリング-CSS margin: 0 auto;
font要素-廃止フォント指定-CSS font-family: 値;
strike要素-廃止取り消し線-CSS text-decoration: line-through;
strong要素-変更強調html4での定義よりもより強い強調を示す
フォントを太くするためのものではない(フォントを太くする必要もない)
文字を太くするためだけに使ってはならない

文字の見た目を太くするだけならば CSS font-weight: bold; を利用
-
tt要素-廃止等幅フォント-CSS font-family: monospace;



表で作成していますのでスマホからはヒジョーに見辛いものとなっております((((笑)
ごめんなさいね ^^;
関連記事

Comments 0

There are no comments yet.

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
該当テンプレートの専用記事にお願いします。無関係な記事でのコメントはお控えください。
テンプレートカテゴリ