他のブラウザでも表示できるように調整する方法

このQ&Aのポイント
  • IEではうまく行くのですが他のブラウザでも表示できるようにするための調整方法を教えてください。
  • 質問者は特定のブラウザ(IE)では問題なく表示されるが、他のブラウザでは表示されないという問題に直面しています。どのように調整すれば問題を解消できるのか、ご教示ください。
  • 質問者は特定のブラウザ(IE)で表示できるコードを作成しましたが、他のブラウザではうまく表示できません。どのような調整が必要なのか、ご教示いただけますか?
回答を見る
  • ベストアンサー

IEではうまく行くのですが他のブラウザでも表示できるように…

下記のようにしたのですが、IEではうまくゆくのですが、 他のブラウザではできません。 同じようにするにはどのように調整したらよいのか教えてください。 <DIV> <SPAN style="overflow:hidden;width:30px"> <TABLE border="1" width="100%"> <TR bgcolor="silver"><TD>A</TD></TR> </TABLE> </SPAN> <SPAN id="title" style="overflow-y:scroll;overflow-x:hidden;width:150px;"> <TABLE border="1" style="table-layout:fixed;width:150px"> <TR bgcolor="silver"><TD>C</TD><TD>D</TD><TD>E</TD></TR> </TABLE> </SPAN> </DIV> <!--本体部分--> <DIV> <SPAN id="fixedcols" style="overflow:hidden;overflow-x:scroll;width:30px;height:80px;"> <TABLE border="1" style="width:100%" bgcolor="#ffffcc"> <TR><TD>F</TD></TR> <TR><TD>K</TD></TR> <TR><TD>P</TD></TR> <TR><TD>U</TD></TR> </TABLE> </SPAN> <SPAN id="maincols" style="overflow:scroll;width:150px;height:80px" onscroll="fnc_scroll()"> <TABLE border="1" style="table-layout:fixed;width:150px"> <TR><TD>H</TD><TD>I</TD><TD>J</TD></TR> <TR><TD>M</TD><TD>N</TD><TD>O</TD></TR> <TR><TD>R</TD><TD>S</TD><TD>T</TD></TR> <TR><TD>W</TD><TD>X</TD><TD>Y</TD></TR> </TABLE> </SPAN> </DIV> <SCRIPT language="javascript"> <!-- function fnc_scroll(){ document.all.item('fixedcols').scrollTop=document.all.item('maincols').scrollTop; document.all.item('title').scrollLeft=document.all.item('maincols').scrollLeft; } --> </SCRIPT>

noname#125826
noname#125826

質問者が選んだベストアンサー

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.2

こんにちは >■Netscapeはレイアウトか崩れてしまいました。 ネスケは持っていなかったのでNetScape7.1をダウンロードして見てみましたが特に崩れていないようでしたが? [動作環境] IE6.0、Firefox2.0、Opera9.0、NetScape7.1 >それとも何かほかに方法があるでしょうか。 ※ #1からの変更点 ・class="hidden"の<div>の追加 ・↑にあわせてtitle idの変更、width,heightの微調整 ・fixedcolsの背景色をセルの背景色に ・javascriptのid名の変更 ・onscroll()の自動セット 残りは書き直していますがほぼ一緒 ※Operaのみheightの感覚が違うのでtitleとmainの間にズレがありますが残りは同じになっています <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>table 連動スクロール</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=shit_jis"> <script type="text/javascript"><!-- window.onload=function() { document.getElementById("maincols").onscroll = function(){ fnc_scroll(); } } function fnc_scroll(){ document.getElementById('fixedcols').scrollTop=document.getElementById('maincols').scrollTop; document.getElementById('title_b').scrollLeft=document.getElementById('maincols').scrollLeft; } //--></script> <style type="text/css"><!-- .hidden { overflow:hidden; float:left; } .auto { overflow:auto; float:left; } #titles { height:27px; } #mains { width:27px; } #title_a { width:27px; } #title_a table { width:30px; } #title_a td , #title_b td { background-color:silver; } #title_b { width:132px; height:50px; } #title_b table , #maincols table { width:150px; table-layout:fixed; } #fixedcols { width:50px; height:63px; } #fixedcols table { width:30px; } #fixedcols table td { background-color:#ffffcc; } #maincols { width:150px; height:80px; } #maincols div { width:151px; } .cl { clear:both; } --></style> </head> <body> <div> <div id="titles" class="hidden"> <div id="title_a" class="hidden"> <table border="1"> <tr><td>A</td></tr> </table> </div> <div id="title_b" class="auto"> <table border="1"> <tr><td>C</td><td>D</td><td>E</td></tr> </table> </div> </div> <div class="cl"></div> <!--本体部分--> <div id="mains" class="hidden"> <div id="fixedcols" class="auto"> <table border="1"> <tr><td>F</td></tr> <tr><td>K</td></tr> <tr><td>P</td></tr> <tr><td>U</td></tr> </table> </div> </div> <div id="maincols" class="auto"> <div> <table border="1"> <tr><td>H</td><td>I</td><td>J</td></tr> <tr><td>M</td><td>N</td><td>O</td></tr> <tr><td>R</td><td>S</td><td>T</td></tr> <tr><td>W</td><td>X</td><td>Y</td></tr> </table> </div> </div> <div class="cl"></div> </div> </body> </html>

noname#125826
質問者

お礼

お手数お掛けしました。 本当に助かりました。 Netscapeは依然としてA/B/C/D/Eの表題が 表から外れて左に来てしまいますが、 Firefoxがうまくいっているので大満足です。 ありがとうございました。 後ほどポイントをつけさせていただきます。

その他の回答 (1)

  • leap_day
  • ベストアンサー率60% (338/561)
回答No.1

こんにちは >IEではうまくいくのですが・・・ サンプルではIEでもうまくできていないと思うのですが? とりあえず一個ずつ言うと ・<span>(インライン要素)の中に<table>(ブロック要素)は入れられません(文法上NGです) ・<span>はインライン要素なのでwidth,heightの指定はできません(強制的に(display:block;によって)ブロック要素にしているなら別です) ・overflow-x,overflow-yはIE独自のものなので他のブラウザでは使えないことがあります ・bgcolorは非推奨になっていますのでスタイルシートの使い方を知っているのであればそちらを代用してください ・document.allはIEとか使用できるブラウザが特定されますので汎用的に使用するのであればdocument.getElementById("")などを使用する癖を付けてください 修正して試したところid="maincols"をスクロールさせたら 横スクロール → id="title"連動横スクロール 縦スクロール → id="fixedcols"連動縦スクロール になりましたがこの仕様です? <div style="width:50px;float:left;"> <table border="1" style="width:100%;"> <tr style="background-color:silver;"><td>A</td></tr> </table> </div> <div id="title" style="overflow:auto;width:132px;height:50px;float:left;"> <table border="1" style="width:150px;"> <tr style="background-color:silver;"><td>C</td><td>D</td><td>E</td></tr> </table> </div> <div style="clear:both;"></div> <!--本体部分--> <div id="fixedcols" style="overflow:auto;width:50px;height:63px;float:left;"> <table border="1" style="width:30px;background-color:#ffffcc;"> <tr><td>F</td></tr> <tr><td>K</td></tr> <tr><td>P</td></tr> <tr><td>U</td></tr> </table> </div> <div id="maincols" style="overflow:auto;width:150px;height:80px;float:left;" onscroll="fnc_scroll()"> <div style="width:151px;"> <table border="1" style="table-layout:fixed;width:150px;"> <tr><td>H</td><td>I</td><td>J</td></tr> <tr><td>M</td><td>N</td><td>O</td></tr> <tr><td>R</td><td>S</td><td>T</td></tr> <tr><td>W</td><td>X</td><td>Y</td></tr> </table> </div> </div> <div style="clear:both;"></div> <script type="text/javascript"> <!-- function fnc_scroll(){ document.getElementById('fixedcols').scrollTop=document.getElementById('maincols').scrollTop; document.getElementById('title').scrollLeft=document.getElementById('maincols').scrollLeft; } --> </script> ※<div style="width:151px;">は<div style="width:150px"><table style="width:150px;">ではOperaでスクロールが出ないので付け加えているだけです ※分かるようにタグに直接styleをつけていますがタグに直接書かないスタイルシートの使い方を覚えるとid="fixedcols"のtableもセルだけに色をつけることも可能ですよ(^^) 多分<tr>に何個もつけるのが面倒(?)なのでtableに色をつけてると思うので・・・ <style type="text/css"><!-- #fixedcols table td { background-color:#ffffcc; } --></style> こんな感じで

noname#125826
質問者

補足

ご回答ありがとうございます。 適切なご指摘でとても参考になりました。 説明不足で申し訳ありません。 IE以外にはNetscapeとFirefoxができればと思っています。 ■Netscapeはレイアウトか崩れてしまいました。 これはfloat:leftを修正すればよろしいのでしょうか。 ■IE以外ですと"title"部分でも横スクロールバーが出てしまいますが、 これはz-indexで上から重ねるなどすればよいのでしょうか。 それとも何かほかに方法があるでしょうか。 もしお助けいただけるようでしたらよろしくお願いいたします。

関連するQ&A

  • テキストボックスの表示

    テキストボックスの表示 テキストボックスを2つ横に並べて表示したいのですが、 <html> <div style="border:thick solid;width:200;height:200;overflow:auto;"> <Table border="0" width="308" height="300" cellspacing="0" bgcolor="#ffffff"> <Tr><Td align="center" valign="top"> テキストA </Td></Tr> </Table></div> <div style="border:thick solid;width:200;height:200;overflow:auto;"> <Table border="0" width="200" height="200" cellspacing="0" bgcolor="#ffffff"> <Tr><Td align="center" valign="top"> テキストB </Td></Tr> </Table></div> </html> これで、記述をすると縦に二つ表示されます。 スタイルシートを使用しないと無理でしょうか?

    • ベストアンサー
    • HTML
  • テーブル内のスクロール

    初めて質問いたします。 HTML構文をきちんと理解しないまま、サイトをつくってしまっていますが、ひとつ困っていることがあります。テーブルの中のひとつのセルの高さサイズを固定してその中につくったテーブルを縦にスクロールさせています。winではうまく表示できるのですが、mac環境の人からスクロールしないと言われました。ブラウザはIE5と聞いています。以下のような構文にしていますが、なにか間違えているのでしょうか?どなたか教えていただけると助かります。よろしくお願いいたします。 <table width="620" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"height="500"> <tr> <td height="60" valign="top"> </td> </tr> <tr> <td> <div align="center"> <div style="height:400px;width:600px;overflow-y:scroll;"> <table width="600" border="0" cellspacing="0" cellpadding="0"> </table> </div> </div> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • 楽天ブログ・日記の下に表示のおすすめアイテムって・・・。

    ブログ初心者です。 いつかはアフェリエイトまでできると良いな~と思っていますが、まだその前の段階ですでにつまづいております・・・(汗) メインの日記の下に、おすすめアイテムを載せられるように設定したのですが、こちらの画像は私自身で気にいった商品を載せられるのですよね・・・。 (もしかして、楽天の広告ページ??) 【Recommend Item】ってタイトルに出ています。 今まで、自動的にブログの内容に合うようなアイテムが表示されているような気がしますが、好きな雑貨などを載せたいのですが・・・。 もし自分で出来るならどのように画像を載せればいいのでしょうか?? たとえばですが、アフェリエイトのやり方のページで出ていたこの商品を載せたい場合、この部分をどこに載せるとブログのおすすめアイテムに載せられるのか教えてください。 すみません・・・。 パソコンが苦手で、↓これも間違っているのかな?と思っています。 <a href="http://***" target="_blank"> .:*:.*.:*:.2本ベルトのフォーマルシューズ .:*:.*.:*:. </a>        ************** さらに、画像の載せ方が分からないのですが、こちらのテンプレートを製作した方は全然ブログをされていないようなので、もし、分かる方でいらっしゃったら教えてください! コチラは、トップやアフェリエイト部分のテンプレートらしいのですが 。 <center><table cellspacing="3" cellpadding="0" width="560"><tr><td width="33%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像1</td></tr></table></td></tr></table></td><td width="34%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像大2</td></tr></table></td></tr></table></td><td width="33%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像3</td></tr></table></td></tr></table></td></tr><tr><td colspan="3" align="right"><font style="font-size:10px"> </a></font></td></tr></table></center> 画像1・2・3の部分に、何を入れるとショップの商品とリンクするのでしょうか?? どうぞ、よろしくお願いいたします。

  • table 幅指定でtheadとtbodyがずれる

    bootstrapを使っているのですが、 個別に幅設定がしたいので、htmlに下記を追加しました。 theadは問題なく幅設定できているのですが、tbodyがうまく適用されていないようで theadとずれてしまいます。 theadとtbodyの幅を合わせるにはどのようにすれば良いでしょうか? <style type="text/css"> .scroll1 { width: 1600px; table-layout: fixed; } .scroll1 thead, .scroll1 tbody { float: left; } .scroll1 tbody { height: 350px; overflow-y: scroll; } .c1 { table-layout: fixed;width: 200px; } .c2 { table-layout: fixed;width: 100px; } .c3 { table-layout: fixed;width: 100px; } .c4 { table-layout: fixed;width: 200px; } .c5 { table-layout: fixed;width: 200px; } .c6 { table-layout: fixed;width: 200px; } .c7 { table-layout: fixed;width: 100px; } .c8 { table-layout: fixed;width: 250px; } .c9 { table-layout: fixed;width: 250px; } </style> <table class="table table-bordered table-striped"> <tr> <td> <table border="0" class="table table-bordered table-hover table-striped table-hgroup scroll1"> <thead> <tr style=""> <th class="c1">アクション</th> <th class="c2">店舗コード</th> <th class="c3">ユーザID</th> <th class="c4">ユーザパスワード</th> <th class="c5">ユーザ名</th> <th class="c6">メールアドレス</th> <th class="c7">管理権限</th> <th class="c8">更新日</th> <th class="c9">登録日</th> </tr> </thead> <tbody> <tr style=""> <td style="width:200px;table-layout:fixed"> <input type="submit" value="削除" /> <input type="submit" value="編集" /> </td> <td style="width:100px;table-layout:fixed"> <span >2697</span> </td> <td style="width:100px;table-layout:fixed"> <span >002</span> </td> <td style="width:200px;table-layout:fixed"> <span >000000</span> </td> <td style="width:200px;table-layout:fixed"> <span >大築</span> </td> <td style="width:100px;table-layout:fixed"> <span ></span> </td> <td style="width:100px;table-layout:fixed"> <span >0</span> </td> <td style="width:250px;table-layout:fixed"> <span >2014/11/08 21:20:39</span> </td> <td style="width:250px;table-layout:fixed"> <span >2014/11/08 21:20:48</span> </td> </tr> </tbody> </table> </td> </tr> </table>

    • ベストアンサー
    • CSS
  • IE以外のブラウザで隙間ができる

    お世話になっております。 上テーブルと下テーブルを隙間なく配置したいのですがIE6,7以外のブラウザだと3pxくらいの隙間ができてしまいます。厚かましいお願いで恐縮ですが、下記タグをチェックしていただけないでしょうか…。 <table width="758" height="160" border="0" cellpadding="0" cellspacing="0" background="image/gazou.jpg" style="background-repeat:no-repeat"> <tr><td height="30">&nbsp;</td></tr> <tr><td>ここに文字を入れています</td></tr> <tr><td height="30">&nbsp;</td></tr> </table> <div class="test"><br> <table width="758" border="0" cellpadding="0" cellspacing="0"> <tr><td>ここも文字</td></tr> </table> </div> 上のテーブルには背景画像を指定しており、下テーブル部分に色をつけたいのでdivを使いCSSを適応させています。(デザイン上、下テーブル背景に色をつけるのではダメなので) これが問題なのかと思い、divタグを消してみたりしましたがだめでした。 div"test"のCSSは .test{ margin:0px; padding:0px; background-color:#333333; border-bottom:solid 1px #999999; width:758px; height:262px; } としています。 本当に厚かましいお願いで恐縮ですが、ご教授いただけるととても助かります。どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • Netscape4でスタイルシートを設定すると、スクリプトが動作しません。

    お世話になっています。 現在、スタイルシートのvisibility属性を利用してリンクをクリックすると、見えなかったテーブルを表示させる、というサンプルを作っています。 しかし、テーブル内にスタイルシートの設定を入れた途端、Netscape4のみ動作しなくなりました。(「#この部分が~」のところです) 原因が分かれば、教えていただきたいと思います。 ソースは次の通りです。 function hyoji(lay){ if(document.getElementById) { document.getElementById(lay).style.visibility = 'visible'; } else if(document.all) { document.all(lay).style.visibility = 'visible'; } else if(document.layers) { document.layers[lay].visibility = 'show'; } } <A HREF="javascript:hyoji('test0')">ZERO</a>  <A HREF="javascript:hyoji('test1')">ONE</a> <A HREF="javascript:hyoji('test2')">TWO</a> <div id = "test0" style="position:absolute; top:100px; left:100px ;visibility:hidden"> <table border=3> <tr> <td bgcolor=teal>ZERO</td> </tr></table></div> <div id = "test1" style="position:absolute; top:200px; left:100px ;visibility : hidden"> <table border=3> <tr><td bgcolor=hotpink> #この部分が問題? <span style="line-height:120%">ONE</font></td> </tr></table></div> <div id = "test2" style="position:absolute; top:150px; left:100px; visibility : hidden"> <table border=3> <tr><td bgcolor=hotpink>TWO</td></tr> </table> </div>

  • vbsでIEの操作

    vbsでIEの自動操作を行おうとしているのですが,最後のボタンだけなぜか押せません. オブジェクトが存在しないとエラーになります. 下記は操作しようとしているところのソースです. <div id="layerPanelSessions" style="display:"> <table cellpadding="1" cellspacing="0" border="0" width="100%"> <tr> <td bgcolor="#CCCCCC"> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr bgcolor="#EEEEEE"> <td> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr valign="top"> <td> <table cellpadding="4" cellspacing="0" border="0" width="100%"> <tr valign="top"> <td><img src="/dana-cached/imgs/icn18x18SessionNC.gif" alt="ネットワークコネクト" width="18" height="18" border="0"></td> <td width="100%">ネットワークコネクト <br><span class="cssSmall">システム トレイに [ネットワーク コネクト] アイコンが表示されて「接続」となっていると、ネットワーク上でセキュアにアプリケーションにアクセスすることができます。<br> <br>そうでない場合はネットワーク コネクトの [セッションの開始] アイコンをクリックして接続します。</span> </td> </tr> </table> </td> <td align="right"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td colspan="6"><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> </tr> <tr> <td bgcolor="#EEEEEE" nowrap ><img src="/dana-cached/imgs/space.gif" width="10" height="10"> <input name="btnNCStart" type="button" value="開始" onclick="self.location='/dana/nc/ncrun.cgi?launch_nc=1'; return false;"></td> <td><img src="/dana-cached/imgs/space.gif" width="5" height="1"></td> <td bgcolor="#CCCCCC"><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> <td bgcolor="#EEEEEE"><img src="/dana-cached/imgs/btnPanelItemBlank.gif" alt="" width="20" height="20" border="0"></td> <td><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> </tr> </table> </td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td bgcolor="#CCCCCC"><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td bgcolor="#CCCCCC"><img src="/dana-cached/imgs/space.gif" width="1" height="1"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </div> で,下記が操作用の私が作成したコードです. .Document.all("btnNCStart").Click 本当に困っています.どなたかよろしくお願いいたします.

  • テーブルの中の複数行テキスト欄の下に書き込めない

    またもスペースお借りします。 TOPページで使う予定の更新履歴を残す 複数行テキスト欄の下にバナーやボタンを貼りたいのですが、 なぜが外テーブルからはじき出されてしまうのです。 複数行テキスト欄の上には書き込めるのですが、 下に書き込むようにするには、どのようなタグを入力すれば良いでしょうか? 具体的に教えてくださると助かります。 これがコピペです↓ <html> <head> <title>top</title> </head> <body background="http://背景URL"> <Basefont Size="2"> <br> <br> <table align="center"border="0" width="700" height="500" style="border:3px double #999999;" cellpadding="5" cellspacing="0"bgcolor="#ffffff"> <Tr> <Td> <br> <Td Align="left" Valign="top"> <B>●更新履歴</B> <div style="width:230px;height:130px;overflow-y:scroll"style="border:3px double #000000;" cellpadding="5" bgcolor="#ffffff"Td Align="left"Valign="bottom"> ああああ<br> ああああ<br> ああああ<br> </table> </div> <br> あああああああああ </Td> </Tr> </Table> </body> </html>

    • ベストアンサー
    • HTML
  • IEとNetscapeの表示の違いについて

    Netscape7.1において、テーブルを表示すると、 セル内の文字上下とborderの間に隙間ができます。 (左側の隙間は問題ありません) その為、IEとNetscapeではテーブル高さが変わってきます。これを同じように表示する事はできるのでしょうか? divで入れ子にしてる事が問題かと、divをはずしてみましたが、同様の現象となります。 ご存知の方、ご教示ください。よろしくお願いします。 <div width:150px;">  <table width="150" border="1">   <tr><td>あいうえお</td></tr>   <tr><td>かきくけこ</td></tr>   <tr><td>さしすせそ</td></tr> </table> </div> css で border-collapse: collapse; border-spacing :0px; を指定してます。

    • ベストアンサー
    • HTML
  • borderが1のテーブル

    ボーダーが1ピクセルくらいの表を作りたいので、tableの入れ子で作ったのですが「tableの入れ子は良くない」ととあるサイトで読んだので、入れ子にしないでtableを作りたいのですが何か良い方法はありますでしょうか? 私が書いたのはこんなかんじです。 <table width="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#000000"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1"> <tr bgcolor="#999999"> <th><div align="center"><font size="2">名称</font></div></th> <th><div align="center"><font size="2">模型材質</font></div></th> <th><div align="center"><font size="2">生産材質</font></div></th> </tr> <tr bgcolor="#FFFFFF"> <td bgcolor="#999999"><div align="center"><font size="2">本体</font></div></td> <td><div align="center"><font size="2">発泡塩ビ板</font></div></td> <td><div align="center"><font size="2">プラスチック</font></div></td> </tr> </table></td> </tr> </table> CSSで「style="border-width :1px 1px 1px 1px;border-style : solid solid solid solid ;border-color :#000000 #000000 #000000 #000000 ;"」というのを入れてやってみたのですが、これだと外側にしかラインが表示されませんでした。 よろしくおねがいします。

専門家に質問してみよう