THE HAM MEDIA BLOG

CSSのtext-indentを使ってぶら下げインデントを表現する方法(一行目を前に出す方法)

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
ぶら下げインデント
CSS

indent.png

覚え書き用にエントリーしておきます。
CSS:1行目の頭文字だけ前に出したい時|Web仕事人の部屋
というところで、CSSのtext-indentを使って、
一行目だけを他の文字よりも前に出す方法が載っていたので、
自分も試しにやってみました。



ぶら下げインデントとは

文書作成ソフトであるWord(ワード)とかを使っている人は
この言葉を知っている人がいると思いますが、
段落の中で、一行目だけ前にだして、 二行目以下を少しインデントをかけているのを
「ぶら下げインデント」と言います。

ページをつくっていく中で、
どうしてもぶら下げインデントを使いたいことが出てきても、
今までやり方を知らなかったので、かなり悩んでいました。

今回、僕が普段読んでいるブログで、
その方法がエントリーされていたので、
自分もメモ代わりに書いておこうと思います。

ポイントはマイナスマージンを使ったtext-indent

インデント表示したいのはリストとかの見出しマークなので、
「※」や「*」などの文字をリストの前に持ってくるようにしてみます。

HTMLソース

<ul>
    <li>※THE HAM MEDIA</li>
    <li>※THE HAM MEDIA<br />
        THE HAM MEDIA</li>
    <li>※THE HAM MEDIA<br />
        THE HAM MEDIA<br />
        THE HAM MEDIA</li>
</ul>

一つのリスト内容が長過ぎて、自動的に改行になってしまったり、
デザインの都合で改行が必要になったりする場合があると思うのですが、
今回は簡単にbrを使って再現。

CSSソース

ul {
    margin-left: 1.0em;
}
li {
    text-indent: -1.0em;
}

1emは、文字一文字分のサイズに相当するので、
その文右側にインデントして、
一行目だけ左側にでるように、text-indentで
マイナスマージンを指定しておくだけでOKです。
text-indentは要素の一行にしか適応されないプロパティなので、
ぶら下げインデントや字下げに用いるのには最適なのです。

どのようになるかというと↓

  • ※THE HAM MEDIA
    THE HAM MEDIA
  • ※THE HAM MEDIA
    THE HAM MEDIA
    THE HAM MEDIA

ブラウザによっては表示が変化

少し注意したほうがいいのは、
ブラウザやCSSの設定によっては、インデントの幅がかわってしまう。
その場合はemの指定ではなくて、pxなどに変えて設定した方がいい。
上でプレビューしてみたのも、ブラウザによって見え方が違う。
デフォルトの状態でも、Safariなどではインデントが大きくとられていたので、
設定は十分注意しておこなった方がいいでしょう。



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。