MK2-BLOG~西宮のWEBデザイナー日記

女性WEBデザイナーの日記、WEB制作に関連すること

CSSで二行目以降を1字下げる

time 2010/05/19

注意書きが二行などになる場合、二行目からは1字下げて見た目を整えたい時がありますよね。
そんな時に使えるCSSです。注意書きだけじゃなく、箇条書きなどにも便利!
結構使えるテクニックだと思います。

HTML

<div class="att">※注意書きが二行などになる場合、二行目からは1字下げて見た目を整えたい時がありますよね。そんな時に使えるCSSです。注意書きだけじゃなく、箇条書きなどにも便利!</div>

CSS

.att {
  padding-left: 1em;
  text-indent: -1em;
}

にほんブログ村 デザインブログ Webデザインへ
↑WEBデザインブログランキングです
良かったら応援お願いします♪

にほんブログ村 デザインブログ Webデザインへ
↑ブログランキングに参加しています♪よかったらクリックしてくださいね

sponsored link

コメント

  • はじめまして。

    この CSS テクニック、いただきました^^
    細かいことだけど、すごく大事なことですよね。

    Kanako さんが創造する癒しのデザインが好きで、ちょくちょく 『blue-green』 から素材を拝借してます^^

    これからもがんばってください。
    応援してますよ。

    by grace €2010年7月14日 11:47 AM

  • こんにちは!初めまして♪
    コメントありがとうございます。blue-greenの素材もお使いいただいているとの事で、大変うれしく思います

    >細かいことだけど、すごく大事なことですよね。

    そうなんですよね・・・
    ちょっとした事だけど、手を抜くとやはり見栄えが悪くなるのでこだわりたい所です。

    by Kanako.M €2010年7月14日 2:06 PM

  • 番号付きリストで、別途 padding で css を設定し、

    これを表示
    などで
    1. これを表示

    となってしまいます。
    これを、
    1.これを表示
    という風にしたいのですが。
    番号なしだとうまく表示されます。

    by 斉藤 ヒデユキ €2014年10月13日 9:45 PM

    • こんにちは 初めまして。お返事が遅くなってすみません。
      <div class=”padding”><ol><li>これを表示</li></ol></div>(←<は全角を半角にして記載してください)

      .padding{padding-left:1em;}

      または
      ol li{list-style-position:inside;}

      ではだめですか?

      by MK2 €2014年10月20日 11:54 AM

  • うまく質問の意図がわからないな。
    つまり、
    1.” “文字表示を、
    ” “1.文字表示
    のようにしたいんです。

    by 斉藤 ヒデユキ €2014年10月13日 9:56 PM

  • […] CSSで二行目以降を1字下げる | MK2-BLOG~西宮のWEBデザイナー日記 […]

    by Web制作者はおさらいしたい!CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ €2015年3月23日 10:19 PM

down

コメントする




マウスコンピューター/G-Tune

アーカイブ

スポンサードリンク