タグで、左等に余白を作りたいです
- FC2ブログを運営しており、記事のアップに手間がかかっています。タグを利用して余白を作る方法を知りたいです。
- 記事の一部を除いてセルで囲む方法を考えています。具体的な例として、テーブルタグを使用したセルの作り方を紹介しています。
- タグの使い方については、以下のウェブサイトを参考にしましたが、うまく反映できませんでした。余白を設定するための他のタグを探しています。
- ベストアンサー
タグで、左等に余白を作りたいです
現在ＦＣ２ブログを運営しており 関係無いかも知れませんが ブラウザはＦｉｒｅｆｏｘ３.５です それで、定期的にアップする記事が、あり 毎回の設定が面倒なんで タグで工夫したいという質問です 内容としては、ある程度文章の中に 箇条書きで表現してる部分が、あるんですが その文章に対して、今迄は アップの度に、手動で…つまり スペースキーで余白を作り、アップして来ました ところが、それで実行すると 莫大な時間が掛かる為 タグで余白を作りたいという事なんです 文章としては、こんな感じです 尚、適当な文章が浮かばなかった為 今回表現してる文章は、適当に入力しました ☆☆☆ ☆☆☆ ☆☆☆ ☆☆☆ ☆☆☆ ☆☆☆ おはよう御座います こんにちは こんばんは さようなら すいませんでした 申し訳御座いません 有難う御座いました ☆☆☆ ☆☆☆ ☆☆☆ ☆☆☆ 従って、文章全体で 左側に、同じ余白を…という事じゃ、ありませんし また、左右に余白を…でも、ありません ただ、今後は文章に対しても 一部を除いてセルで囲もうと思ってます その例を紹介すると <table border=0> <tr> <td> おはよう御座います こんにちは こんばんは さようなら </td> </tr> </table> 余談ですが、タグに詳しい方なら御存知だと思いますが このセルの場合 <table border=0>の部分で border=0の所に数字を入れると枠が出ますが ０の設定だと、枠は見えませんから ケースバイケースで使い分けようと思いました 従って、今後は このセルに対して個別に余白のタグを設定出来れば… と考えてます ただ、自分でも調べたんですが この様なタグしか見つからず http://siriasu.s10.xrea.com/HTML/body.htm 但し、上記ＨＰでは 余白ゼロで設定してる為、応用と思い <body leftmargin="10" > おはよう御座います </body> と入力したんですが どういう訳か反映出来ませんでした
- mitsuemon
- お礼率60% (1485/2450)
- ブログ
- 回答数4
- ありがとう数7
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
見覚えのある質問者さんですね。こんばんは。 うざいと言われるかもしれませんがまた回答させてもらいます。 本来 table というのは、「表」の為に利用するので、 レイアウト（見た目）のために文章を table 囲むのは間違ったHTMLです。 table は簡単な故、初心者は皆やりがちな事ですが・・・ 箇条書をするためにリスト＜ul＞＜li＞があります。 <ul> <li>おはよう御座います</li> <li>こんにちは</li> <li>こんばんは</li> <li>さようなら</li> </ul> とすれば、CSSが無い状態でも ・おはよう御座います ・こんにちは ・こんばんは ・さようなら となります。「・」を消したりスペースはCSSで微調整可能。 文章構成の段落を作る為に＜ｐ＞があります。 <p style="padding-left:3em;"> おはよう御座います<br /> こんにちは<br /> こんばんは<br /> さようなら<br /> </p> （ブログの改行設定で＜ＢＲ /＞か自動改行を利用。） とすれば、以下の様になります。3emが３文字分の左スペースって事です。 おはよう御座います こんにちは こんばんは さようなら つまり、文章に対して適切なマークアップをする事で、 ユーザーエージェントに対しても適切な構造になるのです。 （意味のあるマークアップで勝手にSEOにもなります） 更に CSSにclass名で登録すれば、 わざわざ、毎回タグを書く必要もありません。 例えば、先の例の <p style="padding-left:3em;"> これを <p class="pale"> などとして（あくまで例です） CSSに .pale{padding-left:3em;} とすれば、左スペース３文字の場合には、毎回 <p class="pale"> を利用できるので効率も良くなります。 かなりの分を制作してしまってから、３文字スペースではなく ２文字スペースにすれば良かったと後から後悔するかもしれません。 そんな時にでもCSSなら .pale{padding-left:3em;} と 3em の部分を 2emに変更するだけで一括で全箇所の変更が可能です。 枠線や背景色、フォントサイズなどのデザインに関しても同様です。 例のサイトの内容も非奨励タグばかりなので、 その辺も踏まえ、基本を覚えなければ、 過去の制作まで全て手直ししたり、遠回りになる事が多いのです。
その他の回答 (3)
- naokita
- ベストアンサー率57% (1008/1745)
NO.2.3です。お礼確認済み。 ----------------------------- em 指定の場合はフォントサイズに依存するので開き過ぎかどうかはデザイン次第。 em の微調整は小数点が必要。 0.2 とかのゼロ未満なら .2 だけで良い。 別に値なので、em にこだわらず、px でも pt でも良い。 em は１文字に対しての値なので、ブラウザのフォントサイズのみを表示変更された場合に、当然この隙間も自動的に縮小・拡大さる。 px の様に幅を固定するとフォントサイズのみで表示変更したとしても、 絶対値で指定しているので隙間は変化しない。 （ズーム縮小拡大の変更では変化したように見える） 「値」は、好みの問題もあるし、 どんな値が設定できるか調べてたり、実際に色々試してみましょう。
お礼
どうも有難う御座いました
- naokita
- ベストアンサー率57% (1008/1745)
NO.2 です。 お礼拝見済み。 -------------------------- テーブルは、本来「表」なので文章の段落を作る為に利用するのは間違った利用方法って事です。 Excel に文章を流し込むようなものです・・・ ただ、 何を使おうが自分の自由なので、見た目だけ揃えれば良いとか 手っ取り早く仕上げたい場合にはそれも「あり」かと思います。 CSSが普及していない時代にはデザインの為にテーブルを使っていましたから。 CSSならwidthで幅固定してジグソーパズルのようにはめ込むだけです。 理解するまでが難しいかも知れませんが、慣れたら楽なので・・・ 昔と今のデザインの差がCSS普及の差です。 CSSがなければブログもこれほど普及しなかったでしょう。 WEBサイトを自由に綺麗に簡単に 制作・回覧出来るように開発されのがCSSが使う使わないは本人の自由。 パソコンや携帯電話を使わないのと同じかも。 質問者さんがやりたいような事を すでに皆考えていて、W3CがCSSとして完成させましたので、 やりたい事がほぼできるし便利なのです。 -------------------------------------------- ＞＜ul＞＜li＞・・・・・・<p style="padding-left:3em;"> ＞とのミックスでも使用出来るんですか？ 当然可能です。自由に表現可能。 <ul style="list-style:none;"><li style="padding-left:-2em; background:yellow;">おはよう</li><li style="padding: 1em;">こんにちは</li><li style="padding: 0 0 0.5em 2em;">こんばんは</li><li style="padding-left:3em; line-height:2;">さような<ol><li>英語</li><li>日本語</li><li>中国語</li></ol></li></ul> おはよう こんにちは こんばんは さようなら 1.英語 2.日本語 3.中国語 ＞<p class="pale">以外のタグも存在するという事でしょうか？ タグではなく、単なるidやクラスセレクタなので、 勝手に名付け可能です。自分で合わせるだけ。 他のCSSと絡まなければ、何処に貼っても良い。 優先順位があるから注意。下の方が優先されるが、 セレクタでそれよりも優先される場合は意味が無い。 （該当セレクタを探して変更するの方が良い） わからなければ、!important指定でも良い。 blockquote.inyo{ background-color: yellow !important;} /* CSS */ <blockquote class="inyo"><p>引用</p></blockquote> <!-- HTML --> メモ帳で自分のパソコン環境保存（ローカル）でテスト表示してから ブログにコピペすれば良いだけです。数分で出来ますので、 「ホームページの作り方」などで検索しましょう。 ＞それを利用する場合は、御指摘のタグを使用するしか無いです それは違います。 何事も同じですが、現状で満足しているのなら学ぶ必要もありませんが、 自由に表現したいのなら、ご自分で勉強するしかないのです。
お礼
回答有難う御座います 遅れてスイマセン… 更に今回このタグでの質問なんですが <p style="padding-left:3em;"> おはよう御座います<br /> こんにちは<br /> こんばんは<br /> さようなら<br /> </p> これを使用した時 3em;の状態で使用すると、左側の余白が多過ぎました それで、初めての使用だったんで 数字を変更したんですが 4em;5em;6em; と変更すると、かなりの幅が出来ますよね？ これって微調整は小数点の様に 3.5等の様に調整するしかないんでしょうか？ と言うのも、それで調整すると 数字に点を入れるのが、意外と入力し難く 面倒に感じたんで 他に入力し易い方法は、あるんだろうか？ と思ったんです
[参考]とほほのスタイルシート入門 http://www.tohoho-web.com/css/reference.htm#margin2 ☆☆☆ ☆☆☆ ☆☆☆ ☆☆☆ ☆☆☆ ☆☆☆<br /> <div style="padding-left:40px;"> おはよう御座います<br /> こんにちは<br /> こんばんは<br /> さようなら<br /> </div> <div style="padding-left:20px;"> すいませんでした<br /> 申し訳御座いません<br /> 有難う御座いました<br /> </div> ☆☆☆ ☆☆☆ ☆☆☆ ☆☆☆<br />
関連するQ&A
- 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
- EXCELのセル内にHTMLタグを含む文を入力
エディタ上の文章 abc<table border=1><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table> の文章をcopyして、適当なセルにpasteすると、この文章のままではなくて、A、B、C、Dが違う セルに入ってしまいます。 <とtabelの間に半角をいれて abc< table border=1><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table> をcopyして、セルに入力すると、そのセル内には入りますが、abc< table border=1>ABCD とタグが無視された形で入力されてしまいます。 今まではこんな事はなかったのですが、HTMLタグが消えないようにする事はできないでしょうか？
- ベストアンサー
- Visual Basic
- テーブルのセル余白について。
テーブルのセル余白について。 <table border="1" width="200" cellpadding="20"> <tr> <td>1-1</td> <td>1-2</td> </tr> <tr> <td>2-1</td> <td>2-2</td> </tr> </table> cellpaddingが効かないみたいで、どうしてか全く分からなくて・・・ html初心者ですが、ご教示よろしくお願い致しますm(_ _)m
- ベストアンサー
- HTML
- 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> テーブル内を２列にして、画像を縦方向に画像高さの半分だけズラして表示したい。 セル結合をしないで、ごく普通に２行２列にすると画像とセル枠との間には余白が生じない。 セル結合した場合に生ずる余白を無くす方法を教えて下さい。エディタは「メモ帖」、ＯＳはWinXP、ブラウザはInternet Explorer６です。
- ベストアンサー
- ホームページ作成ソフト
- tableタグとtableタグの間の余白の消し方について
現在モバイル用のHPを作成しているのですが、 AUで見た際に、tableタグとtableタグの隙間(空白)が出来てしまいます。 tableタグ1個でまとめればどうってことのない問題なのですが、 デザイン上、どうしてもtableタグを分ける必要があるります。 ■以下ソースです。 ************************************* <html> <head> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" /> <title>タイトル</title> </head> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <center> <a href=""><img src="gazou.gif" width="151" height="42" /></center> </td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" bgcolor="#FFFFCC"> <center> <a href=""><img src="gazou.gif" width="151" height="42" /></center> ・ ・ ・ ************************************* ↑の… </table> ←この部分に余白ができます。 <table width="100%" border="0" cellpadding="0" cellspacing="0"> どなたか原因と解決法をご教示いただけませんでしょうか。 宜しくお願いいたします。
- ベストアンサー
- HTML
- テーブルの幅 余白をなくすことは可能ですか？
<html> <head> <title>test</title> </head> <style type="text/css"> table { width: 100%; } </style> <body> <table border=1> <tr><th>a</th><th>b</th></tr> <tr><td>1</td><td>2</td></tr> </table> </body> </html> のように テーブルの幅を１００％にしても 両端に余白が出来てしまいますが この余白をなくすことは可能ですか？ 添付画像はIEで表示させた状態ですが ファイアフォックスなど他のブラウザで表示させても余白が出来ます。
- ベストアンサー
- HTML
- セルタグで分け方を変えたいです
現在ＦＣ２ブログを運営してるんですが 記事本文でセル用のタグを使用したいんで その質問です まず、今迄私はセル用のタグとしては こいう反映を目的としてましたから ----------------------------------- 名前 名前 名前 名前 ------------------------------------ このタグを使用して来ました ------------------------------------ <table border=0> <tr> <td>名前</td><td>名前</td> <td>名前</td><td>名前</td> </tr></table> ------------------------------------ 要するにセル用でも、枠が付かない設定です ただ、今回枠を付ける事情が出来た為 <table border=5> <tr> <td>名前</td><td>名前</td> <td>名前</td><td>名前</td> </tr></table> この様に使用しました ただ、上記のセルは等間隔だった場合に使用してたんですが 作ってる間にセルの感覚が 等間隔ではない状態が必要に、なりました つまり、この様な感覚です -------------------------------------- 名前名前名前名前 名前名前名前名前 名前名前 名前名前 名前 名前 -------------------------------------- 但し、上記では名前が横に連発してますが 実際には名前を続けて並べたい訳じゃなく １つの短文と考えて下さい それを表すのに、表現が見つからなかった為 今回は、名前の文字を並べた訳です 従って、上記の例えは 上の段が、左と右に、セルの枠を挟んで ８文字ずつ、短文が作られてる そして、その下には やはりセルの枠を挟んで左２つが４文字ずつの短文 右２つが２文字ずつの短文です つまり、今迄と違い セルの縦や横の枠の位置を自由に(？)変えられる… そんなタグが知りたいと思いました しかし、この反映を考えた場合 私の知識では、今迄触れたタグでは出来ません それで、自分でも調べたんですが このＨＰ内の http://www.tagindex.com/html_tag/table/th_scope.html このタグしか無いのかも？とも思いました 尚下記タグの中で、太文字は必要ない為 thをtdに変えて ----------------------------------- <table border="3"> <colgroup span="2"></colgroup> <colgroup span="2"></colgroup> <tr> <td colspan="2" scope="colgroup">グループA</td> <td colspan="2" scope="colgroup">グループB</td> </tr> <tr> <td>データセル1-1</td> <td>データセル2-1</td> <td>データセル3-1</td> <td>データセル4-1</td> </tr> </table> ----------------------------------- です、但し問題なのは 現在この上には既に、下記タグを何段も作ってる為 これを変更するのが大変です それで、他に良い方法は無いかと思い、質問しました <table border=5> <tr> <td>名前</td><td>名前</td> <td>名前</td><td>名前</td> </tr></table>
- ベストアンサー
- ブログ
- テーブルタグの余白
テーブルタグを使ってHPのレイアウトを整えようと思っているのですが、セルの中に画像をいれるとどうしても下に余白ができてしまい困っています。対策方を教えて下さい。セルの大きさも画像の大きさにあわせています！！ <Table Border="0" CELLPADDING="0" WIDTH="146" HEIGHT="166" > <Tr> <Td ColSpan="3" WIDTH="146" HEIGHT="19"> <img src="画像"> </Td> </Tr> <Tr> <Td WIDTH="19" HEIGHT="128"> <img src="画像"> </Td> <Td WIDTH="108" HEIGHT="128"> aiueo </Td> <Td WIDTH="19" HEIGHT="128"> <img src="画像"> </Td> </Tr> <Tr> <Td ColSpan="3" WIDTH="146" HEIGHT="19"> <img src="画像"> </Td> </Tr> </Table>
- ベストアンサー
- Windows 95・98
- 一気に「テーブルの2列目のtdタグを右詰にする
<html> <head> <title>test</title> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td>bbb</td></tr> <tr><td>2</td><td>ccc</td></tr> </table> </body> </html> このようなテーブルで 右側の2列目のtdタグを右詰にしたいのですが、 一気に「テーブルの2列目のtdタグを右詰にする」と言う方法は有りますか? 今は <html> <head> <title>test</title> <style type="text/css"> td.example1 { text-align: right; } </style> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td class="example1">bbb</td></tr> <tr><td>2</td><td class="example1">ccc</td></tr> </table> </body> </html> このようにしていますが 一つ一つタグを付けるのは非効率的と思っています。
- ベストアンサー
- HTML
- tdタグに何も入れなくとも幅を均一にする方法
<table border = "1"> <tr> <th>hoge</th> <td></td> </tr> </table> 上記のような場合、<td>タグ内には何も書かれてないので セルがつぶされた形で表示されますよね？ これを<th>タグ内のhogeと同じセルの幅で表示するにはどうすればいいですか？ style属性にwidth:100pxとかしてみたのですが無駄でした‥
- ベストアンサー
- HTML
お礼
そうすると、幾つか確認です “本来 table …「表」の為…文章を table 囲むのは間違ったHTMLです。” に関してなんですが、どういう風に解釈すれば良いですか？ 私は今迄、表の時にも利用しましたが 主に画像と解説を並べる時に利用しました ☆☆☆ ☆☆☆ ☆☆☆ ☆☆☆ ☆☆☆ ☆☆☆ ☆☆☆ 画像 解説 画像 解説 画像 解説 解説解説 名前 画像 解説 ☆☆☆ ☆☆☆ ☆☆☆ ☆☆☆ ☆☆☆ ☆☆☆ ☆☆☆ みたいな時です、ただ 画像 解説 解説解説 の時にはalign="left"…つまり height="150"align="left" /></a>文章 の様なタグも使用しましたが これは画像が一枚の時のみ適合みたいに感じましたから 複数の時には、やはりテーブルタグを主に利用して来ました それと、御指摘の＜ul＞＜li＞なんですが 拝見すると、左側の余白が指定されてませんよね？ こういう時は、例えば<p style="padding-left:3em;"> とのミックスでも使用出来るんですか？ また、<p class="pale"> は例だと書かれてますが .pale{padding-left:3em;}を使用する場合 <p class="pale">以外のタグも存在するという事でしょうか？ 私の場合、まだスタイルシートに関しては 把握出来てませんから それを利用する場合は、御指摘のタグを使用するしか無いです 最後に、スタイルシートと言う事は .pale{padding-left:3em;}を使用する場合 スタイルシートの 入力欄の一番下に入れれば良いという事でしょうか？
補足
返答が遅くなりました “うざいと言われるかもしれませんがまた回答させてもらいます。” ハイ…確かに、うざいです… …なんて冗談です 貴方からは背景画像の変更等含めて、数回御世話に、なってますね 有難う御座います 一応、投稿時は、急いだ事も含めて、No.１さんのタグ <div style="padding-left:20px;"> 文字</div>で作成しました でも、今回御指摘のタグは ケースバイケースで使い分けが出来そうですね？ <ul> <li>おはよう御座います</li> <li>文字</li> <li>文字</li> <li>文字</li> </ul> で入力すると、文字の前に“・”も入りますから 自動(？)で見易い状態に出来ますし <div style="padding-left:20px;"> 文字<br /> 文字<br /> 文字<br /> </div> で入れると今度は“・”無しの箇条書きで利用出来そうです 更にスタイルシートの .pale{padding-left:3em;}を使用すると “かなりの分を制作…２文字…良かったと…後悔する…” ハイ…私も、ありました 過去の製作で直したいが時間が掛かる…そんな時は便利だと思います