- 締切済み
CSS：エンベッド方式とインライン方式。
Fukurowの回答
- Fukurow
- ベストアンサー率43% (50/114)
直接、ご質問とは関係ありませんが、私もＸＨＴＭＬとＣＳＳでホームページを作成・運営しておりますが、作成ソフト（Dreamweaver）から切り替える際に、ブラウザによる表示結果の違いに悩まされました。 いろいろ調べてみると、ブラウザのバグによるものとわかりました。 アメリカには、こうしたバグに対する回避策をまとめた専門のサイトがあるほどです。興味がありましたら一度覗いてみるといいでしょう（ただし、英文です）。 もちろんバグはＩＥにもありますが、ＮＮ系( Firefoxも含め）のバグはひどいですね。ＮＮがブラウザ戦争に惨敗したのはこのバグのせいだとも言われています。 話が横道にそれましたが、サイト作りにＣＳＳを使う場合には、このブラウザのバグも念頭においたほうがいいでしょう。
関連するQ&A
- CSSのdivで、ページ全体をセンタリング出来ない
質問させて頂きます。 <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> というように、全体をdivで囲んだにもかかわらず、何故かセンタリング出来ません。 最も簡単に、このページをセンタリングするには、どうすればよいでしょうか？ ホームページビルダーで「どこでも配置モード」で作ったものを、dreamweaverで作り直す場合に該当します。 下記にHTMLを記載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.8.0 for Windows"> <title>タイトル</title> <style type="text/css"> #contena { margin-right: 10px; margin-left: 10px; text-align: center; height: 900px; width: 950px; } </style></head> <body background="blue_p7b.gif"> <div id="contena"> <div style="top : 0px;left : 20px; position : absolute; z-index : 20; " id="Layer22"><img src="anim.gif" width="373" height="93" border="0" alt="ようこそ"></div> <div style="top : 18px;left : 575px; position : absolute; z-index : 2; " id="Layer4"><a href="http://www.dodgeball.or.jp/"><img src="jdba1.gif" border="0" width="106" height="30"></a></div> <div style="top : 60px;left : 143px; position : absolute; z-index : 1; " id="Layer1"><img src="logo111.gif" width="488" height="69" border="0" alt="リンク"></div> <div style="top : 219px;left : 317px; position : absolute; z-index : 27; width : 580px; height : 51px; " id="Layer28"> <p><font color="#0000ff" size="+2">コンテンツ</font></p> </div> <div style="top : 161px;left : 647px; position : absolute; z-index : 22; " id="Layer23"></div> <div style="top : 255px;left : 284px; position : absolute; z-index : 28; " id="Layer2"><img src="frendlyindx.gif" width="546" height="410" border="0"></div> <div style="top : 216px;left : 652px; position : absolute; z-index : 23; " id="Layer24"></div> <div style="top : 304px;left : 50px; position : absolute; z-index : 26; " id="Layer27"></div> <div style="top : 754px;left : 47px; position : absolute; z-index : 19; width : 707px; height : 154px; " id="Layer21"><iframe frameborder="1" src="saishijoho.html" width="709" height="150" scrolling="AUTO"></iframe></div> <div style="top : 953px;left : 40px; position : absolute; z-index : 7; " id="Layer9"><a href="taikaikekka.html"><img src="button41.gif" width="57" height="54" border="0" alt=" "></a></div> <div style="top : 659px;left : 48px; position : absolute; z-index : 6; " id="Layer8"><img src="logo1.gif" width="194" height="65" border="0" alt="最新情報 "></div> <div style="top : 1020px;left : 34px; position : absolute; z-index : 12; </div> </body> </html> 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- HTMLについてです！助けてください！
今、HTML／Dreamweaverでウェブサイトを作っているのですが、分からないことがあって困っています。 画像の上に文字を重ねたいのですが、重ねたい位置にDreamweaverで置くと、左側に大きくずれてしまいます。 <div style="position: relative;"> <img src="○○○.jpg" width="○○○" height="○○○"> <div style="position:absolute; top:○○px; left:○○px; width: ○○px;"> ここに文章を入れます </div></div> このコードを使っているのですが、上記の通り、左にずれてしまいます。 説明が下手で申し訳ないのですが、下の写真を見てくだされば分かると思います。
- ベストアンサー
- その他（インターネット・Webサービス）
- インラインフレームについて教えてください。
すいません、このHTMLのどこに、タグを加えると、背景色を変えることが出来るのでしょうか？（教えてください。） </HEAD> <BODY background="a012bcg.gif"> <DIV style="width : 385px;height : 106px;top : 14px;left : 8px; position : absolute; z-index : 1; " id="Layer2"><TEXTAREA rows="6" cols="45" name="what's new">インライン</TEXTAREA></DIV> </BODY> </HTML>
- ベストアンサー
- Windows 95・98
- ｃｓｓについて困っています
<html> <head> <title>Webサイト</title> <style type="text/css"> body { background-color : #FFEAEF } <!-- #example { /* 親ボックス */ width: 750px; height: 900px; background-color: #FF95E4; position: absolute; top: 50px; left: 100px; ; } #example1 { /* position: absolute; */ width: 750px; height: 300px; top: 50 px; left: 150 px; background-color: #FFAAEA } #boxL { /* ボックス左 */ width: 150px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 1px; } #boxR { /* ボックス右 */ width: 599px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 150px; } #footer { width: 748px; height: 100px; background-color: #ffffff; position: absolute; top: 750px; left: 1px; } --> </style> </head> <body> <div id="example"> <div id="example1"> <h1>テスト中</h1> </div> <div id="boxL"> ボックス左 </div> <div id="boxR"> ボックス右 </div> <div id="footer"> <strong><center>ここに必要ならタグと共に記入<BR> <a href="test2.html">top</a></strong> </div> </div> </body> </html> これを表示した時、下のピンクの部分に文字やリンクを書きたいのですがどうしたらいいですか？
- ベストアンサー
- その他([技術者向] コンピューター)
- スタイルシートのブラウザ対応状況について
font-sizeの指定をしたいのですが、スタイルシートで困っています。 インラインで<div style="font-size:10px">AA</div>と記述すると、 きちんと表示してくれるのですが、 <Head>内にclassで記述したり、外部スタイルシートを用いると、 WINDOWSのＮＮ4.0やＮＮ4.75では、全く反応してくれません。 IE4.0以降やＮＮ6では、きちんと表示されるのですが。。。 いろんな本を読みましたが、どの本もＮＮ4.0以降なら、 外部スタイルシートも使えるようなことを書いてあったので、 困っています。 誰か詳しい方がおられたら、教えてください。
- 締切済み
- CGI
- <p>要素をインライン要素にしての右寄せ
<p>要素をインライン要素にしての右寄せ 【以下、HTML】 .text{ font-size:12px; font-weight:normal; margin:0px; padding:25px 0px 0px 35px; } <div class="text"> <img src="-" style="vertical-align:-2px;margin:0px 10px 10px 15px;"><a href="-">リンク</a><p style="text-align: right;display:inline;">あいうえお</p><br></div> 上記の「あいうえお」の部分を画像やリンクと並列したく、インライン要素で右寄せしたいんですがどうしたらいいでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- レイヤーを背景だけ透過させたい
お世話になります。 レイヤーを背景だけ透過させたく、質問させていただきます。 レイヤーを透過させたい場合、よくスタイルシートのfilterが使われると思います。 たとえば <div style="width:100; height:20; color:#ff0000; background-color:#0000ff; filter:Alpha(opacity=60);"> フィルター適応</div> のようにすると、レイヤー全体が透過されます。 しかし、今回やりたいのは、背景のみが透過し、文字は透過させたくありません。 1つ考えた方法として、 <div style="width:100px; height:20px; top:0px; left:0px; position:absolute; background-color:#0000ff; filter:Alpha(opacity=60);"> </div> <div style="width:100px; height:20px; top:0px; left:0px; position:absolute; color:#ff0000;"> フィルター適応 </div> のように、無理やりレイヤーを2つ重ねて表示できないこともないのですが、もっとスマートな方法はないでしょうか。 ご存知の方がいらっしゃいましたら、ご教授お願いいたします。
- ベストアンサー
- HTML
- このタグですが、ページを右端から左へ縮めても、常に中央に位置させたいのですが、、
このタグですが、ページを右端から左へ縮めても、常に中央に位置させたいのですが、、、 <BODY> <DIV style="top : 56px;left : 95px; position : absolute; z-index : 1; width : 336px; height : 21px; " id="Layer1" align="center"><FONT size="+4">テキスト</FONT></DIV> </BODY>
- ベストアンサー
- HTML
- スタイルシートで位置固定すると、スタイルシートでの改ページ指定ができなくなる
スタイルシートのpositionを使用して位置固定すると、page-break-beforでの 改ページができなくなります。 位置固定し、かつ、その文字の直前で改ページする方法はないでしょうか？ ブラウザはIE5.5以降を考えてます。 ====================================================================== <html> <body> <div style="position:absolute; top:100px;"> テスト１ </div> <div style="position:absolute; top:150px; page-break-before:always;"> テスト２(この文字の直前で改ページさせたい） </div> <div style="position:absolute; top:200px;"> テスト３ </div> </body> </html> ====================================================================== 宜しくお願いします。
- ベストアンサー
- HTML
- 「CSS」 POSITION:absoluteの値を参照する
いくつかの画像を <div STYLE="POSITION:absolute; LEFT:***px; TOP:***px;"> <img src=""・・・・> </div> のようにして表示させているのですが、 このLEFTの「*** px」という値をjavascriptなどで参照するというのはできるのでしょうか。 100px以上に位置する画像に何か効果を持たせるというようなことをやりたくて、 いろいろ調べては見たのですがわかりません。 そもそもできるかどうかという事も含めて、何かご存知の方よろしくお願いします。 環境は何を載せたらいいかわかりませんが、一応・・・ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ブラウザはIE7で表示させようとしています。
- ベストアンサー
- HTML
お礼
Fukurowさん、はじめまして。質問者のKozzymarch23です。 ご助言、感謝しています。 現在、僕がサイト制作、そして公開に踏み切る基準にしているのが、レイアウト・Javascriptともに、Mozilla系できちんと表現されている、と確信した段階です。 前者は、Fukurowさんのおっしゃられるバグを逆手にとって、後者はその厳格さ、によってです。IEを上位互換として捉えている、と言うところでしょうか。 ビュジュアル面はもっぱらCSSに任せていますので、Fukurowさんのお言葉を肝に銘じて、サイト制作をしていこうと思います。 引き続いて、皆さんのご教示を待っています。 このたびはありがとうございました。