- 締切済み
このタグの方法は?
ブログの中で、画像と解説を上下に並べたいんですが そのタグの方法で質問です 尚、予め説明しておくと “--”の部分に関しては 内容の説明と、どう反映させたいかを 分かり易く…と思い、分けただけなんで 並べ方としては、この方法なんですが ----------------------------- ----------------------------- 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 ----------------------------- ----------------------------- 要するに、画像の隣に解説を置き 更に、間を、ほとんど(?)開かせずに 改行して、同じ様に画像の隣に解説… そう設置したいんです それで、今迄、私が設定した方法では この並びだったんですが ----------------------------- ----------------------------- 画像 解説 画像 解説 ----------------------------- ----------------------------- この設置方法で、タグとしては ここで教えて貰った方法で ----------------------------- <table border=0> <tr> <td>画像</td><td>解説</td> <td>画像</td><td>解説</td> </tr> </table> ----------------------------- でしたし、解説が2段以上の時には ----------------------------- <table border=0> <tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr> </table> ----------------------------- でした 要するに、今迄は、画像の隣に解説…で設置しても 改行は、した事が、ありません 但し今回の設置方法の場合、今迄の応用と考え ----------------------------- <table border=0> <tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr><tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr> </table> ----------------------------- と、画像と解説の後に改行したい所で <tr>~</tr>設置しました すると、画像と解説の並びとしては 特に問題も無く出来ましたが ----------------------------- タイトル 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 ----------------------------- と入れたくて ----------------------------- タイトル <table border=0> <tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr><tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr> </table> ------------------------------ と設置したら ------------------------------ タイトル 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 ------------------------------ と、タイトルと画像&解説の間に かなりのスペースが空いてしまいました 仕方が無いからと思い 現在は ----------------------------- <table border=0> <tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr> </table> <table border=0> <tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr> </table> ----------------------------- と設定してますが 今度は、画像と解説の改行部分に間が空いてるのと 現在の設置方法では、解説文が長い時だと ---------------------------- 画像 解説解説 画像 解説 画像 解説 画像 解説 画像 解説解説 画像 解説 ---------------------------- と、解説の後に画像が付く様に設置される為 解説が短い画像と長い画像では ズレてしまい、上手く配列出来ません これは、どう設置したら良いんでしょうか?
- mitsuemon
- お礼率60% (1485/2450)
- ブログ
- 回答数9
- ありがとう数9
- みんなの回答 (9)
- 専門家の回答
みんなの回答
- 756co
- ベストアンサー率79% (162/203)
テーブルの枠についてはborder=のところを修正してください。 (枠をなくしたいときは border=0) 自分でテストしていたものをそのままコピペしてしまったもので… すみません。 上に間が入ってしまうのは、改行を入れているからだと思います。 ブログの本文とテーブルタグの間にも改行を入れないようにしてみてください。 ※例 総理が誕生した事に、なります。<table border=0><tr><td>両院の結果は</td></tr><tr><td><table border=0><tr><td>◆衆議院<br>(投票総数480/過半数241)<br& gt;<strong>鳩山由紀夫</strong>氏(民主)327票<br><strong>若林正俊</strong>氏(自民) 119票<br><strong>山口那津男</strong>氏(公明) 21票<br><strong>志位和夫</strong>氏(共産) 9票<br><strong>平沼赳夫</strong>氏(無所属) 4票</td><td>◆参議院<br>(投票総数237/過半数119)<br><strong>鳩山由紀夫</strong>氏(民主)124票<br><strong>若林正俊</strong>氏(自民) 84票<br><strong>山口那津男</strong>氏(公明) 21票<br><strong>志位和夫</strong>氏(共産) 7票<br>白票 1票<br></td></tr></table> </td></tr> <tr><td>そして、これが鳩山内閣の一覧です</td></tr> <tr><td><table width=410 border=0 cellpadding=0 cellspacing=0> <tr><td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> <td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> </tr> <tr><td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> <td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> </tr> <tr><td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> <td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> </tr> <tr><td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> <td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> </tr> <tr><td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> <td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> </tr> <tr><td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> <td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> </tr> <tr><td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> <td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> </tr> <tr><td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> <td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> </tr> <tr><td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> <td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> </tr> </table> </td></tr> </table>
- 756co
- ベストアンサー率79% (162/203)
訂正です。 すいません >「ブログ設定」-「最新記事一覧(件数)」で設定できます。 「最新記事一覧」ではなく、 「記事(ページ別)」でした。 すいません。 もし、ブログの管理画面(管理メニュー)が古いままの場合 新しいメニューに切りかえた方がいいと思います。 管理ページの左側にある「新メニューに切り替える」をクリックしてください。
補足
回答有難う御座います この、記事の “1ページに表示される記事の数を少なくする” に関しては、質問の主旨とは違ってます ただ…これは偶然なんですが 私の悩み(?)の1つが解決しました(笑) と言うのも、ブログを旗揚げして しばらくは、何とも無かったんですが ある日を境に、急にブログ全体が重くなってました それで、ここでも原因を聞いたんですが 全く分からず…だったんで そのままでした…しかし、こういう所で解決するとは?…(笑) 御蔭様で、解消しました ちなみに現在では、記事数を5個に設定してます(笑) それで…話の本題なんですが 解決は難しいですか? それと、No.2さんにも書きましたが No.2さん御指摘のタグで試したら やはり空間が出来る上に枠が付いてしまいます これはムリなんでしょうか?
- 756co
- ベストアンサー率79% (162/203)
>現在は『自動改行』ですが >これを『HTMLタグのみ』に変更すると >携帯メールの画面の様に >全く改行が無い文章に、なります >これは過去の記事は勿論、新しく作っても同じでした >更に、改行したい部分に<br>を入れても >全く反映されませんでした おかしいですね・・・ 私もFC2でブログを作っていますが、 自動改行の設定を変更しても過去記事には反映されませんでした。 私はfirefoxを使っていますので、そのせいかな?と思い IE7で確認しても同じでした (改行の設定を変えても過去記事には反映されない、 <br> <br/> <br /> どのタグも認識される) ただ、firefoxのときには気がつかなかったのですが IE7でみるとブログのレイアウトが崩れています。 本文記事のブロックが重なっていたり、サイドバーが正しく表示されません。 読み込みエラーも起きます。 テンプレートをカスタマイズしたとき、どこかがおかしくなったのかもしれませんし 本文などで使っているタグが正しくないのかもしれません。 salonpathさんのおっしゃっている >タイトルの隙間より1ページに記事を詰め込みすぎの方がより問題だと思います。 これは、1ページに表示される記事数が多いということではないでしょうか。 ひとつの記事が長ければ、縦に長くなります。 そうなると、読む人は下にスクロールしていかなければならないので 面倒と感じたりしますし 記事数や画像、動画、サイドバーコンテンツが多いと 読み込む(ページが表示される)まで時間がかかります。 なかなかページが表示されないと、 読む手は待ちきれなくなってブログを読む前に立ち去ってしまいます。 1ページに表示される記事の数を少なくすることをおすすめします。 mitsuemonさんのブログはひとつのエントリーが長文になることが多いようですので、 3~4記事ほどがいいのではないでしょうか。 「ブログ設定」-「最新記事一覧(件数)」で設定できます。
- 756co
- ベストアンサー率79% (162/203)
ブログとソース見ました。 やはり投稿欄でシフトキーを押すたびに改行<br />が自動的に入っています。 投稿欄で <table> <tr><td> </td> <td> </td></tr> <tr><td> </td> と書いただけで、 <table><br /> <tr><td> </td><br /> <td> </td></tr><br /> <tr><td> </td><br /> となってしまいます。 実害はあまりないようですが。 回避策としては、ブログの設定画面(投稿設定)で 「自動改行」-「HTMLタグ以外は無視する」を選択する方法がありますが 過去記事には反映されないようです。 テーブルを縦に並べるだけでは隙間が入ってしまうのは仕方ないようです。(「改行をそのまま反映」の設定にしている場合) 内閣一覧のテーブルで、縦にたくさんテーブルを並べていますね。 これはひとつのテーブルにまとめてはどうでしょうか。 「HTMLタグ以外を無視」にしてから、 新しく記事を作成するのもいいかもしれません(FC2ブログは日付を任意で変えられますし) それか、いまの記事を手直しする方向では やはり一部分を大きなテーブルで囲んでしまうのが手っ取り早いかと。 「両院の結果は」から、 閣僚一覧のテーブルをすべてまとめてしまうのです。 ※例 <table border=2><tr><td>両院の結果は</td></tr> <tr><td> <table border=0><tr><td>◆衆議院<br>(投票総数480/過半数241)<br><strong>鳩山由紀夫</strong>氏(民主)327票<br><strong>若林正俊</strong>氏(自民) 119票<br><strong>山口那津男</strong>氏(公明) 21票<br><strong>志位和夫</strong>氏(共産) 9票<br><strong>平沼赳夫</strong>氏(無所属) 4票</td><td>◆参議院<br>(投票総数237/過半数119)<br><strong>鳩山由紀夫</strong>氏(民主) 124票<br><strong>若林正俊</strong>氏(自民) 84票<br><strong>山口那津男</strong>氏(公明) 21票<br><strong>志位和夫</strong>氏(共産) 7票<br>白票 1票<br></td></tr></table> </td></tr> <tr><td>そして、これが鳩山内閣の一覧です</td></tr> <tr><td> <table width=410 border=1 cellpadding=0 cellspacing=0> <tr><td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> <td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> </tr> <tr><td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> <td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> </tr> <tr><td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> <td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> </tr> <tr><td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> <td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> </tr> <tr><td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> <td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> </tr> <tr><td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> <td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> </tr> <tr><td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> <td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> </tr> <tr><td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> <td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> </tr> <tr><td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> <td width=75 align=center> 画像 </td> <td width=130> 説明文 </td> </tr> </table> </td></tr> </table> これでも 改行ごとに<br />が挿入されてしまいますが とりあえずここは無視しましょう。
お礼
遅くなりましたが 今回御指摘のタグを試して見ました…が… やはりダメです… 今回の反映内容は、同じ様に空間は空いてますが それだけではなく セル…を使用してる影響でしょうか? 今度は全体に枠が入ってしまいます 今迄だったら入らなかったんですが… これは、ムリなんでしょうか?
補足
回答有難う御座います 結論から言うと 今回書いて頂いたタグに関しては まだ使用してませんから分かりません ただ、その前に 気になる部分が、あったんで質問なんですが 自動で改行が入ってるとの事ですよね? それでブログの設定を確認したんですが 『自動改行』と『HTMLタグのみ』の2つでした 現在は『自動改行』ですが これを『HTMLタグのみ』に変更すると 携帯メールの画面の様に 全く改行が無い文章に、なります これは過去の記事は勿論、新しく作っても同じでした 更に、改行したい部分に<br>を入れても 全く反映されませんでした これは、どうしてなんでしょう? また、どう解釈すれば良いでしょうか? その返答を御聞きしてから 今回教えて頂いたタグを使用してみようと思います
- salonpath
- ベストアンサー率48% (194/399)
みてみました こことか *** これが鳩山内閣の一覧です<br><br><br><br><br><br><table border="0"> こういうところとか /table><br><br><br><br><br><br><table border="0"> <br>(改行のタグ)の連続が原因なんですけれど これってご自身で記事を書く時に、自分の意思で挿入するものだと思うのですが、FC2ブログだと自動で4行も6行も改行させるんでしょうか、勝手に。 とりあえず<br>の連続を消せば隙間は消えると思います。 投稿画面でbrが見えないなら改行を消してください 改行が見えないなら、記事をテキストエディタなどにコピペするなどして、改行を消すなど工夫してみてください。 それと今回mitsuemonさんが問題だと思ってる事とは違いますが タイトルの隙間より1ページに記事を詰め込みすぎの方がより問題だと思います。 人に見せる事を意識するならページを分けて読み込みを軽くしたほうがいいと思います。
補足
回答有難う御座います、1つ分からないんですが 御指摘のタグ “これが鳩山内閣の一覧です<br><br><br><br><br><br><table border="0">” に関してなんですが 私の探し方が悪いんでしょうか? 御指摘の様なタグが見つかりません 一応、私も自分のタグをコピーして見ましたが 場所としての該当では ------------------------------------------------------------------------------- そして、これが鳩山内閣の一覧です<br /><table border=0><br /><tr><br /><td>画像<br /></td><td><span style="color:#FF00FF">総理大臣</span><br><strong>鳩山由紀夫</strong></td><br /> ------------------------------------------------------------------------------- この様なタグでした、従って <br><br><br><br><br><br><table border="0">には、なって無いと 判断したんですが…(笑) それとも意味が違いましたか? それと、参考に、なるかも?… と思い、自分で入れたタグも書かせて頂くと ------------------------------------------------------------------------------- そして、これが鳩山内閣の一覧です <table border=0> <tr> <td>画像</td><td><span style="color:#FF00FF">総理大臣</span><br><strong>鳩山由紀夫</strong></td> ------------------------------------------------------------------------------- です、従って解釈が違ったらスイマセン “ご自身で記事を書く時に、自分の意思で挿入する…” に関しては、私も、そうしてると思います “<br>の連続を消せば隙間は消える…投稿画面でbrが見えないなら改行を消してください 改行が見えないなら…コピペするなどして、改行を消す…” に関してなんですが、これも意味が違ってたらスイマセン この部分のタグを正確に書くと ------------------------------------------------------------------------------- </tr> </table> そして、これが鳩山内閣の一覧です <table border=0> <tr> <td>画像</td><td><span style="color:#FF00FF">総理大臣</span><br><strong>鳩山由紀夫</strong></td> ------------------------------------------------------------------------------- 従って、自分では<br>タグを入れてないんで 消し様が無い様に思えます それで、前回アドバイス頂いたタグに関しても この様なタグで設定しましたが ------------------------------------------------------------------------------- <table> <tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr><tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr> </table> ------------------------------------------------------------------------------- この様に変えても↓ ------------------------------------------------------------------------------- <table><tr><td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr><tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr> </table> ------------------------------------------------------------------------------- 反映した文章としては ------------------------------------------------------------------------------- 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 ------------------------------------------------------------------------------- の様に、上が空いてます 但し、タグを詰めないより 詰めた方が隙間は小さいですが それでも、見た感じが変な位に隙間が空いてます それと、自動改行の事なんですが 設定ページを見ると 『自動改行』と『HTMLタグのみ』の2つでした 現在は『自動改行』ですが これを『HTMLタグのみ』に変更すると 携帯メールの画面の様に 全く開業が無い文章に、なります 最後に、この意味は、どう解釈したら良いでしょうか? “タイトルの隙間より1ページに記事を詰め込みすぎの方がより問題だと思います。”
- 756co
- ベストアンサー率79% (162/203)
補足読みました。 >cellspacing=0の横の width=600と ><td width=200>と、どう違いますか? <table>タグの中にある width=600 は テーブル全体の横幅を指定しています。 <td>タグはセルの幅です。 例としてあげているテーブルタグは 一行の中にセルが4つあり、 画像の入っているセル <td width=200>画像</td> の幅は200ピクセル、 解説文が入っているセル <td width=100>解説1<br>解説2</td> の幅は100ピクセルとなっています。 これが2組(セルが4つ)あるので (200+100)×2 で 全体の幅が600になります。 この計算で、幅の数値は自由に決めることができます。 >どっちの数字を変えても変化が同じ様に感じました ↓このタグを、 <table border=0 cellpadding=0 cellspacing=0 width=600> <tr> <td colspan=4>タイトル</td> </tr> <tr> <td width=200>画像</td><td width=100>解説1<br>解説2</td> <td width=200>画像</td><td width=100>解説3<br>解説4</td> </tr> <tr> <td width=200>画像</td><td width=100>解説1<br>解説2</td> <td width=200>画像</td><td width=100>解説3<br>解説4</td> </tr> </table> ↓ ↓ ↓ ↓ ↓ <table border=0 cellpadding=0 cellspacing=0 width=600> <tr> <td colspan=4>タイトル</td> </tr> <tr> <td width=200>画像</td><td width=100>解説1<br>解説2</td> <td width=100>画像</td><td width=200>解説3<br>解説4</td> </tr> <tr> <td width=50>画像</td><td width=250>解説1<br>解説2</td> <td width=200>画像</td><td width=100>解説3<br>解説4</td> </tr> </table> というように、widthの数値を変えるのは不可能です。 テーブルの行(tr)ごとにセルの幅を変えたいのなら、 セルの中に新たなテーブルをつくってしまうという手があります。 さて、本題の ブログ本文とテーブルとの間が空いてしまう問題ですが、 この際そのブログ記事全体をテーブルで囲んでしまうという強硬手段ではいかがでしょうか。 デフォルトだと、セルの中の要素は左寄りになってしまうので 画像の入るセルを右寄せにしましょう。 ※例 <table border=2 width=600> <tr> <td> ブログ本文 </td> </tr> <tr> <td> <table border=0 cellpadding=0 cellspacing=0 width=600> <tr> <td colspan=4>タイトル</td> </tr> <tr> <td width=200 align=right>画像</td><td width=100>解説1<br>解説2</td> <td width=200 align=right>画像</td><td width=100>解説3<br>解説4</td> </tr> <tr> <td width=200 align=right>画像</td><td width=100>解説1<br>解説2</td> <td width=200 align=right>画像</td><td width=100>解説3<br>解説4</td> </tr> </table> </td> </tr> <table> 説明ベタで申し訳ありません
補足
回答有難う御座います “ブログ記事全体をテーブルで囲んでしまうという強硬手段では…” この事なんですが、ダメだとは言いません… ただ、問題は、今回その方法で解決したとしても 根本的な問題が解決してません 従って、今後同じ様な状況に、なった時 今回御指摘の強制…の方法が適用出来なかった場合が 困るんです それでブログはFC2ブログでURLは、これなんですが http://mitokohmon02.blog93.fc2.com/ なるべく早く御覧に、なって下さい と言うのも余談ですが 教えてグーの場合ふざけた対応を、する所が、あり 他人のURLなら何も言いませんが 自分のURLを載せると、何でも宣伝目的扱いして 直ぐに削除や編集でカットするからです ちょっと文章を読めば 宣伝なのか?トラヴルを説明する目的なのかは分かるのに それを判断して無いで、何でも宣伝扱いで編集するんです これで原因は分かるでしょうか?
- salonpath
- ベストアンサー率48% (194/399)
>解決出来ませんでした >結果としては上の文章とタイトルとの間が大きく開いてしまいました え? いや、当初の質問の 「タイトルと画像&解説の間にかなりのスペースが空いてしまう」 のは解決できましたよね? ■根本的な原因の調べ方 htmlとcssのソースを見て、どこか余白をあけてる要素や指定はないか? ソースが膨大すぎてどこを調べたらいいのか分からない場合は ↓ ■めぼしのつけ方 どこに隙間が開くかを調べる ・tableと他の要素(前の文章ですかね)には隙間が開いて ・tableとtableとの間には隙間が開かない のは分かってるので ・tableの下にはどれくらい隙間が開くか? ・tableの上の文章のタグが続く時にも隙間が開くか? その開く場所の法則を考えます。 でもって htmlタグ自体にスペースを空ける指定は出来ないので、おそらくcssを使ってに余白をあける設定がしてあるんじゃないか?としか言えないんですよね。 通常のblogでそこまでかなり隙間を空けるデフォルトの設定がしてある事が異常です。 とくに意識しないで文章かいてて隙間があくって事は、よくあるタグにそれが設定してあるわけで、デザインとしておかしいんです。 あと「おそらくcss」って話になるのも、table周りのソースが分からないからです。 htmlタグ自体にスペースを空ける指定は出来ないと先に書きましたが、 <br>の連続や<p></p>の連続、もしくは透明なgif画像用意して大きさを変更してスペースをあける古い手法など使えばhtml側でもいくらでも余白を調整できます。 そういった事の開示が何もないのでhtml側で何かしてるのかも考えなきゃならない。 あと、こうゆうの解決するとしたら、通常は同じ状態を再現できる最小のソースを提示してもらうんですけど、blogですし、わからないですよね? とりあえず pタグのmarginやpadding tableのmargin、paddingを調べてみるか 「px」「em」「%」「pt」など数字の単位で検索して大きい値を指定してあるところが、めぼしのつけ方でめぼしを付けた場所の要素だったらそれが原因。 あとはもしかしたらブラウザによるバグに引っかかってるのかもしれないですし javascriptや何か動的なものが指定してあって崩れてるのかもしれないですし、tableだけの情報じゃわからないです。 とにかくおかしい場所のソースをみて、管理画面からctrl+fして文字列を検索してみてください。
補足
回答有難う御座います “いや、当初の質問の…のは解決できましたよね?” イエ…これは私の書き方が悪かったかも知れませんが 基本的には解決して無いんです と言うのが、前回はタイトルと画像等の間に隙間が… と書きましたが、今回はタイトルの上に隙間…なんです ですから、タイトルの場所が変わっただけで 実際には同現象という訳なんです ----------------------------- タイトル <table border=0> <tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr><tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr> </table> ------------------------------ と設置したら ------------------------------ タイトル 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 ------------------------------ と表示されると書きましたが ------------------------------ <table> <caption>タイトル</caption> <tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr><tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr> </table> ----------------------------------- と入れると ------------------------------------ タイトル 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 ---------------------------- という感じで、今度は タイトルと画像等の隙間は無くなりましたが 今度はタイトルの上が大きく開いてると… 従って、もっと分かり易く言うなら タイトルの文字を考えないで下さい ------------------------------ <table> <caption></caption> <tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr><tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr> </table> ------------------------------ この様に、タイトルを入れないで そのまま、画像類を入力すると ------------------------------ 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 ------------------------------ こんな風に、画像等の上に大きく隙間が開くんです これって変ですよね? 尚、上記では<caption></caption>のタグも入れてますが 実際にはカットで入れてません それでブログはFC2ブログでURLは、これなんですが http://mitokohmon02.blog93.fc2.com/ なるべく早く御覧に、なって下さい と言うのも余談ですが 教えてグーの場合ふざけた対応を、する所が、あり 他人のURLなら何も言いませんが 自分のURLを載せると、何でも宣伝目的扱いして 直ぐに削除や編集でカットするからです ちょっと文章を読めば 宣伝なのか?トラヴルを説明する目的なのかは分かるのに それを判断して無いで、何でも宣伝扱いで編集するんです 最後に、今回色々御説明して頂きましたが 大変申し訳ありません… 私の勉強不足も含めてだと思うんですが 書いて頂いてる内容は何となく分かるんですが 実際に意味は理解出来てません…
- 756co
- ベストアンサー率79% (162/203)
セル幅をタグの中で指定すればレイアウトが崩れることは少ないと思います。 セルとセルの間は cellpadding と cellspacing を 0 とすることで解決するかもしれません。 あと、質問文にある、 ><table border=0> ><tr> ><td>画像</td><td>解説1<br>解説2</td> ><td>画像</td><td>解説3<br>解説4</td> ></tr> ></table> ←←← ><table border=0> ←←← ><tr> ><td>画像</td><td>解説1<br>解説2</td> ><td>画像</td><td>解説3<br>解説4</td> ></tr> ></table> ←←←の部分を消して、ひとつのテーブルにまとめて問題ないと思います。 タイトルはひとつのセルに入れてしまう方法もあります。 テーブルやセルの幅はwidthで指定できます。 例として <table border=0 cellpadding=0 cellspacing=0 width=600> <tr> <td colspan=4>タイトル</td> </tr> <tr> <td width=200>画像</td><td width=100>解説1<br>解説2</td> <td width=200>画像</td><td width=100>解説3<br>解説4</td> </tr> <tr> <td width=200>画像</td><td width=100>解説1<br>解説2</td> <td width=200>画像</td><td width=100>解説3<br>解説4</td> </tr> </table> 幅(width)は好きな数値に変えてください。 補足として、 ブログの投稿欄でシフトキーを押して改行するだけで <br>が自動的に入ってしまうこともあります。 ブログの設定などで自動改行をオフにするか、 タグを書くときにスペースや改行を入れずに書きます <table border=0><tr><td>画像</td><td>解説1<br>解説2</td><td>画像</td><td>解説3<br>解説4</td></tr>~~ のように。
補足
回答有難う御座います ただ結論から言うと No.1さんへの返答でも書きましたが 解決出来ませんでした 一応、No.1さんの方法が簡単かと思ったんですが 結果としては 上の文章とタイトルとの間が大きく開いてしまいました ------------------------------- 上の文章 タイトル 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 ------------------------------ こう出ました それで、貴方のアドバイスで実行すると 画像と解説の間が空いてる違いが出ましたが この辺に関しては、今後の勉強として ケースバイケースで使用して覚えようと思います ただ、やはり上の文章と タイトルとの間が大きく開いてしまいました ------------------------------- 上の文章 タイトル 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 ------------------------------ こんな感じでした それと、width=○○に関してなんですが cellspacing=0の横の width=600と <td width=200>と、どう違いますか? 一応、両者でwidthの数字も変えてみたんですが 画像と解説の間が空くだけで どっちの数字を変えても変化が同じ様に感じました 自分でも調べようと思ったんですが どう検索して調べたら良いかが分かりませんでした 最後に “タグを書くときにスペースや改行を入れずに書きます” に関しては、スイマセン…私の書き忘れで 普段は、その感じで使用してます(笑)
- salonpath
- ベストアンサー率48% (194/399)
<table> <caption>タイトル</caption> <tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr><tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr> </table> でもそんなに隙間開くのは異常だから、根本的な原因を調べたほうがいい
補足
回答有難う御座います 結論から言うと解決出来ません 詳細は、タイトルと画像同士は上手く出来ました しかし、今度は タイトルと上の空間が大きく開いてます ------------------------------- 上の文章 タイトル 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 ------------------------------ つまり、こんな感じです それと “そんなに隙間開くのは異常だから、根本的な原因を調べたほうが…” に関しては、どういう解釈を、すれば良いですか? それと、どうやって調べれば良いですか?
関連するQ&A
- 画像配列のタグが分かりません
以前に質問して解決しなかった為、再投稿しました 現在FC2ブログを運営して、2ヶ月が経過したと思いますが ブログの中で、画像と解説を上下に並べたく そのタグの方法で質問です それと、タグを入れた事で文章が長くなりました 申し訳ありません 尚、予め説明しておくと“--”の部分に関しては 内容の説明と、どう反映させたいかを 分かり易く…と思い、分けただけなんで 並べ方としては、この方法なんですが ----------------------------- ----------------------------- 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 画像 解説 ----------------------------- ----------------------------- 要するに、画像の隣に解説を置き 更に、間を、ほとんど(?)開かせずに 改行して、同じ様に画像の隣に解説… そう設置したいんです それで、今迄、私が設定した方法では この並びだったんですが ----------------------------- ----------------------------- 画像 解説 画像 解説 ----------------------------- ----------------------------- この設置方法で、タグとしては ここで教えて貰った方法で ----------------------------- <table border=0> <tr> <td>画像</td><td>解説</td> <td>画像</td><td>解説</td> </tr> </table> ----------------------------- でしたし、解説が2段以上の時には ----------------------------- <table border=0> <tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr> </table> ----------------------------- でした 要するに、今迄は、画像の隣に解説…で設置しても 改行は、した事が、ありません そこで、ここでも質問した所 下記の種類のタグを教えて頂きました ---------------------------- <table border=0 cellpadding=0 cellspacing=0 width=600> <tr> <td colspan=4>タイトル</td> </tr> <tr> <td width=200>画像</td><td width=100>解説1<br>解説2</td> <td width=200>画像</td><td width=100>解説3<br>解説4</td> </tr> <tr> <td width=200>画像</td><td width=100>解説1<br>解説2</td> <td width=200>画像</td><td width=100>解説3<br>解説4</td> </tr> </table> ------------------------------ タイトル <table border=0> <tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr><tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr> </table> ------------------------------ <table> <caption>タイトル</caption> <tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr><tr> <td>画像</td><td>解説1<br>解説2</td> <td>画像</td><td>解説3<br>解説4</td> </tr> </table> ----------------------------------- しかし、いずれも タイトルと画像や、タイトルと上に 大きくスペースが開いてしまいます これは、どう設置したら良いんでしょうか?
- ベストアンサー
- ブログ
- 表の作成ができません!(HTML)
メモ帳にHTML記述でホームページを作っています。 表を作成したいのですが、表示されません。 <html> <head> <title>~</title> </head> <body> <table border=1> <tr> <td>AAA</td> <td> <br>aaaaaaaaaaa <br>bbbbbbbbbbb <br>ccccccccccc </td> </tr> <tr> <td>BBB</td> <td> <br>dddddddddd <br>eeeeeeeeee </td> </tr> </table> </body> </html> で作っています。 (※aaaaaaは、たとえです) 同じタグ記述で、改行のない表を作ったら、これは表示されました。 表内に改行させた場合は、エクスプローラには表示されないのでしょうか?
- 締切済み
- その他(インターネット・Webサービス)
- FORMタグ後の改行を抑制したい
FORMタグを使用した後に自動的に改行されますが、これを改行されないように 抑制する方法をご存知でしょうか? 下記の例のようにTABLEタグを使用することで、横にFORMタグを並べることはできたのですが、ひとつのセル内で改行されてしまい、縦長のセルになってしまいます。 <TABLE BORDER=1> <TR> <TD> AAA<FORM> </FORM> </TD> <TD> BBB<FORM> </FORM> </TD> </TR> </TABLE> スタイルシートでも、なんでも構いませんのでなにか方法があったらご教授ください。 環境:Windows2000, IE5.5
- ベストアンサー
- HTML
- テーブルの行の高さを指定する時全てのtdタグに?
スタイルシートでテーブルの行の高さを指定する時は、 全てのtdタグにスタイルシートを指定するべきか、 1つだけ(一番左だけ)指定すればいいのかわからないので押してください。 全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。 コードを書く上でどちらが適切か教えてください。 -------------------------------------------------- <style type="text/css"> td.test {height: 50px;} </style> <body> 1の例<br>(2列ともclass="test"を入れた)<br> <table border=1> <tr><td class="test">1</td><td class="test">2</td></tr> <tr><td class="test">3</td><td class="test">4</td></tr> </table> <br><br> 2の例<br>(一番左の列だけclass="test"をいれた)<br> <table border=1> <tr><td class="test">1</td><td>2</td></tr> <tr><td class="test">3</td><td>4</td></tr> </table> <br><br> 3の例<br>(スタイルシートは何も指定していない)<br> <table border=1> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table>
- ベストアンサー
- HTML
- 表のタグ;上段の空欄を解消する方法を教えてください
表を作るタグについて ●表を作りたい! <table width=500 height=200 border=2> <tr> <td>★文章or画像★</td> <td>★文章or画像★</td> <td>★文章or画像★</td></tr><tr> <td>★文章or画像★</td> <td>★文章or画像★</td></tr> </table> のようなタグを使って表を作ると表の上に空欄ができてしまいます。 空欄を解消する方法を教えてください。 お願いします。
- ベストアンサー
- ブログ
- 半角だけだとtableタグのwidth指定が無効になってしまう。
半角だけだとtableタグのwidth指定が無効になってしまいます。半角を入力した際にwidth指定を有効にする方法をご教授お願いします。 <TABLE border="1" width="110"> <TBODY> <TR width="110"> <TD width="110">0123456789012345678901234567890123456789</TD> </TR> </TBODY> </TABLE> <BR> <TABLE border="1" width="110"> <TBODY> <TR width="110"> <TD width="110">0123456789012345678901234567890123456789012345678901234567890</TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- HTML
- tableタグについて(ウェブリブログ)
ウェブリブログの記事内にテーブルタグで『表』は表示出来たのですが、公開ページを見ると表と同じだけの行数が上部にスペースとしてあきます。 記事作成ページでは改行はしてませんし、空白行もありません。 タグは↓です。 <table bgcolor="#000000"border=1> <tr><td>●●</td><td>■■</td><td>▲▲</td></tr> <tr><td>●●</td><td>■■</td><td>▲▲</td></tr> <tr><td>●●</td><td>■■</td><td>▲▲</td></tr> <tr><td>●●</td><td>■■</td><td>▲▲</td></tr> </table> 単純な表ですが別な表示方法があるのでしょうか? できればタグが知りたいです。
- ベストアンサー
- ブログ
- TRタグの余白をcssで設定するには
TRタグとTRタグの間に余白とつけて表示したいのですが、 CSSでmarginが効かず、paddingはボーダーがTDタグの下に設定してあるので、 文字と線の間が開いてしまいます。 margin-bottomが効けばいいのですが、どうすれば表示することができますか? <table> <tr> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> </tr> </table>
- ベストアンサー
- HTML
- 文字列の操作でこんな事、出来ますでしょうか?
こんばんは、 仕事でPerlを組んでいるのですが、 どのように書いてよいのかわからなくご質問いたしました。 やりたいことは。 まず。 【データ】 <table border="0" .....><br><tr><td>おはよう<br>ございます。</td><br></tr></table><br> の HTMLタグの隣にある『<br>』タグを取り除き、文章内の『<br>』タグは取り除かないという作業です。 例) <タグ><br> → <タグ> ※<br>を取り除く おはよう<br>ございます。 → おはよう<br>ございます。 ※<br>を取り除かない うまく説明できているか、わかりませんが。 質問の意味不明等もあわせてご指摘、ご回答いただければと思います。 よろしくお願い致します。
- ベストアンサー
- Perl
- HTML <td></td>タグ セル内余白を無くす方法
次の様なプログラムで画像(a.gif 30x30ピクセル)を表示させると、画像とセル枠線との上下の間に余白ができる。この余白を無くす方法? <table border="1"> <tr><td rowspan="2"><img src="a.gif"></td><td><br></td></tr> <tr><td rowspan="2"><img src="a.gif"></td></tr> <tr><td rowspan="2"><img src="a.gif"></td></tr> <tr><td rowspan="2"><img src="a.gif"></td></tr> <tr><td><br></td><td> </table> テーブル内を2列にして、画像を縦方向に画像高さの半分だけズラして表示したい。 セル結合をしないで、ごく普通に2行2列にすると画像とセル枠との間には余白が生じない。 セル結合した場合に生ずる余白を無くす方法を教えて下さい。エディタは「メモ帖」、OSはWinXP、ブラウザはInternet Explorer6です。
- ベストアンサー
- ホームページ作成ソフト
お礼
回答有難う御座います でもスイマセン…枠に関しては確かに消えました しかし、肝心の間の事ですが こちらは全く変わりません 但し、今回は画像を入れてからだと 時間が掛かると思い 今回書いて頂いたタグをコピーして そのまま貼り付けました 正確に言うと 「そして、これが鳩山内閣の一覧です」 の下に大きく改行のスペースが入ってしまいます これは大体ですが 画像と解説に使用してるスペースを2倍位 間に入れた感じで空いてます 尚、今回は試しに…と思い 「そして、これが鳩山内閣の一覧です」 の下のタグは、画像から説明から 全て改行は勿論の事、スペースも空けずに 入れましたがダメでした それで…この件なんですが やはり反映した画像を付けないと分かり難いかも?…と 思ったんですが 一旦締め切って、再び投稿した方が良いでしょうか? と言うのも、この投稿では まだ画像はアップしてませんから アップは可能なんですが ただ、今画像をアップすると本文と合わず 変かと思いまして…