未分類

pタグにインデント(1文字下げ)をつける方法

書籍全般にはインデント(1文字下げ)がついているのが一般的です。

段落ごとに意味が変わっているという目安ですし、インデントがついている方が読みやすいです。

しかし、このブログでは、今までインデントのことを考えていませんでした。

ちょうど最近、HTMLのpタグ(段落ごとに囲む)で書き始めたので、インデントをつけるのが簡単になりました。

今回は、ブログが読みやすくなるように、pタグにインデントをつける方法を紹介します。

スポンサーリンク
スポンサーリンク

pタグにインデントをつける前の画像

pタグインデント

▲こちらが、pタグにインデントをつける前の画像です。段落毎に改行されていますが、少し読みづらいといえば読みづらいです。

これに、1文字分インデントをつけます。

pタグに1文字インデント(1文字下げ)をつける方法

全てのpタグに1文字インデントをつける場合は、CSS(スタイルシート)に以下のように記述します。

p{text-indent:1em;}

pタグインデント

▲これで、段落の最初の文字にインデントがつくようになりました。

また、ブログの本文にtext_bodyというclassを指定している場合、

.text_body p{text-indent:1em;}

とすれば、ブログの本文中のpタグのみに、インデントを付ける事が出来ます。

自分で読む時に、かなり見やすくなった印象を持ちました。

こんなにも見た目で違うんだな、と。

これは必須タグですね。

そういった意味でもpタグで囲むのは重要だと思いました。

スポンサーリンク
スポンサーリンク

関連記事

  1. 未分類

    iOS 7のiCloudユーザー辞書が使えないので、連絡先で代用している

    現状のiOS 7では、iCloudのユーザー辞書が同期できません。バグ…

  2. 未分類

    MacのAutomatorを使って選択したテキストをMarkdownからHTMLに変換する方法

    最近は、Markdown記法に注目です。このブログでは最近Markdo…

  3. 未分類

    水を取りすぎてもいけないというお話

    私は普段から外出先でミネラルウォーターを買って飲むのですが、最近友達か…

  4. 未分類

    2013年上半期の流行語大賞候補5個を挙げてみた!

    2013年も残すところ半分となりました。2013年を半分振り返る意味で…

  5. dropbox

    未分類

    Dropbox・Finderファイル整理管理術「日付管理」

    メールで添付されてくる書類や、配布された書類をデータ化して保存しておく…

  6. suicaチャージ

    未分類

    JR Suicaの最小チャージ金額が500円になった!

    先日、Suicaをチャージする時に衝撃的な光景を目にしました。それが、…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

カテゴリー

  1. 無印ノート

    文房具

    無印良品の滑らかな書き味のノートを購入!万年筆での筆記も可能!
  2. kindle-paperwhite

    Kindle

    Kindle Paperwhiteでスクリーンショットを撮影する方法と確認方法
  3. webサービス

    さよならGoogle Reader 本日午後4時をもって利用できなくなりました
  4. itunes

    webサービス

    iTunesで過去の名曲を探す方法
  5. iPhoneアプリ

    Falcon起動後のキャッシュ画像の自動削除で容量の心配が消えた!
PAGE TOP