• 締切済み

[platex,graphicx,includegraphics,(XHTML,CSS)]以下のXHTMLのソースをTeXで実現するには

タイトルをつけたからには ソースをXHTMLで図示したいのですが、ソースだけで800文字を上回ってしまいましたorz 削るところないのに・・・。 適当に何か回答していただき、ソースを補足しようと思います

みんなの回答

  • ROOM-335
  • ベストアンサー率56% (9/16)
回答No.1

私には難しすぎてわからなそうですが、、 ソースの補足をお願いします。

himajin100000
質問者

補足

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>希望する表示</title> <style type="text/css"> html{ margin:0; padding:0; border-style:none; background-color:blue; } body { width:210mm; margin:0; padding:0; border-style:none; background-color:yellow; } div.page{ width:155mm; height:242mm; padding:27.5mm 27.5mm; page-break-after:always; background-color:pink; } div.imagebox { display:block; } div.imagebox#noodle,div.imagebox#tea { /* Firefox trunk nightlyじゃないならfloat:leftで。*/ display:inline-block; } table#pricetable{ background-color:#000000; border-collapse:separate; border-spacing:1px; width:150mm; margin:auto;/* 好みの問題*/ } table#pricetable col#name{ background-color:#FFFF00; width:20%; } table#pricetable col#price{ background-color:#FFFFFF; width:30%; } table#pricetable col#discount{ background-color:#FFFFFF; width:50%; } table#pricetable tbody th{ text-align:center; } table#pricetable tbody td{ text-align:center; } </style> </head> <body> <div class="page"> <h1>himajinの食事</h1> </div> <div class="page"> <h2>今朝の朝食</h2> <p>以下に示す写真は今朝の朝食である。</p> <div> <div class="imagebox" id="sunnysideup"> <div class="image"><img src="sunny.png" width="130" alt="" /></div> <div class="caption">目玉焼き</div> </div> <div class="imagebox" id="milk"> <div class="image"><img src="milk.png" width="130" alt="" /></div> <!-- psファイルを読み込めるかはよく知らないが --> <div class="caption">牛乳</div> </div> </div> <p>だからどーした?</p> </div> <div class="page"> <h2>今朝の昼飯</h2> <p>以下に示す写真は今朝の朝食である。</p> <div> <div class="imagebox" id="noodle"> <div class="image"><img src="noodle.png" width="65" alt=""/></div> <div class="caption">ラーメン</div> </div> <div class="imagebox" id="tea"> <div class="image"><img src="tea.png" width="65" alt="" /></div> <div class="caption">ウーロン茶</div> </div> </div> <p>だからどーした?</p> </div> <div class="page"> <h2>材料費</h2> <table id="pricetable"> <caption>値段表</caption> <col id="name" /> <col id="price" /> <col id="discount" /> <thead> <tr><th>商品名</th><th>値段</th><th>割引率</th></tr> </thead> <tbody> <tr><td>りんご</td><td>400円</td><td>30%</td></tr> <tr><td>みかん</td><td>$5</td><td>60%</td></tr> <tr><td>れもん</td><td>時価</td><td>割引なし</td></tr> <tr><td>ぱいなっぷる</td><td>700円</td><td>割引なし</td></tr> </tbody> </table> <p>何故この材料であの料理が出来るのかとかは聞かないでください</p> <p> なお、この文書中に出てきた画像は仮のもの(PNG)にしていますが、 実際はPSファイルをangle=270を効かせて回転させたり(Portrait→Landscape)、width=13cmを付けて拡大縮小等しています。 </p> <p> また、出てくる表についても、実際は7列くらいあって幅を指定しなければoverfullという警告が出るため、text-alignを適用させた上での幅の指定の仕方を教えてほしい </p> </div> </body> </html> 以上です。背景色はわかりやすくするために付けています。

関連するQ&A

  • XHTMLのソースで文字ばけします

    とあるHTMLの本に書いてあるとうりソースをうっていくと <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtyd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>もりのみや<title/> などのWeb上で文字入力をすると文字化けします。 どうしてでしょうか? インターネットエクスプローラーを使っています。

  • xhtml? css?

    cssについて質問があります。 どこかのHPのソースを表示して、index.htmlと保存し、それを開くと上手く表示されません。 全部左に寄って、背景等も表示されません。文字は表示されています。 初心者なので分りませんが、おそらくcss(stylesheet)?が機能していないように思うのですが・・・。 これってどうやって解決すれば良いのでしょうか? 要は、違うサーバに移して同じものを表示したいのです。 もちろん、パクるのではなく、 自力でHPを作るために、xhtmlとかcssとか勉強しています。 誰か助けて下さい。

  • xhtml,css cssの取り込み

    xhtml,cssの解説書を購入し、二段にインポートする方法で「css」の取り込みをしたのですが、初心者ゆえどうもうまくいきません。下記にそのコードを載せますので、間違いをご指摘ください。 『index.html』 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://WWW.W3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> <html xmlns="http://WWW.W3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>test</title> <link rel="stylesheet" type="text/css" href="a.css" media="all" /> <body> <h1>秋</h1> <p> test test test </p> </body> </html> 『a.css』 @charset "Shift_JIS; @import"b.css"; 『b.css』 @charset "Shift_JIS"; h1{ text-align: center; font-size: x-large; font-family: "MS P明朝",serif; }

  • XHTMLやCSSを基本から学べるサイト

    HTMLでもXHTMLでもそれほど大差はないと思いますが、XHTMLやCSSを基本から学べるサイトを探しています。 回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • 公開されてるページのCSSのソースを見たい

    XHTMLとCSSでWEBページを制作したいのですが、IEではきちんと表示されるのですが、FIREFOX,SAFARIでは文字がずれてしまい、レイアウトが崩れてしまいます。そこで、他のページを参考に勉強させてもらいたいのですが、外部ファイルのCSSのソースを見る事のできるブラウザはあるのでしょうか?

    • ベストアンサー
    • CSS
  • XHTML+CSS IE5.5で見ると崩れる

    皆様こんにちは、XHTML+CSSで初歩を勉強してる者ですがどうして判らない事があるので教えていただければ助かります。 判らないことは XHMLのソースに <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>練習</title> <link href="oooo.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="a"> <div id="b"> id "b" </div> <div id="c"> id "c"</div> <div id="d"> id "d"</div> <div id="e"> id "e"</div> </div> </body> </html> と記入しております CSSのソースは @charset "utf-8"; body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin: 0px; padding: 0px; } #a { background-color: #999999; width: 400px; border: 1px solid #66FF00; } #a #b { background-color: #006699; width: 400px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #996600; } #a #c { background-color: #00CC99; margin: 5px; float: left; width: 100px; display: inline; } #a #d { background-color: #99FF66; width: 285px; float: left; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; display: inline; } #a #e { clear: both; background-color: #0000FF; height: 20px; } と記入しております。 IE8,7,6では自分の描いたイメージどうり表示されるものの、 IE5.5では崩れてしまいます。 作成ソフトはAdobe Dreamweaver CS3で作成しております。 ブラウザーの互換性チェックしても何も問題は無いのですがどうしてでしよう?わかる方おしていただけると助かります。

    • ベストアンサー
    • CSS
  • docomoをxhtml記述をしたところインラインcssが無視されます

    携帯サイトを制作しています。docomoの機種で文字の後ろに背景色を 設定したいため、以下のような記述に変更しました。 docomo ヘッダーの記述↓------------------------------------------- <?php echo "<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>"; ?> <?header("Content-type: application/xhtml+xml" );?> <!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1) 1.0//EN" "i-xhtml_4ja_10.dtd"> <html> <head> ----------------------------------------------------------- .hacessの追記記述↓ AddType application/x-httpd-php .xhtml 背景を変えたいところを、<div style="~">文字</div> で変えたところ、文字の背景に背景色をつけることができたのですが、 フォントの指定がいっさい無視されてしまいます。 ・<font color="#FFFFFF" size="1">文字</font> <div align="right">~</div> 色指定も、サイズ指定も全て無視されてしまいます。 右寄せ、左寄せ指定も無視されています。 phpには全く詳しくありませんので、調べながら、 ヘッダーや.hacessに情報を追記しました。 その指定がなんらかの形で影響していると思われるのですが・・。 softbankとAUは全て、文字のサイズ、色、文字後ろの背景色の指定、 回り込み等、全て問題がありません。 出来る限り調べていますが、わからずに困っています。 宜しくお願いします。

  • XHTML?CSS?iモードで作りたいサイト!!

    http://tagged.jp/CUBE/index.xshtml 上記サイトですがPCでは閲覧できないようです。背景の色が途中から切り替わる部分をまねしたいのですが、i-modeの最新機種はi-XHTMLに対応しているのでおそらくその言語でスタイルシートを用いて作られていると思うんですが、私ド素人なので肝心の書き方がわかりません(>_<)正直に言えばこのサイトのソースを見てコピペして同じ構成のサイトを作りたいんです。詳しい方教えてください!!ドコモのサイトは見ましたが使えるタグ等のリファレンスが書かれていても具体的にどうやって書いたらちゃんと表示されるのかもわかりません。どなたか親切な方、そのままアップして使えるようなかたちでソースを書いていただければ助かります。。私はドリームウィーバーを使用しています。

    • ベストアンサー
    • HTML
  • xhtml+cssのfloatの使い方、センタリングの方法

    xhtml+cssでのプログラミングについて教えてください! 初めてxhtml+cssでのプログラミングに挑戦しています。 質問したい内容が2つあります。 1.) ページ全体をセンタリング表示したいです。   (下記ソースのままだと左寄せに表示されてしまいます。) 2.) floatして右側に表示しているボックスの中に   さらにfloatさせてleft、lightの2つ横並びのボックスを   配置することは可能でしょうか?   また、その際の注意点などはございますでしょうか? --------------------------------------------------------------- <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> </head> <style type="text/css"> <!-- body{ margin: 0px; padding: 0px; background-color:#74CAEB; } #wrap { width: 800px; margin-right: auto; margin-left: auto; } #header { width: 800px; height: 80px; background-color:#E1F3FB; } #side { float: left; width: 200px; height: 200px; background-color:#14729A; } #main { float: right; width: 600px; background-color:#ffffff; } #main .conte1 { margin-top: 20px; width: 600px; height: 100px; background-color:#EFEFEF; } #main .conte2 { float: left; margin-top: 20px; width: 290px; height: 100px; background-color:#EFEFEF; } #main .conte3 { float: right; margin: 20px 0px 0px 20px; width: 290px; height: 100px; background-color:#EFEFEF; } #footer { clear: both; width: 800px; height: 80px; background-color:#E1F3FB; } --> </style> <body> <div id="wrap"> <div id="header"> </div> <div id="side"> </div> <div id="main"> <div class="conte1"> </div> <div class="conte2"> </div> <div class="conte3"> </div> </div> <div id="footer"> </div> </div> </body> </html> --------------------------------------------------------------- 質問のどちらかでも結構です。 初心者のため質問の仕方が悪く、ご理解が難しいかもしれませんが どなたかご理解頂ける方は教えてください。

  • リンクに関する制御について【XHTML&CSS&JavaScript】

    【XHTML&CSS】 リンク制御について Webサイトにおいて、現在リンクの制御の方法をどうしたらいいのかわかりません。(JavaScriptについては初心者です。) XHTMLのソース上においてリンクを以下のように記述し、 <ul> <li><a href="../link/test1.html">テスト1</a></li> <li><a href="../link/test2.html">テスト2</a></li> <li><a href="../link/test3.html">テスト3</a></li> <li><a href="../link/test4.html">テスト4</a></li> </ul> 上記のようにリストを作成するが、テスト1からテスト3まではリンク先のファイルが存在するが、テスト4についてはファイルが存在しない。 この状態では、 通常であればテスト4は"404 Not Found「ページが存在しません。」などのエラーが表示されます。 これをCSSまたは、JavaScriptなどで制御して、 リンク先のファイル(test4.html)を探しに行って存在しない場合、 リンク先へ遷移させないようにはするにはどうしたら実現可能でしょうか? よろしくお願いします。

専門家に質問してみよう