• ベストアンサー

HTMLタグ リストの入れ子とNetscapeについて

HTMLソースにおけるリストの入れ子とNetscapeについて 更新履歴を作成したく、リストの入れ子を作成しました。 Netscape以外のブラウザ(IE8、Opera、Safari、FireFox)では期待通りの表示になったのですが、Netscapeのみ表示が異なります。 以下ソース ------------------------------------------------------- [html] <ul id = "Style_NonIndex"> <li style="font-size:12px">*最終更新*</li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">ccccの更新</li> </ul></li> </ul> <br><br><br><br> <ul id = "Style_NonIndex"> <li style="font-size:12px">*更新履歴*</li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">aaaaの更新</li> </ul></li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">bbbbの更新</li> </ul></li> </ul> ------------------------------------------------------- [css] #Style_NonIndex { margin-top:0px; margin: 0px; padding: 0px; list-style: none; font-size: 10px; font-family: MSゴシック; color: #696969; } .List_Date { float: left; width: 70px; text-align: left; font-size: 12px; margin: 0px; padding: 2px; list-style: none; } .List_Comment { float: left; width: 250px; text-align: left; font-size: 12px; margin: 0px; padding: 2px; list-style: none; } ------------------------------------------------------- [予想表示] *最終更新* 2000/00/00  ccccの更新 *更新履歴* 2000/00/00  aaaaの更新 2000/00/00  bbbbの更新 ------------------------------------------------------- [Netscapeの表示] *最終更新* 2000/00/00  ccccの更新 *更新履歴* 2000/00/00  aaaaの更新  2000/00/00  bbbbの更新 ------------------------------------------------------- 他のブラウザでの表示は問題ないのですが、Netscapeのみ横リストとして表示されます。 表示が異なるのはNetscapeの仕様でしょうか? それとも指定方法がおかしいのでしょうか。 大分煮詰まってしまったので、アドバイスをお願いいたします。

  • HTML
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • abril
  • ベストアンサー率69% (388/560)
回答No.2

> Netscape以外のブラウザ(IE8、Opera、Safari、FireFox)では期待通りの表示になったのですが、Netscapeのみ表示が異なります。 (IE8は手元にないので)IE6/7、Firefox2/3、Safari3、Opera9.61、NN7.1にて表示結果を試しましたが、”いずれも”[予想表示]ではなく[Netscapeの表示]と同様の結果になりましたが…? HTMLの構造(マークアップ)から見直した方が良いと思います。今のリストの入れ子だと、 ・*最終更新* ・o 2000/00/00  o ccccの更新 ・*更新履歴* ・o 2000/00/00  o aaaaの更新 ・o 2000/00/00  o bbbbの更新 こういう構造になってしまい、論理的な入れ子になっていませんので。 ulの入れ子で組みたいのであれば、以下の構造などが妥当だと思います。 ・*最終更新*  o 2000/00/00   ccccの更新 ・*更新履歴*  o 2000/00/00   aaaaの更新更新更新更新更新更新更新更新更新更新更新更新更新更新更新  o 2000/00/00   bbbbの更新 #個人的にはこういう更新履歴はdlを使う方が多いのですが、今回は質問者様のulを入れ子にする構造をなるべく活かしてあります。 idやclassの使用法についてはNo.1様ご指摘の通りです。 #NNでid名class名にアンダーバーが入っていると無視されるのは確か6.xの時代ぐらいまでだったと思いますが。 詳細情報がありませんが、質問文のソースからしてXHTMLではなくHTMLになっていると思われます。 なのでとりあえず以下のサンプルは、HTML 4.01 Strictで作成してあります。 --------------------------------------------------------------------- 【HTML】sample.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"> <title>サンプル</title> <link rel="stylesheet" href="css/sample.css" type="text/css" media="all"> </head> <body> <ul id="NonIndex"> <li>*最終更新* <ul> <li> <span class="date">2000/00/00</span> <p class="comment">ccccの更新</p> </li> </ul> </li> <li>*更新履歴* <ul> <li> <span class="date">2000/00/00</span> <p class="comment">aaaaの更新</p> </li> <li> <span class="date">2000/00/00</span> <p class="comment">bbbbの更新</p> </li> </ul> </li> </ul> </body> </html> --------------------------------------------------------------------- 【CSS】sample.css 「※~」は注釈ですので実際の使用の際は必ず削除を。 --------------------------------------------------------------------- ul#NonIndex { width: 328px;※質問文にはwidthの指定部分がありませんでしたが、70+250+2×2+2×2=328pxになる筈ですので。 margin: 0; padding: 0; list-style: none; font-size: 12px; font-family: "MS ゴシック", sans-selif;※フォント名にスペースを含む場合は、フォント名の前後をシングルクォーテーション(')、またはダブルクォーテション(")の引用符で括る必要があります。また、指定していたフォントが全て使えなかった場合にも対処できる様に値の最後には総称ファミリ(sans-selif等)を指定しておくことが推奨されています。 color: #696969; } ul#NonIndex li { margin: 0 0 4em 0; padding: 0; } ul#NonIndex li ul { list-style: none; margin: 0; padding: 0; } ul#NonIndex li ul li { zoom: 100%; margin: 0; } ul#NonIndex li ul li:after {※子要素がfloatしている場合の対処として用いられる所謂clearfixという手法です。上記の"zoom: 100%;"とセットで。 height: 0; visibility: hidden; content: "."; display: block; clear: both; } span.date { display: block; float: left; width: 70px; padding: 2px; overflow: auto; } p.comment { float: right; width: 250px; margin: 0; padding: 2px; } --------------------------------------------------------------------- これで先にあげた環境での当方の表示結果は、問題なくご希望の通りになっています。 何か意図した表示結果と違っていたり、検証条件(DOCTYPEなど)が違う様でしたら具体的に補足して下さい。

0suika0
質問者

お礼

ご回答ありがとうございます。 >(IE8は手元にないので)IE6/7、Firefox2/3、Safari3、Opera9.61、NN7.1にて表示結果を試しましたが、”いずれも”[予想表示]ではなく[Netscapeの表示]と同様の結果になりましたが…? すみません、自分の環境を書き忘れていました。 Firefox3.01、Safari4.02、Opera9.64、Netscape7.02で表示しました。OSは関係あるのでしょうか?OSはVistaです。 自分の環境では確かに[予想表示]のように表示されているのですが、なぜ異なるのでしょうか。 すみません、この点もよくわかりません。 >#個人的にはこういう更新履歴はdlを使う方が多いのですが、今回は質問者様のulを入れ子にする構造をなるべく活かしてあります。 ご配慮いただき本当にありがとうございます。 dlも試してみたのですが、日付と更新内容を一列に表示したくてulを選択しました。 ulの入れ子で表現したいことは以下の点です。 ・日付と内容を一列表示すること ・内容の書きだし位置(インデント?)が揃っていること ・日付と内容を一つのリストとみなして縦に履歴が残ること 内容の書きだし位置については改行した場合もインデントが戻らないことが理想です。 最初に作ったときはテーブル構造で表現していたのですが、リストの方がすっきりするかと思いチャレンジしてみました。 abril様に残していただいたソースで確認しましたが、自分の表現したい内容と違っていたようです。 質問内容が足らず本当に申し訳ありませんでした。 ulの入れ子にこだわっているわけではないのですが、自分の表現したい内容がこれでできそうだと思っていたらNetscapeでのみ表現できなかったので質問させていただきました。 abril様の環境では[予想表示]ではなく[Netscapeの表示]となってしまったようで、こちらもよくわからないのですが…… >検証条件(DOCTYPEなど)が違う様でしたら具体的に補足して下さい。 テンプレートをそのまま使用しており、DOCTYPEがどのように影響するかわからずに試しています。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 頭の部分はこのようになっております。 知識不足でお手を煩わせてしまい申し訳ありませんが、もう一度アドバイスをお願いいたします。

0suika0
質問者

補足

質問者です。 補足から失礼いたします。 申し訳ありません。 回答お礼を出した後、もう一度表示してみるとabril様の残していただいたソースで表現できていました。 慌てて書いてしまい本当に申し訳ありません。 自分の表現したい内容が表現できていて本当に満足しています。 ありがとうございます。 これを見ながら、自分でも理解できるように噛み砕いていこうと思います。 本当にありがとうございます。 abril様に残していただいた回答で自分の表現したいことができましたので、これで質問を締めさせていただきます。 salonpath様、abril様、本当にありがとうございました。

その他の回答 (1)

  • salonpath
  • ベストアンサー率48% (194/399)
回答No.1

Netscape入れてないですし、バージョンも書かれてないので想像で書いてます。 .List_xxx系のfloatが解除されてないようなので Style_NonIndexにclear:bothを入れてみたらどうなりますか? それかStyle_NonIndexにwidthを指定する。 本件とは関係ないですけど cssの書き方としてID「Style_NonIndex」が何度も出てくるのは変です classに変えた方が良いです。 Netscapeはバージョンによってcssのセレクタに「_(アンダーバー)」が混ざってるとcssを無視するらしいので対応させようとしてるNetscapeにそのバグがあるのなら「_(アンダーバー)」を使わない名前に変更する必要があります。

0suika0
質問者

お礼

ご回答ありがとうございます。 >Style_NonIndexにclear:bothを入れてみたらどうなりますか? >それかStyle_NonIndexにwidthを指定する。 早速試してみましたが、残念ながら改善は見られませんでした。 >cssの書き方としてID「Style_NonIndex」が何度も出てくるのは変です >classに変えた方が良いです。 >Netscapeはバージョンによってcssのセレクタに「_(アンダーバー)」が混ざってるとcssを無視するらしいので対応させようとしてるNetscapeにそのバグがあるのなら「_(アンダーバー)」を使わない名前に変更する必要があります。 ご指摘ありがとうございます。 こちらもアドバイスを元に修正しました。 引き続きアドバイスをよろしくお願いいたします。

関連するQ&A

  • DIVタグの背景に画像を配置できない

    <!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>組織図</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } #figure_main div { margin:0px; padding:0px; } #figure_main ul { margin:0px; list-style-type: none; width:510px; padding: 0px; } #figure_main li { float:left; text-align:center; background-color:#FFF; border:solid 1px #ccc; padding:5px; width:110px; display:block; margin-right: 40px; } #figure_main div.blank1 { float:left; background-color: #FFF; width:510px; height:10px; } #figure_main li.list_low { margin-left:212px; } #figure_main li.list_hei { margin-left:375px; } #figure_main li.list_l { margin-right:90px; } #figure_main li.list_r { width:120px; margin-right:0; } #figure_main div.list_lineT { background:url(images/listlineT.gif); } </style> </head> <body> <div id="figure_main"> <div class="list_lineT"> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> <div class="blank1"></div> <div> <ul> <li class="list_low">営業推進部</li> <li class="list_r">メディア事業グループ</li> </ul> </div> </div> </body> </html> list_lineTクラスの背景「listlineT.gif」を指定しても表示されません。 パスは間違っていませんが。どこが違うのでしょうか? 宜しくお願いします。

    • ベストアンサー
    • HTML
  • リスト表示を左に寄せたい

    いつもお世話になります。 下記のようなCSSで縦並びのリスト表示をさせていますが、 どうしてもリスト(全体)が左に寄らないので困っています。 できたらボックス(id-=navi)の左から10ピクセルぐらいのところから リストを始めたいのですが・・・ (ちなみに3段組みの一番左のボックスです) 現在はおそらく30pxくらいのところから始まっていて、何をしてもうごきません。 よろしくお願いします。 ---------CSS------------------ #wrapper { width: 855px; background-color:#A96223; } #main{ float:left; width:675px; background-color:#EBE3BE; } #navi{ float:left; width:150px; background-color:#A96223; padding-top:20px; padding-left:10px; text-align:left; margin: 0px; } #advertisement{ float:right; width:30px; background-color:#A96223; } #footer{ clear:both; background-color:#804C2E; height:20px; } #navi ul{ list-style:none; margin:0px; padding:0px; } #navi li{ list-style:none; color:#FFFFFF; margin-left:0px; padding-left:10px; line-height:10px; background-image:url(img/common/yajirushi.gif); background-repeat:no-repeat; background-position:left center; } --------------html---------------------- <body> <div id="wrapper"> <div id="navi"> <ul> <li>TOP</li><br /> <li>新着情報</li><br /> <li>おすすめメニュー</li><br /> <li>ご宴会・パーティー</li><br /> <li>お店のご案内</li><br /> <li>イベントご案内</li><br /> <li>お得クーポン</li><br /> </ul> </div> <div id="main"> <br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="advertisement"> <br /><br /><br /><br /><br /><br /><br /><br /> </div> <div id="footer"> </div> </div> </body>

    • ベストアンサー
    • HTML
  • CSSで<ul><li>タグを使ってどのブラウザでも同じように表示させたい。

    .ul { width: 120px; height: auto; float: left; font: 12; line-height: 150%; padding: 0; list-style-image: url(img/side-tab.gif); } .li { font-size: 12px; margin-left: 1.5em; } <ul class="○○○"> <li>11111</li> <li>22222</li> <li>33333</li> <li>44444</li> <li>55555</li> <li>66666</li> </ul> このようなコードでlistの頭には画像を使いたいのですが、どうしてもブラウザごとに表示がばらばらになってしまいます。 横幅は185pxまででおさめて、かつlistの画像とテキストが同じ列に表示されるようにしたいと考えています。 唯一firefoxだけが思うように表示できました。 IE6と7でも違う表示になりました(IE6だとかなり右寄り) operaに関しては画像とテキストの縦位置がずれてしまっていました。 CSSに関してはいろいろいじってて、なにがなんだがわからない状態になってしまいました・・ これを一つのCSSできれいに表示することは不可能でしょうか? どうかよろしくお願致します。

    • ベストアンサー
    • HTML
  • リストの回り込みについて(マーカーの位置がずれます

    助言いただきたく質問させていただきます。 画像の回り込みを使用してのリストの表示で、IEで表示した際にマーカーの位置が画像とかぶってしまいます。 -----------HTML----------- <div class="com" style="width: 650px;"> <img src="image.jpg" class="img_left"> <ul> <li class="book">あああああああ</li> <li class="book">いいいいいいい</li> <li class="book">ううううううう</li> <li class="book">えええええええ</li> <li class="book">おおおおおおお</li> </ul> </div> --------------------------- -----------CSS----------- .com { margin: 0 auto; padding: 20px; overflow:hidden; } img.img_left{ float: left; margin-right: 30px; } .book { list-style-type: square; padding-bottom: 20px; } --------------------------- FirefoxとChromeではちゃんと画像の右側にマーカーが表示されるので IE用のコードの書き方があるのかなと思っています。 初歩的なものとは思いますが、ご指摘お願いいたします。

    • ベストアンサー
    • HTML
  • Dreamweaverでリストを作成するとボックスからずれてしまいます

    DreamweaverCS3を使用してサイトを作成している初心者です。 AP divで作ったボックスの中にリストを作成したのですが、 何故か文字の部分がボックスから大幅にずれてしまいます。 CSS記述↓ #apDiv1 { position:absolute; left:57px; top:82px; width:150px; height:143px; z-index:12; background-color: #FFFFFF; } #apDiv1 li { list-style-type: none; background-color: #CCCCCC; color: #333333; display: block; width: 135px; padding-bottom: 4px; padding-top: 4px; margin-bottom: 1px; margin-left: 0px; margin-top: 0px; padding-left: 15px; } #apDiv1 li a:hover { background-color:#999999 } <body>内です↓ <div id="apDiv1"> <ul> <li class="style4"><a href="http://oshiete.goo.ne.jp/">あああ</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">いいい</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">ううう</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">えええ</a></li> </ul> </div> どうしたらボックスにピッタリ合わせる事ができるのでしょうか。 どうぞ宜しくお願い致します。

  • ドリームウィーバーでリスト作成すると余白ができる

    ドリームウィーバーで、CSSでサイドナビをつくっています。 リストをたてにし、1項目づつボーダーでかこっています。 IE でも ファイアーフォックスでもきれいに表示されるのですが、 ドリームウィーバー上では、左に余白ができる分、右に飛び出し、 その横のボックスが下にずれるということが起こっています。 ご指導お願いします。 ~html <div id="sidenavi"><img src="img/sidenavi.jpg" width="180" height="165"> <ul> <li> AAAAAAA</li> <li class="menu">BBBBBB</li> <li class="menu">CCCCCCC</li> <li class="menu">DDDDDDD</li> <li>HTML</li> <li>プログラム</li> </ul> </div> ~CSS #sidenavi { float: left; height: 600px; width: 180px; margin: 0px 0px 0px 2px; padding: 0px; background-color: #FFFFFF; background-image: url(img/rose.jpg); background-repeat: repeat-y; } ul { padding: 5 0 0 0px; margin: 0px; list-style-type: none; background-position: left; text-align: left; } li { width: 180px; height:25px; margin: 0 0 0 0px; padding: 5 0 0 10px; background-color: #DD041A; text-align: left; font-size: 14px; font-family: "MS Pゴシック", "Osaka"; border-top: 1px solid #CC0099; border-right: 1px none #CC0099; border-bottom: 1px solid #CC0099; border-left: 1px none #CC0099; color: #FFFFFF; font-weight: bold; } .menu{ margin-left: 0px; padding-left:19px; background-color: #ffffff; width: 180px; font-weight: normal; color: #333333; }

  • cssに詳しい方ご教授ください

    cssは概念はなんとなーくわかるのですが、 以下のcssについて教えてください。 ul.list05 { list-style-type: none; margin: 8px 0 10px 0; } >ulの部分をlist05でspanなどで囲った部分でしょうか? ul.list05 li { padding-left: 0.6em; text-indent: -1.3em; font-size: 86%; line-height: 140%; } >ulの部分をclassなどでlist05を指定したらliに反映される部分でしょうか? ul.list05 li.list01-1 { margin: 0 0 5px; padding-left: 2.0em; text-indent: -2.8em; font-size: 86%; line-height: 140%; } >ulをlist05でclassなどで指定し liはspanでlist01-1を定義すればいいのでしょうか? 初心者過ぎて質問の意味もわからないかもしれませんが、 ご教授いただけると幸いです。 よろしくお願いします。

  • HTML・CSSタグの書き方教えてください!

    画像では見づらいのですが、HOMEの左側にボーダーがピンク色で表示されています。 このHOMEの左側のボーダーを消したい(又は見えなくする)タグを教えてください。 最初のリンクのところだけグループ化して, CSSに{border-left-style: none;}と加えてみたり、 .menu ul li a .first {border-left: none;}等してみたのですが、 変わらず…。 どういうタグを加えれば、左側のボーダーが見えなくなりますでしょうか? よろしくお願いいたします。 <HTML> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv= "content-style-type" content= "text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="css/style.css"rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1> 作りかけページ </h1> <p>テストページ</p> </div><!-- header終わり --> <div class="menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div><!-- menu終わり --> <div id="main"> <div id="contents"> ***コンテンツ*** </div><!-- contents終わり --> <div id="leftsidebar"> ***左サイドバー*** </div><!-- sidebar終わり --> </div><!-- main終わり --> <div id="rightsidebar"> ***右サイドバー*** </div><!-- sidebar終わり --> <div id="footer"> ***フッター*** </div><!-- footer終わり --> </div><!-- wrapper終わり --> </body> </html> <CSS> <style type="text/css"> * { margin: 0; padding: 0; } #wrapper{ width: 760px; /*全体の幅(#wrapper)を760pxの固定幅とする。 */ position: absolute;/*絶対位置*/ left: 50%;/*左端から右方向の位置を指定する */ margin-left: -380px;/*はみ出た半分を戻す */ } /*ヘッダー*/ #header{ width: 758px;/*ヘッダー部分の幅(#content)を758pxとする。*/ height: 200px; background-color:#ffd700; background-repeat: no-repeat; background-position: -50px -70px; text-align: right; border: solid 1px gray; } #header h1{ margin: 0; font-size: 30px; padding: 20px 10px 0px 0px; font-family:arial unicode ms; } #header p{ margin: 0; font-size: 1em; padding-right: 10px; margin-top: 8px; } /*ヘッダー終わり*/ /*body*/ /*menu部分*/ .menu {font-size:20px; height:30px; background-color:#0c907c; text-align:center; } .menu ul{ margin: 0; padding: 0; 760px; } .menu ul li{ float: left; list-style: none; margin: 0; padding: 0; } .menu ul li a{ display:block; width: 151.2px; line-height: 30px; border-left: solid 1px #FF3366; color:#ffffff; text-align: center; text-decoration: none; } .menu ul li a:hover{background-color: #99cc00} /*menu部分終わり*/ #contents{ width: 388px;/*コンテンツ部分の幅(#content)を388pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #leftsidebar{ width: 166px; /*左サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: left;/* 左に配置 */ } #main{ width: 574px; float: left;/* 左に配置 */ } #rightsidebar{ width: 166px;/*右サイドバー部分の幅を166pxとする。*/ background-color:#0000FF; float: right;/* 右に配置 */ } #footer{ width:760px; background-color:#FF3366; clear: both;/* float解除 */ height: 50px; }

    • ベストアンサー
    • HTML
  • menuのHTMLタグとCSSが上手くいかない

    画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。 メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか? 以下がHTMLタグとCSSになります。 アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }

  • firefoxだと2列で表示されてしまう。

    よろしくお願いします。 div.base {width:100%;} .base ul { margin: 0px; padding: 0px 0px 3px 0px; list-style-type:none; } .base li { margin: 0px; padding: 2px 0px 5px 23px; width: 33%; float: left; } 上記のCSSを <div class="base"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <br style="clear: both;"> </div> のように書き込んでいるのですが、IEなどではうまく3列で表示されますがfirefoxの場合はなぜか2列に表示されてしまいます。 お分かりになる方、是非ご教授お願いします。