はじめまして
Webページで表を使って、
データを表示しています。
実装方法は
TABLEタグで表を作って
TDタグの中にデータを表示させています。
その時に表示させるデータが半角文字の羅列だと
表幅をピクセル指定していても改行されずに
表が大きくなってしまいます。
そこで、半角文字の羅列でも
表幅は固定のままで、全角文字と同じように
改行するにはどうしたらよいのでしょうか
どなたかご教授お願いいたします。

A 回答 (3件)

<head> ~ </head> の間に、



<style type="text/css">
<!--
td{word-break:break-all}
-->
</style>

と記述すると、Internet Explorer ならば指定幅内で強制改行します。
IE の独自スタイルシートなので、IE 以外では効果はありません。
    • good
    • 0
この回答へのお礼

御回答ありがとうございます。
IE限定なので御教授頂いた内容で
解決できました。
再度、お願いしてしまって申し訳ないのですが、
どうすればここまで詳細に
HTMLについて調べられるのでしょうか?
参考書やURL等をできたら教えてください。
今後とも御教授お願いいたします。

お礼日時:2002/02/08 00:41

KOTAERU No.#2「お礼」の回答です。




HTMLについては
・翔泳社の「HTMLタグ辞典 (第4版)」

スタイルシートについては
・翔泳社の「スタイルシート辞典」

が比較的分かりやすいと思います。


ウェブページ全般に関して詳しく知りたいと思うようでしたら、
神崎正英さんのサイト ( http://www.kanzaki.com/ ) や、
「ユニバーサルHTML / XHTML」( http://www.kanzaki.com/book/html/ )
をお勧めします。

参考URL:http://www.kanzaki.com/
    • good
    • 0

出来ればソースを書き出してくださいませんか?何を使ってHTMLページを作成なさっているのでしょうか?

    • good
    • 0
この回答へのお礼

質問の内容が曖昧ですいませんでした。
HTMLの作成は
サーバサイドスクリプト:VBScript
クライアントサイドスクリプト:JAVAScript
でブラウザはIE限定で行っています。
作成したいHTMLのページは
TABLEタグを使って、DBのデータの一覧表を
ブラウザに表示するといったページです。
MtHillさんの内容で解決できました。
気に掛けて頂いてありがとうございまいした。
今後はわかりやすく質問するようにします。
今後ともよろしくお願いいたします。

お礼日時:2002/02/08 00:38

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Q

<ul>タグで各<li>の中身を横方向羅列させつつ各項目を等幅に。

以下のように、ulですが、横方向に羅列して表示される、
htmlソースと、CSSソースがあります。

で、これをもとにしつつ、(あるいはもとにしなくてもいいのですが)、
各項目・・・下の例では、

[サイトマップ] [ヘルプ] [お問い合わせ]

の3つそれぞれを、等幅にして表示させたく思っています。


条件としては・・・

●<ul>を使うことは必須。

●cssハック的なものを使ってもかまいません。

●できればJavaScriptを使いたくないですが、やむを得ない場合は、OKです。

●もしやむをえなければ、たとえば、「各項目の、等幅化する前のwidthは、7em以内でないといけない」
 などの条件がついてもかまいません。



以前、できたような気がするのですが・・・やりかたを忘れてしまいました。


ご存じのかたいらっしゃいましたら、お教えいただければ幸いです。

よろしくお願いいたします。


//-----------------------------------------------------------

<html ソース>

<ul class="miya-ul_lateral">
<li class="miya-li_lateral_first">サイトマップ</li>
<li>ヘルプ</li>
<li class="miya-li_lateral_last">お問い合わせ</li>
</ul>

//-----------------------------------------------------------

<cssソース>

/* 1st step: */
ul.miya-ul_lateral li{
display:inline;
list-style-type:none;
padding:0 2px 0 5px;
margin:0;
border-left:1px solid #000;
}
/* /1st step: */

/* 2nd step: */
ul.miya-ul_lateral li.miya-li_lateral_first{
border-left:0;
padding-left:0;
}
/* 2nd step: */

/* 3rd step: */
ul.miya-ul_lateral li.miya-li_lateral_last{
padding-right:0;
}
/* 3rd step: */

よろしくお願いいたします。

<ul>タグで各<li>の中身を横方向羅列させつつ各項目を等幅に。

以下のように、ulですが、横方向に羅列して表示される、
htmlソースと、CSSソースがあります。

で、これをもとにしつつ、(あるいはもとにしなくてもいいのですが)、
各項目・・・下の例では、

[サイトマップ] [ヘルプ] [お問い合わせ]

の3つそれぞれを、等幅にして表示させたく思っています。


条件としては・・・

●<ul>を使うことは必須。

●cssハック的なものを使ってもかまいません。

●できればJavaScriptを使いた...続きを読む

Aベストアンサー

ん~・・・いまいちよくわかりませんが、等幅にするならwidthを指定しなくては
いけないでしょう。
こんな感じでどうですか?

<style>
ul.miya-ul_lateral{
list-style-type:none;
padding:0 2px 0 5px;
margin:0;
}
ul.miya-ul_lateral li{
float:left;
}
ul.miya-ul_lateral li.miya-li_lateral_first a{
border-left:0px solid;
}
ul.miya-ul_lateral a{
display:block;
width:7em;
border-left:1px solid #000000;
text-align:center;
text-decoration:none;
}
ul.miya-ul_lateral a:hover{
background-Color:#ffff00;
}
</style>

<ul class="miya-ul_lateral">
<li class="miya-li_lateral_first"><a href="#">サイトマップ</a></li>
<li><a href="#">ヘルプ</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>

ん~・・・いまいちよくわかりませんが、等幅にするならwidthを指定しなくては
いけないでしょう。
こんな感じでどうですか?

<style>
ul.miya-ul_lateral{
list-style-type:none;
padding:0 2px 0 5px;
margin:0;
}
ul.miya-ul_lateral li{
float:left;
}
ul.miya-ul_lateral li.miya-li_lateral_first a{
border-left:0px solid;
}
ul.miya-ul_lateral a{
display:block;
width:7em;
border-left:1px solid #000000;
text-align:center;
text-decoration:none;
}
ul.miya-ul_latera...続きを読む

Qテーブルタグで作った表を左側に、右側に表とは関係なく文字入力をするにはどのようにHTMLを組めば良いでしょうか?

テーブルタグで作った表を左側に、右側に表とは関係なく文字入力をするにはどのようにHTMLを組めば良いでしょうか?

よろしくお願いします

Aベストアンサー

CSSのfloatでレイアウトするのが一般的だと思います。
少し勉強してみましょう。

テーブルタグの中にテーブルタグを書けば、HTMLでも実現可能ですが、現在はあまり推奨されていません。

<html>
<head>
<style type="text/css">
<!--

div.leftbox{
width:100px;
height:200px;
float:left;
}

div.rightbox{
width:200px;
height:200px;
}

-->
</style>
</head>
<body>
<div class="leftbox">
<table border="1px">
<tr>
<td>a
</td>
<td>b
</td>
<td>c
</td>
</tr>
<tr>
<td>a
</td>
<td>b
</td>
<td>c
</td>
</tr>
</table><br>
<table border="1px">
<tr>
<td>a
</td>
<td>b
</td>
<td>c
</td>
</tr>
<tr>
<td>a
</td>
<td>b
</td>
<td>c
</td>
</tr>
</table>
</div>
<div class="rightbox">
<p>この部分に</p>
<p>文字をいれたいです。</p>
<p>よろしく</p>
<p>お願い</p>
<p>します</p>
<p>。</p>
</div>
</body>
</html>

CSSのfloatでレイアウトするのが一般的だと思います。
少し勉強してみましょう。

テーブルタグの中にテーブルタグを書けば、HTMLでも実現可能ですが、現在はあまり推奨されていません。

<html>
<head>
<style type="text/css">
<!--

div.leftbox{
width:100px;
height:200px;
float:left;
}

div.rightbox{
width:200px;
height:200px;
}

-->
</style>
</head>
<body>
<div class="leftbox">
<table border="1px">
<tr>
<td>a
</td>
<td>b
</td>
<td>c
</td>
</tr>
<...続きを読む

Q固定幅+可変幅レイアウトがなぜこれで実装可能?

cssで、固定幅+可変幅レイアウトについて、下記コードのようにやったら実現できたのですが、
なぜ右カラムのwidthが100%でも、ブラウザの横幅いっぱいでなく、
望みどおりに実現できてしまっているのでしょうか?

結果オーライではありますが、理屈が知りたい&後学のために、
理由をお教えいただければ幸いです。

(下記では見やすいようにタブを全角空白4文字に変換しています。)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>2カラムレイアウト(左固定幅、右リキッド)</title>
<meta name="description" content="2カラムレイアウト(左固定幅、右リキッド)">
<meta name="keywords" content="CSS,2カラムレイアウト,左固定幅,右リキッド">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
*    {
     margin: 0;
     padding: 0;
}

#header {
     width: 100%;
     height: 150px;
     background-color: #808080;
}
#container {
     width: 100%;
}

#left    {
     width: 200px;
     background-color:#A9A9A9;
     float: left;
}

#right {
     width: 100%;
     background-color:#DCDCDC;
}

#footer {
     clear: both;
     width: 100%;
     height: 150px;
     background-color: #808080;
    
}
</style>
</head>
<body>
<div id="header">
    <p>ヘッダー</p>
</div>
<div id="container">
    <div id="left">
    <p>左あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
    </div>
    <div id="right">
        <p>右いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p>
    </div>
</div>
<div id="footer">
    <p>フッター</p>
</div>
<p><a href="#" onClick="history.back(); return false;">戻る</a></p>
</body>
</html>

cssで、固定幅+可変幅レイアウトについて、下記コードのようにやったら実現できたのですが、
なぜ右カラムのwidthが100%でも、ブラウザの横幅いっぱいでなく、
望みどおりに実現できてしまっているのでしょうか?

結果オーライではありますが、理屈が知りたい&後学のために、
理由をお教えいただければ幸いです。

(下記では見やすいようにタブを全角空白4文字に変換しています。)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja...続きを読む

Aベストアンサー

>望みどおりに実現できてしまっているのでしょうか?
 出来てないです。!
 左に配置する要素(ここでは#left)の内容「あの文字数」を減らせば一目瞭然です。
 それは、floatで後続の内容が回り込んでいるためですね。
 これを回避するためには、#right p{margin-left:200px;}とすると回り込む要素がなくなると、自身のmargingが生きてきます。(floatではmarginは相殺されない)
 ⇒Box model - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/box.html#collapsing-margins )

 まだ始めたばかりだと思いますので、細かいことも含めて指摘しておきます。
・HTMLは文書構造だけ記述する。
 2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
・idやclassは文書構造を補完するため
 「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」
 container,left,rightというのは(内容の意味)文書構造じゃないでしょう。
 header,footerはその意味から一つの文書内に行くとも登場する可能性があるので、idじゃなくclass。HTML5の新しい要素を見ると
<body>
 <header>
  <h1></h1>
  <nav></nav>
 </header>
 <section>
  <section>
   <article>
    <header></header>
    <section></section>
    <footer></footer>
   </article>
  </section>
 </section>
 <footer></footer>
</body>
のようになることを考えても

・<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"・・略・・
 XPもサポート終了、HTML5が勧告直前でいまだにTrnsitinalはさすがにないでしょう。
 1999年のHTML4.01の勧告以来『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』

・*{} 全称セレクタでブラウザのもつすべてのmarginを0にしてしまうと、登場するすべての要素に対してスタイルを追加しなければならなくなります。どこかの糞オーサリングツールが行なっている手法ですが、必要なとき必要なものだけリセットしましょう。

・#headerではなく、きちんと基点なるセレクタを書きましょう。
 「単体セレクタは型セレクタもしくは 全称セレクタのいずれかの直後に、0個以上の属性セレクタ、IDセレクタ、擬似クラスが任意の順序で続くものである。( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#selector-syntax )」
 後方互換でCSS1の書き方で通用はしますが・・。

・<a href="#" onClick="history.back(); return false;">戻る</a>
 javascriptを使用するときはjavascriptが無効なUAのことも考慮すること。

[サンプル]
☆Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.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=UTF-8">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;}
div.section{position:relative;min-height:400px;}
div.section div.nav,div.section div.aside{position:absolute;top:0;width:150px;height:100%;padding:0 5px;font-size:0.9em;}
div.section div.nav{left:0;}
div.section div.aside{right:0;}
div.section div.section{width:auto;min-width:0;margin:0 160px;min-height:0;}
div.section h2,div.section p{margin:0 160px;}
div.section div p{margin:0;}

/* 色分け */
body{background-color:gray;}
div.header{background-color:aqua;}
div.section{background-color:white;}
div.section div.aside{background-color:lime;}
div.section div.nav{background-color:silver;}
div.footer{background-color:fuchsia;}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>本文はsection</p>
__<div class="section" id="section1">
___<h3>項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<div class="section" id="section2">
___<h3>項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<div class="nav" id="contentTable">
___<h3>目次</h3>
___<ol>
____<li>1項</li>
____<li>2項</li>
____<li>3項</li>
___</ol>
__</div>
__<div class="aside">
___<h3>補足記事</h3>
___<p>ここには、本題から外れた(aside)、本題とは直接関係しない記事を書く</p>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
__<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>

>望みどおりに実現できてしまっているのでしょうか?
 出来てないです。!
 左に配置する要素(ここでは#left)の内容「あの文字数」を減らせば一目瞭然です。
 それは、floatで後続の内容が回り込んでいるためですね。
 これを回避するためには、#right p{margin-left:200px;}とすると回り込む要素がなくなると、自身のmargingが生きてきます。(floatではmarginは相殺されない)
 ⇒Box model - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/box.html#collapsing-margins )

 まだ...続きを読む

Qテーブルタグ内の半角文字が隠れます。

IE8で、テーブル内の半角テキストが折り返さずに隠れてしまいます。

他ブラウザでは、セルから飛び出します。
また、全角の場合は、自動的に折り返しています。

こういった現象というのは、何が原因となっているのでしょうか。
CSSかと思い、思い当たる節は変えたり試したのですが、分からなかったため、ご質問させていただきました。

ご存じの方いらっしゃいましたら、何卒ご教授お願い致します。

Aベストアンサー

まずはCSS起因かを切り分けるためにCSSを全て削除してみてはどうでしょう?
overflow が関係している可能性はありますが、切り分けが先だと思います。
CSS起因なら overflow を全て削除してみましょう。少しずつ削除する場所を狭めて問題の記述を突き止めてみてください。
(勿論、作業前にバックアップを取っておく必要があります)

ちなみに長い単語が含まれる場合にゼロ幅スペース(Zero-width space)を使用する必要はありません。
そんな状況のために word-wrap や word-break があるのですから。
http://www.tagindex.com/kakolog/q3bbs/1201/1374.html

Qtableにtable。table同士の間隔を拡大

スクロールバーを付けるためにtable内にtableを入れました。
中のtableとtableの間隔を開けたいです。
言葉が少ないですが、その分画像で頑張って説明します。
お願いいたします。
<style type="text/css">
#test0{
cellpadding: 2;
width: 518px;
background-color : #fff;
border:1px solid #333;
border-spacing:0;
}

#start{
width: 495px;
height: 230;
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ff0000;
}

.center{
width: 495px;
height: 230;
border-top: 0;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ff0000;
}

#end{
width: 495px;
height: 230;
border-top: 0;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #40ee22;
}

td.test1{
background-color: #000000;
color: #333333;
}

td.test2 img{
margin: 10px;
}

.test3{
font-size: 12px;
padding: 5px;
}

td.test4{
text-align: center;
}
</style>
<table id="test0">
<tbody>
<tr>
<td>
<DIV style="height:400px; overflow:auto;">

<table id="start">
<tr>
<td class="test1" colspan="3">タイトル</td>
</tr>
<tr>
<td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td>
<td class="test3" colspan="2">テストテストテストテストテストテスト</td>
</tr>
<tr>
<td class="test4">left</td>
<td class="test4">right</td>
</tr>
</table>

<table class="center">
<tr>
<td class="test1" colspan="3">タイトル</td>
</tr>
<tr>
<td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td>
<td class="test3" colspan="2">テストテストテストテストテストテスト</td>
</tr>
<tr>
<td class="test4">left</td>
<td class="test4">right</td>
</tr>
</table>

<table id="end">
<tr>
<td class="test1" colspan="3">タイトル</td>
</tr>
<tr>
<td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td>
<td class="test3" colspan="2">テストテストテストテストテストテスト</td>
</tr>
<tr>
<td class="test4">left</td>
<td class="test4">right</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

スクロールバーを付けるためにtable内にtableを入れました。
中のtableとtableの間隔を開けたいです。
言葉が少ないですが、その分画像で頑張って説明します。
お願いいたします。
<style type="text/css">
#test0{
cellpadding: 2;
width: 518px;
background-color : #fff;
border:1px solid #333;
border-spacing:0;
}

#start{
width: 495px;
height: 230;
border-top:1px solid #333;
border-left:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ff0000;
}

.center{
width: 495px;
...続きを読む

Aベストアンサー

<h1>サンプル</h1>
<div class="product">
<div class="section"><!-- HTML5ではsectionという要素になる -->
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
<div class="section">
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
<div class="section">
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
</div>
</body>
</html>

<h1>サンプル</h1>
<div class="product">
<div class="section"><!-- HTML5ではsectionという要素になる -->
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li class="caption">テストテストテストテストテストテスト</li>
<li><span class="price">価格</span><span class="stock">在庫</span></li>
</ul>
</div>
<div class="section">
<h2>タイトル</h2>
<ul>
<li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li>
<li c...続きを読む


人気Q&Aランキング

おすすめ情報