CSSで文章を左揃えにする方法

このQ&Aのポイント
  • 趣味で作成したHPの文章を左揃えにする方法について質問です。<br>イメージを真ん中ぞろえに配置すると、それ以降の文も真ん中ぞろえになってしまい、<br><p align="left">を全ての文に指定していますが、HTMLが乱雑になります。<br>外部スタイルシートファイルを使用して本文を左揃えにする方法を教えてください。
  • HP作成の際、文章を左揃えにする方法について質問です。<br>イメージを真ん中ぞろえに配置すると、それ以降の文も真ん中ぞろえになってしまい、<br><p align="left">を全ての文に指定しているため、HTMLが乱雑になってしまいます。<br>外部スタイルシートファイルを使用して本文を左揃えに指定する方法を教えてください。
  • HPの文章を左揃えにする方法について質問です。<br>イメージを真ん中ぞろえに配置すると、それ以降の文も真ん中ぞろえになってしまい、<br><p align="left">を全ての文に指定しているため、HTMLが乱雑になってしまいます。<br>外部スタイルシートファイルを使用して本文を左揃えに設定する方法を教えてください。
回答を見る
  • ベストアンサー

文章をCSSで左揃えにする方法

趣味でHPをつくっているのですが、 基本左揃えで文章をつくっています。 そこで、文の途中にイメージを真ん中ぞろえで配置したりすると、 それ以降の分が真ん中ぞろえになってしまうので、 すべての文に <p align="left">を指定しています。 しかしそれではすべての文に入力されてしまうので、 とても乱雑なHTMLになってしまいます。 ですので、できればCSSのdivで囲って本文を左揃えに指定したいですが、外部スタイルシートファイルにはどのような記述をすればいいのでしょうか? 自分でやってみたのですが、 どうもうまくいかなくて困っています。 お詳しい方よろしくお願いいたします。

noname#68901
noname#68901
  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • tsunami02
  • ベストアンサー率23% (16/68)
回答No.1

<p>テキスト</p>を使うなら。 p { text-align: left; } ---------------------------- 全体にかけるなら一番外側の枠にかければ全体にかかります。 枠の名前 { text-align: left; }

noname#68901
質問者

お礼

ご回答ありがとうございます。 p {text-align: left;}とすれば左揃えになりまして、 ついでにol{text-align: left;}とすれば これも左揃えにできました! しかし同じpでかこってしまっている 真ん中ぞろえにしたいテキストやimageもleftになってしまいました。 これを個別に指定して、 真ん中ぞろえにするにはどうすればよろしいのでしょうか?

その他の回答 (1)

  • goldfox
  • ベストアンサー率49% (123/249)
回答No.2

>そこで、文の途中にイメージを真ん中ぞろえで配置したりすると、 >それ以降の分が真ん中ぞろえになってしまうので、 こうすりゃいいんですよ。 <p style="text-align:center; margin:0;"><img src="" alt=""></p>

関連するQ&A

  • cssのことでわからないことがあります。

    こんにちわ。 私はFC2ブログを使って自作テンプレートを作っているのですが、テーブルで組んだ一つのコンテンツを真ん中に配置したいのですが、cssでmargin-raight:auto、margin-left:auto;にしても真ん中に配置されません。 margin-left:300px;と入力すれば左に300pxの余白を作ることはできるのですが・・・ 何故なんでしょう? 後HTML上で<div align="center">~</div> で囲むと真ん中に配置されます。 私としてはcssでレイアウト全てを管理したいのでお願い致します。

  • pタグのCSSがすべてに適用されてしまいます。

    趣味でHPをつくっているのですが、 外部のCSSファイルに p {text-align: left;}と記述して、 文章をすべて左揃えにしたのですが、 中には中央揃えにしたいテキストや画像があります。 これを個別に指定して、 真ん中ぞろえにするには外部CSSファイルにどういった 記述をして、HTMLないになんとかけばいいのでしょうか? お詳しい方よろしくお願い致します。

    • ベストアンサー
    • HTML
  • 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: "MS ゴシック"; background-color: #88ceff;}

    • ベストアンサー
    • HTML
  • 文章を左揃えのままCSSで全体を中央揃えにしたい

    個人でイラスト系サイトを運営しております。 今まではサイトのレイアウトはテーブルで設定していました。 しかし、全ての画像が読み込まれるまで少々時間がかかるのもあり、CSSに変更することに。 その方が表示が速くなるという話を聞きまして、意気揚々に始めたまでは良かったのですが…。 この質問に該当するスレを拝見しましたが、なかなか思い通りにいかずに困っています。 ブラウザはIE7。 CSS、HTMLはこのように表記しております。 ●??02.css ------------------------------------------------- #outline{ width:700px; margin-right:auto; margin-left:auto; } #main{ float:left; width:300px; } #menu{ float:right; width:400px; } #footer{ clear:both; } ------------------------------------------------- ●HTML ------------------------------------------------- <html> <head> <link rel="stylesheet" href="??01.css" type="text/css"> <link rel="stylesheet" href="??02.css" type="text/css"> <title>サイト名</title> </head> <body> <div id="outline"> <div class="menu"> /画像/ </div> <div class="main"> /コンテンツ/ </div> <div id="footer"> </div> </body> </html> ------------------------------------------------- これを見て何かお気づきの所がありましたら、どなたかご教授願えると助かります。

    • ベストアンサー
    • HTML
  • pタグ内、一部の画像のみ左に配置したいとき。

    ホームページの記事のページをDIVタグでくくって、 その中の「p」タグ内の画像は中央に配置されるように指定しているのですが、 一部の画像のみ、左に配置したいのですが、どのようにすれば良いでしょうか? できればCSSで行いたいです。 ちなみにホームページは ​http://www.k-ban.net​ です。こちらの各コンテンツのページ中央に掲載される画像についてです。 左に配置したい画像前後をdivでくくり、align=left指定したのですが、その<p>~</p>全体のCSS設定が崩れ、且つ画像は真ん中のままでした。 <diV id=""> <p> <img>・・・・</img> </p> </div> という形です。 宜しくお願いします!

    • ベストアンサー
    • HTML
  • inline-blockを上下中央揃えにする方法

    以下のhtmlで、内容に合わせてブロックの大きさが変わる状態での 上下の中央揃えができず悩んでいます。 html ------------------------------------------------------------------------------------------ <div id="box1"> <div id="box2"> <div id="box3"> <div>あああああああああああああああああああああああ</div> <div>いいいいいいいいいいいいいいいいいいいいいいい</div> <div>ううううううううううううううううううううううう</div> <div>えええええええええええええええええええええええ</div> <div>おおおおおおおおおおおおおおおおおおおおおおお</div> </div> </div> </div> ------------------------------------------------------------------------------------------ css ------------------------------------------------------------------------------------------ body { text-align:center; } #box1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width:700px; height:400px; background:#666666; } #box2 { position: absolute; left: 0; right: 0; margin: auto; width:500px; height: 300px; background:#FFF; } #box3 { display: inline-block; text-align: left; vertical-align: middle; background:#CCCCCC; } ------------------------------------------------------------------------------------------ #box2に対して#box3の内容が、縦に伸びても短くなっても常に上下が中央に配置されるようにしたいのですが、どうにもうまくいきません。 ブロック内のテキスト自体は左揃えで、ブロックそのものが中央です。 どなたか、ご教授お願い致します。 inline-blockを上下中央揃えにする方法

    • 締切済み
    • CSS
  • CSSのDIV要素

    CSSのDIV要素を使ってボックスを作ったんですが、 外部スタイルシートに書き込んで、下記のようにする方法はありませんか? <center> <DIV align="left"> </DIV> </center> ボックス本体を画面の中央に持っていき、内容は左揃えにしたいのです。 どなたか知っている方がいましたら、教えてください。

    • ベストアンサー
    • HTML
  • CSS・DIVについて

    CSS初心者ですが、質問させていただきます。 <やりたいこと> 同一ページ内にて、下記の(1)(2)をCSSで指定したい。上から(1)(2)(1)の順で表示したい。 (1)幅700、文章中央揃え (2)幅600、文章左揃え <私が作成したもの> (関係ない部分は省略しています。) (実際は、(1)(2)の部分は半角英字の名前をつけています) <head> <style type="text/css"> body { text-align: center; } div#(1) { width: 700px; margin: 0 auto; text-align: center;       } div#(2) { width: 600px; margin: 0 auto; text-align: left; } </style> </head> <body> <div id="(1)">タイトル</div> <div id="(2)">説明文</div> <div id="(1)">ホームに戻る</div> </body> <表示のされ方> (1)は正常に表示されているのですが、(2)にはCSS自体が適用されていないのです。 ちなみにIE9では私の思うように表示されるのですが、IE10になって表示されなくなりました。 なぜこのようになったか、お教えいただけますでしょうか。よろしくお願いいたします。

    • 締切済み
    • CSS
  • 全体のレイアウト:中央揃えについて

    画面の全体のレイアウトを中央にそろえたいと思い、「div.Zen { margin-left: auto; margin-right: auto }」を指定してもIEでは中央揃えになっていませんでした。 ところが、「body { text-align: center }」を指定したところ、中央揃えになりました。 ブラウザで比較してみると、 ■IE7  body { text-align: center }で、中央揃え  div.Zen { margin-left: auto; margin-right: auto }では中央にならない ■Opera9.25  body { text-align: center }では、中央にならない  div.Zen { margin-left: auto; margin-right: auto }で、中央揃え ■NetScape7.1  body { text-align: center }では、中央にならない  div.Zen { margin-left: auto; margin-right: auto }で、中央揃え ■Firefox2  body { text-align: center }では、中央にならない  div.Zen { margin-left: auto; margin-right: auto }で、中央揃え と、ブラウザによって中央になる指定が違うのですが何故このようなことが起こるのでしょうか? 回答よろしくお願いします。 <?xml version="1.0" encoding="Shift-JIS" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <style type="text/css"> <!-- div.Zen { width: 900px; margin-left: auto; margin-right: auto } body { text-align: center } #Ky { float: left } div.Ku1_0 { width: 900px; height: 150px; background-color: aqua } --> </style> <title></title> </head> <body> <div class="Zen"> <div class="Ku1_0" id="Ky"></div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • IE8などでCSSでテーブルを中央に、テーブル内のテキストは左寄せにしたい

    お世話になっております。 ・本文・テーブルは中央揃え ・テーブルの内容は左揃え というものをCSSで作りたいのですが、 どのようにしたらいいのでしょうか。 現在のページの一部は <div id="main"> <h1>タイトル</h1>   <table border="1"> <p> 本文 </p> <tr> <td colspan="2"><h2 align="center">○○○</h2></td> </tr> <tr> <td>内容</td> <td>内容</td> </tr> ~行が続きますが省略~ </table> </div> のようになっています。 ちなみに cssのmainは「text-align:center;」を指定しておりますが、 IE8にしたところテーブルが左寄せになってしまいました。 なるべく多くのブラウザで同じような配置になるようにしたいのですが どうしたらよいでしょうか。よろしくお願いいたします。

    • ベストアンサー
    • HTML

専門家に質問してみよう