HTMLタグでのCSSの記述について

Question

いつもお世話になっております。

HTMLタグでCSSを記述する際にstyle=""として記述しているものと、
そうでないものがありました。

<td width="10%"> ~ <td style="width:10%">

これは違いがあるのでしょうか。
初歩的なことで申し訳ございませんが、
ご回答のほどよろしくお願いいたします。

Answer 1

<td width="10%">

これは CSS ではなく、単なるHTMLです。
td タグに width 属性が用意されているだけです。

<td style="width:10%">

こちらはCSSですね。

どちらも結果は同じになるんじゃないでしょうか。
じゃぁどちらを使えばいいの？ということになりますが、

「見た目」に関しては全てCSSで行ってください。
HTMLにもCSSと同じような属性が用意されているものもありますが、
非推奨のものが多いです。使わずにCSSでやってくれということです。

非推奨と公言されているわけですから、いずれ無くなってしまうかもしれないのです。

CSSがここまで当たり前に普及する前に使われていた、過去の遺産です。
今後は使うのはやめましょう。

HTMLは文書構造（ここがヘッダ、ここがフッタ、ここがメニュー、ここがメインコンテンツなど）
CSSは見た目（色、大きさ、位置など）
です。

迷った時にはこの切り分けを意識するといいです。

Comments

[sakusa]

root_jpさん、ご回答ありがとうございました。
結果は同じなのに書き方が2パターンあるなんて。。。と悩んでおりましたが、
すっきりすることができました。
非推奨は使わないようにします。ありがとうございました。

Answer 2

width="10%”は属性値、style="width:10%”はスタイルでの指定ですので、細かな点で見れば違いがあります。
width="10%”で指定した場合、cssを無効にしても値が保持される。
style="10%”で指定した場合、cssを無効にすれば値が解除される。

一般的には使い勝手のいい外部cssで指定することが多いかと思います。

<style> table td { width: 10%; } </style>

スタイルを一括指定すれば手間が省け、修正の際も一箇所を直すだけで済みます。

その他、imgなどはwidth=“○×”、height=“○×”の属性値を入れた方がレタリング速度が上がるという話がありますので、もしかするとtable要素でも同様の効果があるかもしれませんが、検証したことがないので詳しくは分かりません。

ご参考になれば幸いです。

Comments

[sakusa]

na533、詳細のご回答ありがとうございました。
cssを無効にするということもできるのですね。
確かに一括で修正できたほうがいいですから、styleで行こうと思います。
レタリング速度というものも考慮したほうがいいのですね。勉強になりました。
ありがとうございました！

Answer 3

下記は、属性に値を設定しています。
なので、該当するタグがその属性に対応していないと、設定自体無効になります。

<!-- tdはwidth属性が使えるので有効 -->
<td width="10%"> 

<!-- tdにhref属性を設定してもリンクにはならない -->
<td href="http://sample.jp">

下記は、style属性を利用して、CSS設定を適用する方法です。
CSSのプロパティを利用する場合は、こちらとなります。

<td style="width: 10%;"> 

<td style="padding-top: 10px;"> 

<!-- 下記は無効 -->
<td padding-top="10px"> 

widthとheightについては、tdタグのように特定のタグについては属性として設定されているので、
width="10%"でも使える場合があります。

Comments

[sakusa]

yamato_hikawaさん、
詳細にご回答いただきありがとうございました！
styleという属性を利用してCSSを設定する、ということなのですね！
またタグには使用できる・できない属性があるのですか。。覚えることが多いです＞＜
勉強になりました！ありがとうございました！

Answer 4

style="" となっているのは、CSS。
width="" というのは、プロパティ（属性）になります。

では何が違うのかというと。。。。

• td width="10%"

こちらは HTML4 の記述方式になります。
ブラウザ側で拡張解釈されているのか、HTML5 文書でもこの記述で横幅の設定ができることが多いです。
ただし、厳密には HTML5 文法としてNG ですね。

• td style="width:10%"

こちらは CSS で横幅を指定しております。
HTML5 では、こちらで記述するのが正しいです。

（間違ってたらごめんなさい）

Comments

[sakusa]

uskさん、早速のご回答ありがとうございました。
CSSとプロパティをはっきりと区別していませんでした。
しっかりstyleで記述していきたいと思います。
ありがとうございました！