ブロック要素とインライン要素をご存知ですか? - 専門家回答 - 専門家プロファイル

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

芹川 隆
パソコン講師

- 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は、役に立った!

この回答の相談

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

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

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

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

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

この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件