- ベストアンサー
HTMLメールの雛形作成のポイントと注意点
- HTMLメールの雛形を作成する際には、テーブルデザインを使用し、インラインCSSを活用して全体のサイズを軽くすることが重要です。
- テーブル幅の適切な線の幅については、現状のテーブルの幅が600pxである場合が一般的ですが、実際の表示に関しては不安要素もあるため、確認が必要です。
- HTMLメールでは、divタグを使用することも問題ありません。特にテキストやスタイルの設定をインラインCSSで行う場合、pタグではなくdivタグを使用することもあります。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- HTML、CSSについて。テーブル背景がズレる。
こんにちは。よろしくお願いします。 HTMLとCSS、2つのファイルを作成しています。 HTMLでテーブルを作成し、<td><div=名前></div></td> として、テーブルの中身はCSSにまかせています。 複数列、複数行ありますがdiv名はひとつずつ違うのが付いています。 CSSでは、 div#名前 { width: 20px; height: 20px; margin: 0px; padding: 0px; background: url(画像名.gif); } ・ ・ ・ htmlを表示させてはcssのpxを調節し、 きれいな背景画像付きのテーブルが完成した！と思ったのですが、 ブラウザの文字サイズを最大に変更すると崩れてしまいました。 pxではなくて%で指定してみても崩れます。 解決策をご存知の方、教えてくださると有難いです。 よろしくお願いします。
- 締切済み
- HTML
- HTMLで横幅をCSSで設定できません。
HTMLで横幅をCSSで設定できません。 headerを作成しているのですが、画像のように横幅が外枠の wrapperをはみ出して表示されてしまいます。 はみ出した値は5pxとpaddingで指定した値と一致します。 headerをtableタグで作成した場合、横幅700pxの枠中での padding-left:5px;になり、横幅には変化はありません。 しかし、<div id="header">で横幅を700pxとし、 padding-left:5px;とすると、headerの横幅が 5px増えてしまいます。 <div id="header">の横幅を変化させずに、 paddingを指定することは可能なのでしょうか。 わかる方いらっしゃいましたら宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; } #header { width: 700px; padding-left: 5px; }
- ベストアンサー
- HTML
- table内のCSS制御
cgi等で自動生成するテキストが表示されるtableタグをCSSで成形しようとするのですが、長いテキストの時に2行にするにはどのようにしたらよいのでしょうか。 ご教授いただけますとたすかります。 または、一番希望しているのは、難しいかもしれませんが、tableの幅をオーバーするテキストが生成されたとき自動的にその部分を表示しないことがよいのです。例えば 「あいうえおあいう・・・・」 というイメージです。 現在作ってみたCSSは、下記になります。 clear:both; と position:relative; は、外してみたり いろいろ試してみました。 また、.whatsnew_block もコメントアウトしてましたが 出来ませんでした。 －－－－－－－－－－－－ div#contents .whatsnew_block { clear:both; margin:0px 0px 20px 0px; } div#contents .table { clear:both; position:relative; width: 190px; margin:10px 0px 0px 0px; } div#contents .table td { padding:1px 5px 1px 5px; } div#contents .table td image { margin:0px 0px 0px 0px; }
- 締切済み
- HTML
- cssで<div>にpaddingを指定したとき
下のように、ｃｓｓで<div>にwidth720px、padding10px,background-color: #00FFFF;と指定して、 IE6とoperaで表示してみたところ、widthが740px、padding10pxになってしまいます。 divの下に７４０pxのテーブルをおいて確認してみました。 これは、こういうものと、思うしかないのでしょうか？ また、こうなるのは、私だけなのでしょうか？ <style type="text/css"> <!-- #contents { width: 720px; padding: 10px; background-color: #00FFFF; } --> </style> </head> <body> <div id="contents"> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> <table width="740" border="0"> <tr> <td bgcolor="#0000FF">あ</td> </tr> </table> </body>
- ベストアンサー
- HTML
- 縦横のサイズがバラバラのイメージファイルを一定のサイズに指定したdiv
縦横のサイズがバラバラのイメージファイルを一定のサイズに指定したdiv内に縦横の比率を固定したまま収めたいと思っています。 たとえばcssでdivのサイズを100px×100pxに指定。 その中に100px×200pxのイメージファイルを50px×100pxで表示。 別の100px×100pxのdivに200px×100pxの画像を100px×50pxで表示。 ということをやりたいのですが、イメージファイルのサイズがランダムでそれぞれにサイズ指定をすることが出来ないので、 一括でサイズ指定することは出来ないのでしょうか?
- ベストアンサー
- HTML
- HTML 画像の表示
左にサイドバー、右にコンテンツ画面があるレイアウトです。 全体の大きさは「witdth="100%"」でウィンドウの大きさと等しくなるようにしています。 ネガティブマージンを使用し、右にあるコンテンツのソースを最初に書き、左にあるサイドバーのソースを後から書いています。 サイドバーの大きさは固定で、コンテンツの大きさは可変です。 コンテンツ内の<pre>および<img>が横に長すぎる場合、 Firefox2：コンテンツ画面からはみ出す。 IE6：コンテンツ画面の横幅が大きくなる。 という現象を防ぎたいです。 要するに、全体の画面はウィンドウサイズの抑え、そこからはみ出てしまう文字や画像のみを、スクロール等で画面内に抑えたいということです。 画像の大きさは変更しないものとします。 CSSを以下のように設定したところ、<pre>はスクロールバーが表示され、うまくいきました。 しかし<img>の方はうまくいきません。 Firefoxは、はみ出たままです。 IEは「_width="100%"」のせいで伸縮してしまうし、この設定がなければ、 コンテンツ画面が広がってしまいます。 何か対策はあるでしょうか？ 構造を大きく変更することは無理な状況です。 #negative-margin{ float:right; width:100%; margin-left:-220px; } #contents{ margin:10px 10px 10px 220px; } #side{ float:left; margin:10px 0 10px 10px; width:200px; } pre, img{ overflow:auto; _width:100%; } 必要そうなところだけソースを抜粋しました。 <div id="negative-margin"> <div id="contents"> <img id="title" src="./hoge.jpg" width="1000" height="1000" /> <pre> hoge </pre> </div> </div> <div id="side"> hoge </div>
- 締切済み
- HTML
- table要素のwidthの解釈
tableタグを使って次のようなことをしたいと考えています。 ・table要素の親はdiv要素 ・div要素にはサイズ(width/height)が指定されており、overflow:hiddenとしてある。 ・table要素にはサイズを指定しない ・td要素にはサイズを指定する →つまり、tableのサイズはtdのサイズで決定する HTML/CSSは次の通りです。 ----------------------------------------------------- div { width: 300px; overflow: hidden; } table { table-layout: fixed; } td { width: 170px; } <div> <table><tr> <td>a</td><td>b</td><td>c</td> </tr></table> </div> ----------------------------------------------------- このコードを「DOCTYPE宣言を書かずに」IE8で開くと、想定通りの表示になりますが、 <!DOCTYPE html>と記述すると、tableの横幅が300pxに詰められてしまいます。 td要素のwidth指定が働かず、親のdiv要素のwidthに無理やり押し込められてしまうようです。 また、FirefoxではDOCTYPE宣言無しでも同様の問題が起きてしまいます。 table内の列数は固定ではないので、tableに対してwidth指定はしたくありません。 何か書き方が間違っているのでしょうか。 あるいは、標準準拠モードの仕様では、そもそもできないことをやろうとしているのでしょうか。
- 締切済み
- HTML
- ヘッダー・フッター固定HTMLに関して
ヘッダー・フッター固定HTMLに関して ヘッダー・フッター固定で（間）中段にFlashコンテンツを横100%縦100%で表示するHTMLを作成しようと思っております。 そこで、下記のHTMLソース、及びCSSで指定しているのですが、上手くいきません。 ヘッダー・フッター固定はできますが、Flashを表示しようとすると思うようにいきません。 「body > #wrapper」を「height:auto;」にすると、Flash部分の高さが小さく、 「body > #wrapper」を「height:100%;」にすると、フッター部分が消えてしまします。 【HTML】 ～～～～～～～～ <div id="head">～ヘッダー～</div> <div id="flashcontents">～Flashデータ～</div> <div id="foot">～フッター～</div> ～～～～～～～～ 【CSS】 ～～～～～～～～ html,body {margin:0; padding:0; overflow:hidden;} #head{～サイズなどを指定～} #flashcontents{margin: 0; height: 100%; width: 100%;} body > #flashcontents {height:100％; position: absolute;} #contents { position: fixed; overflow:hidden; bottom:0; 他サイズなど指定…} ～～～～～～～～ 以上、分かりにくい説明かと思いますが、もしお分かりになれば教えて頂けますでしょうか？ よろしくお願い致します。
- 締切済み
- CSS
- CSSで微妙にずれる
CSSで微妙にずれる こんにちは、最近HPを作成するようになった初心者です。 あるフリーサイトのCSSを雛形としてHPを作成したのですが、 （TOPとMENUとMAIN（コンテンツ）とFOOTERの４構成 MENUは左でMAINが右） ブラウザの枠の中にFOOTER部分が表示されると （上下に短いコンテンツ） 微妙に左（多分３PXぐらい）に、ずれて表示されてしまいます。 この様な、場合原因の部位を特定するには、どの様なアプローチを 行えばよろしいのでしょうか？ 教えていただけるとありがたいです。 ちなみに、FOOTERのHTMLは <div id="footer"> <address>Copyright © 2010 XXXXX All Rights Reserved.</address> </div> で、 CSSは div#footer { clear:both; margin:0 20px 0 20px; } です
- 締切済み
- HTML
- google mapのサイズのcssによる変更
現在webページをスクリーンサイズによってPCとスマホにCSSを切り替えることによって 振り分けています、この場合google mapのサイズを切り替えたいのですがうまくいきません。 google mapは <div id="map" style="width:606px; height:420px;"> のように指定しています。 やってみたのはPC用CSSをpc.css、スマホ用CSSをsm.cssとすると <div id="pcmap"> <div id="map" style="width:606px; height:420px;"> </div> <div id="smmap"> <div id="map" style="width:406px; height:420px;"> </div> と記述し、それぞれのCSSでdisplay:none;したのですが無条件で2件目のmapが表示されないためうまくいきません、CSSに関わらず二重設置になるからだと思います。 なにかいい方法はないでしょうか？
- ベストアンサー
- CSS
お礼
お返事ありがとうございます。 参考URLまで教えて頂きまして感謝です。 旧式のhtmlで書くのがベターというのは理解していたのですが head内のCSSも有効になることや文字コードなど非常に参考に なりました。 手間だったのですがインライン要素で設定するとったので <div style="・・・">aaa</div> のようにそれぞれに設定しておりました^^; 初めてなもので難しく考えていたようですが参考URLのポイントを 踏まえれば基本的にブラウザ表示と同じで問題ないようなので おかげさまで一安心です^^