- ベストアンサー
タグで、左等に余白を作りたいです
- FC2ブログを運営しており、記事のアップに手間がかかっています。タグを利用して余白を作る方法を知りたいです。
- 記事の一部を除いてセルで囲む方法を考えています。具体的な例として、テーブルタグを使用したセルの作り方を紹介しています。
- タグの使い方については、以下のウェブサイトを参考にしましたが、うまく反映できませんでした。余白を設定するための他のタグを探しています。
- みんなの回答 （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 />
お礼
そうすると、幾つか確認です “本来 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;}を使用すると “かなりの分を制作…２文字…良かったと…後悔する…” ハイ…私も、ありました 過去の製作で直したいが時間が掛かる…そんな時は便利だと思います