自分はHTMLやCSSにおいて<img>や<td>に width="100px" とか、
div に { width: 70px } とか、ピクセルの単位を付けて作っています。
どこかの本が単位をつけると教えている……はずだったからです。
今日、HTMLチェックというサービスを行ったら
『不正な設定。数値か%指定にしてください』という様なことをいわれました。
ちなみに用いているDocument宣言は4.01 Transitionalです。幅・高さに
単位はまったく必要ないのでしょうか? 逆に単位を省略してはいけないタグはありますか。
No.2ベストアンサー
- 回答日時:
仕様書を確認してみましょう
属性索引からimg要素のwidth属性を調べてみると
>width = length [CN]
画像・オブジェクトの幅を上書きする。
という記述が見つかります
lengthからリンクを飛ぶと少し上に行った所にピクセルの説明があり
># ピクセル: (DTDでは%Pixels; と表記)の値は、スクリーンや紙などキャンバスに表示する際のピクセル数を表す整数である。
の後に重要な記述があります
>従って、「50」という値は50ピクセルを意味する。
ピクセルに関する規範的情報は、 [CSS1]を参照のこと。
で、
># 長さ: (DTDでは%Length; と表記)の値は、%Pixel;または水平・垂直方向で利用可能な空間に対するパーセンテージである。従って、「50%」という値は、可能な空間の半分を意味する。
つまり widthは「50」などの数字で指定するか「50%」ちいうパーセントで指定することが出来ます
はい…すみません。
数字のみでピクセルなのに、今の思い込みだと「50ピクセルピクセル」と
記述していたんですね。穴をほって入りたい気分です。
お助けありがとうございました。
No.4
- 回答日時:
#1です。
#3さん、
> 後ろのセミコロンはあくまで複数の宣言をまとめる時には区切りとして必要ですが、
> 区切り以外、単一の場合や最後の宣言に付ける必要はありません。
ああ、そうか。
中途半端な知識をひけらかしてしまい申し訳なかったです。
そう言われてみると、CSSを覚えたての頃に
「とにかく最後にセミコロン付けときゃ問題ないんじゃん」と
最後の宣言にも片っ端からセミコロンを付けることに
自分だけのルールとして決めた記憶がよみがえってきました(汗)
と、いうわけで私の回答のうち、CSSに関する部分は撤回させていただきます。
ご指摘有難うございました。
いえいえ。こんなお馬鹿な質問に答えてくださり、まさに恐縮です。
自分も「セミコロンは常に付けておけばいいんだね」と思い至ったほうです。
たとえ記述では忘れていなくても、質問文で付けていなかったらダメですよね。
No.3
- 回答日時:
htmlの属性値については#1さんのおっしゃるとおりで文章型宣言に関わらず数値(=pixel)と%以外は規定されていないので単位なしか%かを適切に使いわけてください。
他で単位が必須の属性とかは・・・その都度HTMLの検証サービスで調べた方が確実です。
あらかじめ知っておきたいのであれば仕様書を確認してください。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …
ただ、長さや大きさなどの単位が必要になりそうなものは基本的にCSSへの移行が推奨されていますので今後はあまり考えなくてもよいかと思います。
CSSについては後ろのセミコロンはあくまで複数の宣言をまとめる時には区切りとして必要ですが、
区切り以外、単一の場合や最後の宣言に付ける必要はありません。
http://www.y-adagio.com/public/standards/tr_css2 …
※追加する時とかに考えなくていいので常に付けておくというのは問題ないです。
W3なんとか…のデータの多さにおののいて、基本中の基本すら
目を通すことをしていませんでした。私は阿呆です。
セミコロンの補足、助かりました。一つだけでも常に付けるクセをつけておけば
うっかりミスが防げますよね。お助けありがとうございました。
No.1
- 回答日時:
width="100px"も{ width: 70px }も誤りです。
HTMLならpxなどの単位は付けません。
width="100" で "100px幅" という意味になります。
単位をつけるとすれば、 width="●●%" ですね。
CSSであれば、{width : 70px}ではなく
{width : 70px;}と記述しましょう。(pxの後の ; にご注意ください)
自分はつけると信じて1年以上やっていました。
お恥ずかしい限りです。セミコロンは質問文では忘れてしまいましたが、
いつも、中身がひとつだけでも付けています。
お助けありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- その他(プログラミング・Web制作) Pythonにおける物理のシミュレーションでの単位変換について 2 2023/06/02 17:11
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
このQ&Aを見た人はこんなQ&Aも見ています
-
性格の違いは生まれた順番で決まる?長男長女・中間子・末っ子・一人っ子の性格の傾向
同じ環境で生まれ育っても、生まれ順で性格は違うものなのだろうか。家庭教育研究家の田宮由美さんに教えてもらった。
-
<a href=#" …>の意味を教えてください。"
HTML・CSS
-
含まない言い方ってどうしたらいいんでしょうか
日本語
-
SELECT INTOで一度に複数の変数へ代入をするにはどのようにすれがよいでしょうか?
PostgreSQL
-
-
4
同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象
HTML・CSS
-
5
【DB】同じトランザクション内でupdateとselectをしたときの結果値
その他(データベース)
-
6
Javascript_submit()完了後に処理したい
JavaScript
-
7
EXCEL VBAで全選択範囲の解除
Excel(エクセル)
-
8
フルパスから最後のディレクトリ名を取得したい。
Visual Basic(VBA)
-
9
PHPのif文でその処理を途中で抜けるにはどうすればよいでしょうか?
PHP
-
10
データベース関係で、データの洗い替えとはどのような事を行うことでしょう
IT・エンジニアリング
-
11
Chr(13)とChr(10)の違いは?
PowerPoint(パワーポイント)
-
12
一部のカラムでdistinctし全てのカラムを取得
MySQL
-
13
自分の質問を「ご質問」と表現
日本語
-
14
javascriptで文字列のsjis利用可能チェックをしたい
JavaScript
-
15
IE と Edge の表示フォントを同じにするには?
InternetExplorer(IE)
-
16
python エラー
その他(プログラミング・Web制作)
-
17
htmlの文字が縦書きになる
HTML・CSS
-
18
IEからEdgeへの移行に伴うIMEの状態(ime-mode)
HTML・CSS
-
19
[Java] Edgeでのアドレスバー非表示について
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
<div>と<div>の間の10px程の...
-
CSSで画像を同じ位置に重なり合...
-
font-sizeが効かない
-
HTMLのiframeの入れ子について
-
CSSでボックスのheightが0になる
-
CSSで左に画像、右にテキストを...
-
CSSがなぜかfont-sizeだけ効か...
-
cssで「下よせ」ってどうやって...
-
HTMLで文字が重なって表示されます
-
画像リンクの下に文字を付けた...
-
firefoxのみテーブルのborderが...
-
table周辺の隙間をなくしたい。
-
Firefoxで見るとli要素レイアウ...
-
CSSで謎の空白ができてしまいま...
-
【CSS】ヘッダーの高さが不明の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報