空のSPAN要素の「Width指定」が効かないのはなぜ? - ホームページ・Web制作 - 専門家プロファイル

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

空のSPAN要素の「Width指定」が効かないのはなぜ?

法人・ビジネス ホームページ・Web制作 2012/12/10 00:37

空のSPAN要素の「Width指定」が効かないのはなぜ?

Span要素を使って、文字と文字の間に、20ピクセルの空白を空けたいのですが、なぜか上手く行かないのです。
HTMLはこんな感じ↓です。

あいうえお<span style="width:20px;"></span>かきくけこ

DOCTYPE宣言を未指定の場合は意図どおりになるのですが、以下のDOCTYPE宣言を指定した場合は上手く行きません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

空のSPAN要素は非推奨なのでしょうか?だとしたら、それはなぜでしょうか…?
以上、よろしくお願いします。

補足

2012/12/10 00:37

芹川様
こちらの方こそ素早いご回答ありがとうございました。
「クセがある」ということは、CSS設計者のセンスがおかしい証拠ですよね。
広く長く使われるCSSの設計者が、このセンスってどうよ?そう思えてしまうことが、私にはありすぎるほどたくさんあります…。

Hajestiaさん ( 長野県 / 男性 / 31歳 )

回答:1件

芹川 隆

芹川 隆
パソコン講師

- good

ブロック要素とインライン要素をご存知ですか?

2012/12/10 19:43 詳細リンク
(4.0)

はじめまして、GadgetShopの芹川と申します。

下記ご質問ですが…

>空のSPAN要素の「Width指定」が効かないのはなぜ?
>Span要素を使って、文字と文字の間に、20ピクセルの空白を空けたいのですが、なぜか上手>行かないのです。
>HTMLはこんな感じ↓です。
>あいうえお<span style="width:20px;"></span>かきくけこ

ブロック要素とインライン要素をご存知でしょうか。
width(幅)とheight(高さ)を指定できるのはブロック要素のみで、今回のspanはインライン要素になっております。見た目に関する決まり事はブロックレベル要素、文法上はインライン要素、といったイメージになります。

今回、Hajestiaさんがこのソースのまま空白を空けたいのであれば、インライン要素に「display: inline-block;」という指定が別途必要になります。
※ただし、今回のspan要素は下記理由により別の要素に置き換えて頂くことをオススメ致します。

~説明~
仕様でwidthとheightが指定できるインライン要素は5つあります。

・img要素
・input要素
・object要素
・select要素
・textarea要素
・button要素

今回で言うとspanは適用されない要素になりますので、あいうえおとかきくけこをそれぞれ「div要素」や「p要素」で囲みスタイルを適用してはいかがでしょうか。

----------------------------------------------------------------
今回のように特定の箇所ではありませんが段落の文字間隔を設定する
"letter-spacing"というスタイルもあるのでぜひ調べてみてください。
----------------------------------------------------------------

>DOCTYPE宣言を未指定の場合は意図どおりになるのですが、以下のDOCTYPE宣言を指定した
>場合は上手く行きません。
><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >"http://www.w3.org/TR/html4/loose.dtd">
>空のSPAN要素は非推奨なのでしょうか?だとしたら、それはなぜでしょうか…?

DOCTYPE宣言は未指定というのはあまりオススメできません。
きちんと指定してマークアップしていくことをオススメ致します。

こちらで回答になりましたでしょうか。

Gadget Shop 芹川

HTML
仕様
文字
文法
見た目

評価・お礼

Hajestiaさん

2012/12/10 21:28

芹川様
ご回答ありがとうございます。
ブロックレベルとインラインレベルは知っておりましたが、「inline-block」は初耳でした。
手持ちの本にも載ってないので…。ブロックレベルとインラインレベルの中間なのでしょうか?

それにしてもなぜ、Span要素はwidthとheightが指定できない仕様なのでしょう?
Img要素で空白を指定する方法もありますが、そのためにわざわざ透過Gif画像を用意せねばならない。
これは「スマートな仕様」と言えるのでしょうか…?

サイト構築者の「たぶんこうすればいいだろう」という意図と、実際の挙動とが異なる言語は、いい言語とは言えないと思います。
CSSには、そういうところが、多すぎます…。

芹川 隆

芹川 隆

2012/12/10 21:43

早々なご評価また高い評価を頂きましてありがとうございます。

>ブロックレベルとインラインレベルは知っておりましたが、「inline-block」は
>初耳でした。手持ちの本にも載ってないので…。ブロックレベルとインライン
>レベルの中間なのでしょうか?

こちらはインラインの要素をスタイルでブロック要素にするものです。
例えばリンクなどを設定した場合のクリック範囲を大きくするためなどに設定します。

>それにしてもなぜ、Span要素はwidthとheightが指定できない仕様なのでしょう?
>Img要素で空白を指定する方法もありますが、そのためにわざわざ透過Gif画像を用意せねば>ならない。これは「スマートな仕様」と言えるのでしょうか…?

こちらについては明確な回答がWebデザインやレイアウトを拝見していないのでうまく表現できませんが、仕様という言葉で言い切ってしまうにはあまりにもですよね…。

しかしセマンティクスなマークアップをしているのであれば今回の空のspan要素は使わずに済むと思います。色々な書籍があり、HTML/CSSはレンダリングにくせがあるのでコツコツ付き合っていくしかないと私は思います。

質問やお悩みは解決しましたか?解決していなければ...

※あなたの疑問に専門家が回答します。質問の投稿と閲覧は全て無料です。

(現在のポイント:-pt このQ&Aは、役に立った!

このQ&Aに類似したQ&A

ドキュタイプ宣言について park123さん  2013-11-20 15:46 回答1件
グーグル検索結果での問題点について matumatukodomoさん  2011-08-06 03:23 回答4件
動的出力を考慮に入れたHTML・CSSの作成について かなりもりだくさん  2009-05-21 18:21 回答6件
ドリームウィーバー メールフォームが文字化けする マザーリップさん  2009-02-09 15:55 回答1件
専門家に質問する

タイトル必須

(全角30文字)

質問内容必須

(全角1000文字)

カテゴリ必須

ご注意ください

[1]この内容はサイト上に公開されます。

  • ご質問の内容は、回答がついた時点でサイト上に公開されます。
  • 個人や企業を特定できる情報や、他人の権利を侵害するような情報は記載しないでください。

[2]質問には回答がつかないことがあります。

  • 質問の内容や専門家の状況により、回答に時間がかかる場合があります。
気になるキーワードを入力して、必要な情報を検索してください。

表示中のコンテンツに関連する専門家サービスランキング

メール相談

ホームページSEO診断

ホームペーイjの内部SEOに特化したサービス

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

メール相談

アメブロデザインテンプレートカスタマイズ承ります。

アメブロを個性豊かなデザインにしませんか?

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

メール相談

ホームページ(SEO対策)診断

貴社ホームページのSEO対策を診断します

中沢 伸之

ストークデザイン

中沢 伸之

(Webプロデューサー)

その他サービス 格安ホームページ制作
中沢 伸之
(Webプロデューサー)