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

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

注目のQ&AランキングRSS

対象:ホームページ・Web制作

芹川 隆

芹川 隆
パソコン講師

- good

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

2012/12/10 09:33
(
3.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 芹川

補足

他の質問に対する回答がこちらに反映されてしまいました。大変失礼致しました。

>ブラウザ上で、Imgタグを使って画像を拡大表示させると、勝手にアンチエイリアスが
>かかり、ピントがぼやけたような画像になってしまいます。
>このアンチエイリアスをさせないで画像を表示させるHPを作りたいのですが、どのような
>方法で実現可能でしょうか?
>IEとFirefoxでは、CSSに以下の記述をすれば可能になることが分かりました。
>
>-ms-interpolation-mode: nearest-neighbor;
>image-rendering: -moz-crisp-edges;
>
>しかしOreraとGoogleChromeで実現させる方法が分かりません。
>どなたかご教授いただければ幸いです。
>よろしくお願いします。

上記のご質問ですが、image-rendering プロパティは、
OperaやSafariとGoogleChrome(WebKit)ではまだサポートされていないものだという認識です。

下記URLを参考にご利用頂いているプロパティの対応状況など一度チェックしてみると良いかもしれません。ご参考までに。

◆CSS3プロパティ&ブラウザ対応一覧
http://ebisu.com/memo/css3

質問
HTML
仕様
文字
見た目

評価・お礼

Hajestia さん

2012/12/10 21:27

芹川様
ご回答ありがとうございます。
やはりアンチエイリアスを無効にはできないのですか…。
それにしてもなぜ、有効ができて無効ができないのでしょう?
技術的には簡単だし、それが必要な場面もあるのに…。
この件については不思議でならないので、別質立ち上げさせていただきました。

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

この回答の相談

すべてのブラウザ上で、アンチエイリアスを無効にするには?

法人・ビジネス ホームページ・Web制作 2012/12/04 17:51

ブラウザ上で、Imgタグを使って画像を拡大表示させると、勝手にアンチエイリアスがかかり、ピントがぼやけたような画像になってしまいます。
このアンチエイリアスをさせ… [続きを読む]

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

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

なぜアンチエイリアスを無効にできないのか? Hajestiaさん  2012-12-10 21:29 回答1件
どうしても画像がずれてしまいます yurimonさん  2009-06-02 07:55 回答1件
動的出力を考慮に入れたHTML・CSSの作成について かなりもりだくさん  2009-05-21 18:21 回答6件
サイトマップのGoogleインデックス登録について mrtcさん  2013-10-25 18:09 回答2件
Amebaブログのデザイン変更について tcnさん  2013-10-04 08:51 回答1件