- ベストアンサー
文字を揃えたいのです。
初心者です。よろしくお願いいたします。 よく小説サイトとかで見られる手法なのですが、 ページの左側から何ポイントかを開けた場所から文字をスタートさせたいのです。 つまり、 ●●●●●●●●●●●●●●●●●● ●●●●●●●●●●●●●● ●●●●●●●●●●●●●●●●●● ●●●●●●●● のようにしたいのです。 <div align=center></div>だと ●●●●●●●●●●●● ●●●●●●●●●●●●●●●●●●●●● ●●●●●●●●● のように文字の始めがそろわないし、 <div align=left>/div>だと ●●●●●●●●●●●●●●●●●● ●●●●●●●●●● ●●●●●●●●●●●●●●● のように、文字の始まりが一番右端になってしまいます。 たしか、文字の始まりをpxで指定するＣＳＳがあったように思うのですが、 そのタグ（？）を載せたサイト様がどこにあるかわからず途方にくれています。 以上のような表示のさせ方が出来るＣＳＳを教えていただけないでしょうか。 お願いいたします。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
日本語の場合、段落のはじめを示すためにtext-indentを指定してくださいね。見易くなります。 #wrap{ margin:0; padding:10px;//空けたい間隔（ただし上下左右にこのスペースが入る） } p{ margin:10px; //p要素同士の間隔を指定 letter-spacing:3px; //文字間を指定 line-height:140%; //行の間隔を指定 text-indent:1em; //文字の始まる位置を指定 font-size:16px; //文字のサイズを指定 color:#333333; //文字の色を指定 } <div id="wrap"> <p>●●●●●●●●●●●●●●●●●●</p> <p>●●●●●●●●●●</p> <p>●●●●●●●●●●●●●●●</p> </div> こんな感じかな。
その他の回答 (3)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 『margin』か『padding』を使えばいいですね marginは領域の上下左右の空白を設定して paddingは領域内での上下左右の空白を設定します ですのでNo.1の回答者様のでは領域内(テキスト)の左側に空白が設定されます これをmarinに変えると領域(緑の部分)の左側に空白が設定されます 背景が設定されていないとどちらも同じ表示になるのでお好きな方をお使いください 一応参考サイトも載せておきます
お礼
御礼が遅くなってすみません！ サイトのURLありがとうございました！ 非常に参考になりました。
- himajin100000
- ベストアンサー率54% (1660/3060)
あ、すまん。良く確認したら前者は あいうえお かきくけこさ になる 後者が あいうえお かきくけこ になる一方で。
お礼
御礼が遅くなってすみません！ 教えていただいたタグでやってみたら、できました。 本当にありがとうございました！
- himajin100000
- ベストアンサー率54% (1660/3060)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>あいうえお</title> <style type="text/css"> p#sample1{ background-color:pink; text-indent:15px; } p#sample2{ background-color:green; padding-left:15px; } </style> </head> <body> <p> 用途の違いは何だと言われたら答えられないかな。 多分前者がインライン要素に対するもので後者はブロックレベル要素にも有効。 </p> <p id="sample1">あいうえお</p> <p id="sample2">あいうえお</p> </body> </html>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
お礼が遅くなってすみません！ 出来ました！ ありがとうございます(^^)