- ベストアンサー
要素のない文字をCSSでレイアウトを整える方法
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
厳密なHTMLの構文では<body>直下にテキストやインライン要素を置くのは好ましくないです。 <p>や<div>等ブロック要素を利用して下さい。 <h1>見出し</h1> <p>私は～（1段落）</p> というように記述して下さい。 あくまで一例ですが。 <p>だと、多くのブラウザで上下にスペース（改行）入るけど、これは英文の表記に合わせてあるから。 cssで調整すればいいだけです。 p{ margin:0px; text-indent:1em; } とすれば、行頭1文字下げ（インデント）されて日本語の表記に合います。 ↓でHTMLの構文チェックできます。 http://htmllint.itc.keio.ac.jp/htmllint/htmllintl.html 無理して満点取らなくてもいいけど、ミスは少ない方がいいです。
その他の回答 (1)
- naeshi
- ベストアンサー率72% (18/25)
ボディ以外にも P、もしくはDIVに名前（要素？）をつけて、指定出来るはずです。 詳しくは下記のサイトを参考にしてみてください。 ▼eWebさん http://css.eweb-design.com/ ▼TAG indexさん http://www.tagindex.com/
お礼
<p>や<div>でできるんですね。 >http://css.eweb-design.com/ 非常に参考になりました。 ありがとうございました。
関連するQ&A
- CSS：文字の上下の中央揃え
h3要素、クラス属性「midasi」の高さが30pxで、その上下の中央揃えをしたいのですが、「vertical-align: middle;」を指定しても変化がありません。 どのプロパティを指定すればよいでしょうか？ 回答よろしくお願いします。 ■HTML <link rel="stylesheet" href="../rensyuu_CSS/rensyuu_CSS.css" type="text/css" /> </head> <body> <div class="kukaku_zen"> <div class="kukaku1"> <h3 class="midasi">見出し1</h3> <p class="bun"> 文章1 </p> </div> <div class="kukaku2"> <h3 class="midasi">見出し2</h3> <p class="bun"> 文章2 </p> </div> </div> </body> </html> ■CSS h3.midasi {height: 30px; vertical-align: middle; text-align: left; font-family: "ＭＳ ゴシック"; background-color: #88ceff;}
- ベストアンサー
- HTML
- 【css】異なる種類の要素を横並びに表示する方法
たとえば見出し要素<h1>とリスト要素<ul>を横並びに表示したい場合、cssでは何をどれに対して指定すれば良いのか教えていただけませんか。 よろしくお願いします。
- 締切済み
- CSS
- CSSでのレイアウトについて
HTML、CSS超初心者なのですが CSSでレイアウトを組むと ブラウザを縮小したりしたときに レイアウトがぐちゃぐちゃになります paddingやmarginはpxで指定してるのですが それがいけないのでしょうか？ ｜ ｜ ｜あああ｜ ｜ ｜ こういうレイアウトの物が ブラウザを小さくすると ｜｜ ｜｜あああ ｜｜ とボーダーがちいさくなって 中の文字がはみ出してしまいます どうぞよろしくお願いします
- 締切済み
- HTML
- CSSレイアウトってなぜこんなに難しいのか？
個人事業で、WEBデザインの仕事をしています。 恥ずかしいですが、ずーっと、テーブルレイアウトでのみHP作成してきました。 文字を整えたり、種類をまとめたりだけ、CSSを使ってました。 先日初めて、クライアントから「そろそろテーブルレイアウトはやめてくれ」と、 ダメだしを食らいました。 独学でDreamweaver MX 2004を一から学んで、仕事やって来ましたが、 ちょっと恥ずかしい質問ですが、 CSSレイアウトってなぜ、こんなに難しいのでしょうか？？ みなさん、テーブルレイアウトと比べて異常に難しく感じませんか？ 今の調子ではＨＰ作成の仕事が請けられなくなっています。（涙） 例えば、テーブルレイアウトって、自由にドキュメントで確認しながらデザインできますよね。 でも、CSSレイアウトって、コードで全部書き出しますので、 ちょっとサイズや項目や要素を変更するだけでも、どのdiv?、どのクラス？のタグにそれを指定したかとか、 複雑になり解らなくなってしまい、ちょっと変更するだけでも凄い時間がかかってしまいます。 ■もしかして私、CSSレイアウトの学び方、作り方を間違ってるのでしょうか？ ■今まで2～3冊位、Dreamweaverの本で、CSSレイアウトを勉強してますが、 いっこうに進歩しません。（ここに本の題名書き出すとマズイですよね？） ★CSSレイアウトが解り易く学べる、勉強本を教えて頂けますでしょうか。 ■もしかして、DreamweaverでCSSレイアウトをするから難しいのでしょうか？ HPビルダーとかなら、もっと簡単に出来るのでしょうか？ ■今、私ができるCSSレイアウトの限界は、一番大まかな囲いの、 #header #side #main #footerを、#contentの中に入れて、 その中の各々の要素は、今までとおり、テーブルでレイアウトする。 （メニューや、商品スペック、写真並べなども、テーブルで。） それが精一杯ですが、これで通用するのでしょうか？ HPデザイナーとして、恥ずかしい質問ですが、 ご教授どうぞ宜しくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- ＣＳＳでの文字サイズ指定について
初心者なので、基本的なことを質問させていただきます。ＣＳＳでbodyに対して文字サイズを９０％で指定しています。そして、h1とかh2とかに例えば１２０％で文字サイズを指定ＣＳＳでした場合、bodyで指定した９０％のサイズに対して１２０％の大きさということになるのでしょうか？ということは、bodyに対して文字サイズ指定しなかった時より小さく見えてしまうということで間違いないのでしょうか？ そして、そもそもbodyに対して文字サイズ指定というのはあまりしないものなのでしょうか？ 参考書を見ていても、基本的過ぎるのか書いてはいなくてよく分かりません。教えていただけるとありがたいです。どうぞよろしくお願いします。
- ベストアンサー
- HTML
- CSSレイアウトでこのようなことはできる？
ホームページをテーブルを使用しないCSSレイアウトで作成しようと思います。 左右を分けるのにfloatを使用して作っています。 横幅は30%と70%で分けていますが、ブラウザの幅を小さくすると上下にずれてしまいます。 そこでブラウザで800px以下になった時は横バー表示するようにしたいです。 このようなことはできるでしょうか？
- 締切済み
- その他（インターネット・Webサービス）
- div要素の用途について
div要素は、リンクの文字をそろえたり、文章でCSSのレイアウトなどに使用されると思いますが、本来のdiv要素の目的というのはどういうものなのでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- HTML
- ｃｓｓでボックス内にテーブルのような要素を・・・
こんにちは。はじめまして。 CSS超初心者なのですが、バックグラウンド画像を使用して、例えば 外枠を影付き角丸ボックスを作り、さらにそのボックスの中に、 左側に写真、右側に小見出し＆説明文の欄を作りたいのですが、 どうやればいいのか、困っています。（ボックスのサイズは幅500高さ 150くらいのと幅220高さ150くらいの２種類作りたいのです。 cssを１から作成する能力はないので、cssテンプレートサイトなどか ら、角丸ボックステンプレをダウンロードして使用させてもらって、そ のボックスの中に無理矢理（？）dl,dt,ddで左右横並びテーブルのよう なものを作ってみたのですが、ボックスの角丸枠とテーブルの間にもの すごい余白ができてしまったり、テキストが変に回り込んだりと、思う ようにレイアウトできません。 なにしろ、様々なcssタグの説明やhtmlタグの説明ホームページなどか ら、サンプルなどを引用させてもらっているので、当然なのかもしれま せんが(;_;)すみません・・・。 目標にしている数々のHPを閲覧していると、div要素ですべて配列して いるものもあって、、やはり自分のしているのは邪道なのかなぁと凹ん でいます。 外枠ボックスとテーブル（？）の間の余白が調整できないばかりでなく ボックス内のレイアウトがうまくできなくて困っています。 しかし、どれにしろcssの作成ができないので、途方に暮れています。。。 そんなこんなで、もう数週間パソコンにかじりついて、タグの勉強HPを 見ているんですが、なかなかわかりつらくて。 どうか助けてください。よろしくお願いします。 こんな感じのボックスが作りたい！というのは、あるんですが、他所様 のHPのURLを勝手に記載していいのやらで、わかりづらい文章ですみま せん。 （記載してもよろしければ、URL書かせていただきます）
- ベストアンサー
- CSS
- CSSでレイアウト
3つのブロック要素div1,div2,div3があった場合に添付のような レイアウトにするにはどうすればよいでしょうか？ div2,div3をさらにレイアウト用のdiv4でグループ化してしまえばできますが、 今後もできるだけHTMLをいじることなくCSSだけで自由にレイアウト変更をできるように なっておきたいと思っています。 できれば座標指定はしたくないのでPositionのStaticは使わないほうが嬉しいです。 全部Staticにする方法はわかっておりますので全箇所Staticではなく、 「全部相対postionではなく1か所だけStaticを使う」などが効率的だ、というのであれば そちらのやり方でも教えていただけると助かります。 特定の環境での実行を意図していませんが必要な場合はIE8以降、などイマドキな環境 での利用しやすいものがより助かります。HTML/CSSのバージョンはそれに応じる形で 特に指定はございません。 よろしくお願いいたします。
- ベストアンサー
- CSS
- CSSレイアウトの回り込みについて
初めまして、よろしくお願いいたします。 見よう見まねでCSSレイアウトのweb制作に挑戦している者です。以下の現象についてご指南いただければ大変助かります。 ■CSS #wrapper { width : 620px; } #left { width : 300px; float : left; } #right { width : 300px; float : right; } ■ソース <div id="wrapper"> <div id="left"> （左寄せブロック） </div> <div id="right"> （右寄せブロック） </div> </div> 上記のCSSとソースで「620px幅の外枠」の中に「300px幅の左寄せブロック」「300px幅の右寄せブロック」が中央に20pxの隙間を空けて正常に表示されるのですが、右寄せブロックの中に長いテキストを改行せずに書いたら右寄せブロックが右寄せにならず、左寄せブロックの下に落ちて表示されてしまいます。 この現象は、長いテキストが300px幅に指定されている右寄せブロックの幅を押し広げている？から起こるのでしょうか。 右寄せブロックの中に長いテキストを書く場合、いちいち300px幅を意識して自分で改行を入れなくても、300pxの右寄せブロック幅を押し広げることなく自動折り返しされれば良いのですが。（右寄せブロックの高さは指定していないので） また、文字のサイズはpxで固定できない事情があるので、ブラウザで可変できるパーセント指定にしているのですが、ブラウザの文字サイズ中では正常に右寄せされている右寄せブロックが、文字サイズ大に変更したとたんに左寄せブロックの下に落ちてしまいます。 右寄せブロックの中に長いテキストを改行なしで書いても右寄せブロックが左寄せブロックの下に落ちて表示されない様、どなたかご指南いただければ誠に幸いです。
- ベストアンサー
- ホームページ作成ソフト
お礼
なるほど、<p>や<div>を使うのが適切なんですね。 >p{ margin:0px; text-indent:1em; } とすれば、行頭1文字下げ（インデント）されて日本語の表記に合います。 インデントですか。勉強になります。 ありがとうございました。