- ベストアンサー
HTMLソースの中で、画像を表示する場合、サイズ、高さにPXをつけない
HTMLソースの中で、画像を表示する場合、サイズ、高さにPXをつけないのはなぜでしょうか。 たとえば、<img src="画像名" width="300" height="200" alt="xxx">と記述します。 なぜ、"300px" "200px" としないのでしょうか。pxがつくと画像が表示されないからということではなく、そもそもpxを省略している理由ってあるのでしょうか。
- usausa7
- お礼率81% (90/110)
- ホームページ作成ソフト
- 回答数2
- ありがとう数6
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 単位指定(単位識別子)はHTMLとCSSとでは厳密には違ってきます。 質問者さんは理解されてるようなので、その解釈で良いと思いますよ。 (↓既に学習済みなら読み飛ばしてください) CSS2の仕様書を見てみましょう。 「CSSによる長さの値には必ず単位識別子を付けなければならない」 と明記されています。 しかし実際にはIEやFirefoxなど単位識別子を付けなくても指定値通り表示しますね。 これはブラウザが持つ冗長性によるものだと考えられます。
その他の回答 (1)
- torayoshi
- ベストアンサー率62% (910/1449)
省略するというか、そもそも仕様書には「属性値：整数(pixels)及びパーセンテージ(%)」とあります。 つまり「整数(数値)のみでpx指定とする」ってことです。
お礼
ありがとうございます。いつも、「そういうもの」と思って書いていたのですが、CSSでは、widthはpx指定の場合「width:200px;」とpxを書くので「あれ？」と思いました。 単純に、cssのときは指定があれば200pxや200%と書いて、 htmlソース上では、width:200 と書けば、pxのことと受け止めてもらえるということですね。 違っていたらまた教えてください。
関連するQ&A
- ブログの画像サイズ大きくしたい
記事の記述方式を［HTML］と選択している場合、こちらのソースをご利用いただくことで記事の中に画像を 配置することができます。と云うことですが 640×480の画像を表示させたいのですが下記のソースでは300×225のサムネイル画像が表示されます、当然ですが <div class="msg-pict"> <img src="http://******.asablo.jp/blog/img/2017/08/03/49a580.jpg" alt="" title="" width="300" height="225"></div> width="300" height="225"の数値をwidth="640" height="480"に変えるとサイズは640×480になりますが拡大されるだけです。 元画像サイズ640×480にするHTML記述を教えていただけないでしょうか。
- ベストアンサー
- HTML
- 画像を右下から詰めて表示したい
画像を、テーブルを使わずに右下から詰めて表示したいのですが方法がわかりません。 少し歪ですが、下のようにしたいのです。中抜きの四角（□）の方向に随時増えていく予定です。 ←□■■ ■■■■■■■■ ■■■■■■■■ ■■■■■■■■ ←ここからスタート htmlとcssは次のように書いてみたのですが、そうすると上から詰めているような かんじになってしまいました。あまり詳しくないのですが、そもそもリストで表示しようとするのが いけないのでしょうか…？どなたかよろしくお願いいたします。 <ul> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> </ul> ul{ list-style:none; text-align:center; } li{ width:21px; height:17px; float:right; }
- ベストアンサー
- HTML
- HTML（画像の幅や高さの設定について）
HTMLで画像の幅(width)や高さ(height)を設定する際、 次のようにピクセル「px」は省略してもよろしいのでしょうか？ 【例】<img src="images/logo.gif" width="200" height="300">
- ベストアンサー
- その他（インターネット・Webサービス）
- 【HTML】画像と画像の間に「_」が入ってしまう
画像のように勝手に画像と画像の間「＿（アンダーライン）」が入ってしまいます。どのようにすればこのアンダーラインを消せますか？ ■HTML■ <div id="imglink"> <a href="hogehoge1"> <img src="hogehoge1" width="88" height="31" alt="okwave"> </a> <a href="hogehoge2"> <img src="hogehoge2" width="88" height="31" alt="okwave"> </a> <a href="hogehoge3"> <img src="hogehoge4" width="88" height="31" alt="okwave"> </a> </div>
- ベストアンサー
- HTML
- テーブル（HTML）と画像のレイアウトについて
WEB画面のレイアウトについて質問があります。 HTMLのtableタグを使ってその中のtdタグにimgタグで画像をセットすると 高さ（height）に微妙な間ができてしまいます。 この現象を回避するにはどうすればよいでしょうか？ ↓HTMLソース <table> <tr> <td><img src="GIF画像" alt="XXX" width="755" height="26"></td> </tr> </tabld> ※heightが指定値より若干高くなる どなたか良い回避策をご存知でしたらご教示下さい。 お願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- HTML CSS 表示画像のサイズ
表示画像のサイズについて。元の画像サイズはばらばらです。 初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{ width：100 height：100 border：2 } としたのですが、うまくいきません。なぜでしょうか？
- ベストアンサー
- HTML
- リストタグに画像を入れた場合
リストタグに画像<img>タグを入れたのですが、Firefoxでは隙間なく表示されますが、IE6で確認すると、画像の下に隙間ができてしまいます（3pxほど）。 何か修正点や、解決策があればお願い致します。 そもそも、リストタグに画像を入れることがおかしいのでしょうか？ 【HTML】 <ul id="navi"> <li><img src="../img/aaa.gif" width="200" height="50"></li> <li><img src="../img/bbb.gif" width="200" height="50"></li> <li><img src="../img/ccc.gif" width="200" height="50"></li> <li><img src="../img/ddd.gif" width="200" height="50"></li> </ul> 【CSS】 ul#navi{ margin: 0px; padding: 0px; } ul#navi li{ margin: 0px; padding: 0px; list-style-type: none; list-style-position: outside; display: block; width: 200px; height: 50px; }
- 締切済み
- HTML
- css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（
css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（超初心者です。） 現在、Kompozerをつかってホームページを作成しています。 添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。 現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。 あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。 ご指導いただければうれしいです。 よろしくお願いします。 ＊ソース <html><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>ページタイトル</title> <style type="text/css"> </style> </head><body> <div style="text-align: center;" background-image:="" url ＊＊.jpg ;width:450px;height:450px;=""><br> <br> <img style="width: 137px; height: 137px;" alt="" src="＊＊.gif" border="0"><br> <br><p style="text-align: center;"> <a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><img style="width: 92px; height: 230px;" alt="" src="＊＊.jpg"><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><br></p> </div> </body></html>
- ベストアンサー
- HTML
- ThickboxでHTMLを指定サイズで表示したい
ThickboxでHTMLページを指定したサイズで表示させたい。 お世話になります。 自社サイトでthickboxを使用したいと考えています。既に画像をクリックして大きな画像を表示させる（オーバーレイ表示）ためにthickboxを導入しており、それは比較的簡単だったのですが、今回は別個に作成したHTMLページを同じようなデザインで表示させたいと思っています。 いろいろなサイトを参考にしてこのようなソースになりました。table{width:800px;height:600px}が記述されたsample01.htmlというページをやはりwidth:800px、height:600pxでthickboxでオーバーレイ表示させたいというのが目標です。 <head> <link href="css/thickbox.css" rel="stylesheet" type="text/css" media="all"/> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></script> </head> <body>～中略～ <a href="sample01.html?width=800px&height=600px" class="thickbox"><img src="images/sample02-small.jpg" alt="画像の説明" border="0"></a> </body> ところが、一応Thickboxは機能するのですが、キレイな形で表示されず、またその理由もよく分からず困っています。初心者なので、つまらないところで行きつまっているかもしれませんが、どうか知恵をお貸し下さい。 ※分からない点 (1)800×600px指定しているのに、小さいサイズで表示され、その文スクロールバーが表示される。インラインフレームのようなデザインにしたくない。 (2)上部にグレー部分ができる（Closeボタン用だと思われるがいらない）。既に画像を表示させる際の場合のように右上部に自分で制作したボタンを配置してCloseボタンとしたい。 既に作成したthickboc.cssは--- #TB_closeWindow{ position:absolute; width:30px; height:30px; top:-15px; right:-15px; } #TB_closeWindowButton{ background-image:url(../images/button-thickbox-close.png); position:absolute; width:30px; height:30px; } (3)表示させたHTMLが文字化けする。 <script type="text/javascript" charset="Shift_JIS"></script>指定しています。 以上です。どうかご教示よろしくお願いします。
- 締切済み
- CSS
- フォントサイズでレイアウトがずれる？
cssでページレイアウトをしているのですが、 外部cssでサイト全体のフォントサイズを13pxにした場合 body { font-size: 13px; } 同じ画像なのに（四角のボタン）下部分の1pxの底辺が表示されるものとされないものが出てきました。 HTMLの記述内容は以下の通りです。 <div class="menu"> <p><img src="/img/**1.png" alt="" width="180" height="33"></p> <p><img src="/img/**2.png" alt="" width="180" height="33"></p> <p><img src="/img/**3.png" alt="" width="180" height="33"></p> <p><img src="/img/**4.png" alt="" width="180" height="33"></p> </div> <p>にmargin、paddingなどは設定していません。 この場合、画像、ｃｓｓ共に同じ条件であるはずなのに、3番目の画像だけ上記のような不具合がおこりました。 フォントサイズを14pxにした場合、問題なく表示されます。 firefoxで確認したところは13px,14px共に、きちんと表示されていました。 ちなみにブラウザはIE6です。 ブラウザのバグか何かでしょうか？？ 申し訳ありませんが、どなたかご教授お願い致します。
- ベストアンサー
- HTML
お礼
コメントくださってありがとうございます。 >「CSSによる長さの値には必ず単位識別子を付けなければならない」 そういう決まりがあったんですね。たしかに、CSSではpxなどとつけないで数値のみにすると、反映されないです。 HTMLではどちらでも（書いても書かなくても）、おっしゃる冗長性？とかで表示上は問題ないのですね。 DOCTYPEの種類によって、ゆるいもの、きびしいもの、あるいは互換モードや標準モードとありますが、このあたりで変化があるかと思いましたが、DOCTYPEは関係ありませんでした。 XHTMLではどうかわかりませんが、とりあえずHTML上のこの件についてはやっとスッキリしました。ブラウザ側がまだまだあいまいな状態ですので、厳密に結論を出せない部分も多いかと思います。 細かい疑問にも関わらず、教えていただきましてありがとうございました。