PCインストラクターの川上です。
今回は、このような↓ご質問いただきました^^
プログプロフィールの自己紹介欄なのですが、
入力画面できれいに頭揃えして入力したはずなのですが、表示を確認したらガタガタでした。
何度直してもうまく揃わず、仕方なく表示を確認しながら直しました。
なんとか揃いましたが、まだ微妙にずれています。
文章の最後の辺りはどうやっても2ヶ所ほど揃いません。
入力画面では全くそろっていなくて、階段状になっているのに、表示ではそろってみえるのもなぜでしょう?
今回のご質問は、アメブロのプロフィールページ内の「自己紹介欄」でのことですが・・・
頭を揃えるために、文章の先頭でそれぞれスペース(空白)を入力したのだと思います。
プロフィールページでの標準のフォントはMSPゴシックになっていますので、そのスペースが同じ幅にならずにガタガタになってしまったのです。
プロフィールページでなくても、Pのつくフォント(プロポーショナルフォント)だと、自動的に文字幅を調整してくれるので、そのせいで頭がうまく合わなくなったりするのです。
行頭を揃えることを「インデント」と言ったりします。
ブログやプロフィールページでインデントするには、
インデントしたい段落を
<div style="margin-left:12px;"> と </div>
で囲むとよいです。
![川上雄大のワンポイントレッスン](https://stat.ameba.jp/user_images/20140117/13/sumitak1329/bf/00/j/o0400047312816576302.jpg?caw=800)
こちら↓のHTMLコードをコピペしてお使いくださいませ。
<div style="margin-left:12px;">文章</div>
なお、数値は自由に変更されるとよいと思いますので!
また・・・
こちらのHTMLコードを使っても同じようにインデントはできます。
<div style="padding-left:12px;"> と </div>
で囲む。
<div style="padding-left:12px;">文章</div>
どちらでも同じようにインデントすることができるのですが・・・
下図のように、背景に色をのせたときに、違いがでてきます。
![川上雄大のワンポイントレッスン](https://stat.ameba.jp/user_images/20140117/14/sumitak1329/fc/fa/j/o0400058912816590906.jpg?caw=800)
marginの場合は、頭と背景がピッタリ揃いますが、
paddingの場合は、頭の空白部分にも背景色がのります。
さぁ、どちらを使うかは、あなたの使い方次第になります!
以上、パソコンワンポイントレッスンでした。
LIDS澄川・ライフデザインスクール
川上 雄大