ホームページ作成への道（初心者向け）

実践！ホームページ作成への道＞段落などで文字を右にずらす

段落などで文字を右にずらす

段落などにより、文字を一つ右にずらしたりして、
左にスペースを空けたいときがありますね。

HTMLでやる方法とCSSでやる方法に分けてそのやり方を紹介します。

ただし、この方法は、<blockquote></blockquote>の前後にも１行間隔が入ってしまうという欠点があります。ブラウザによって感覚の大きさが違ったりしてコントロールも難しいですね。

もともと<blockquote>は、「引用」という意味で、長い文章などを引用する時に使うものなので本来の使い方とは違ってしまい、それを無理やり使うので仕方ないことではあります。

そこで、おすすめはCSS（スタイルシート）を使った方法です。CSSは見た目を制御するものなので、CSSを使ってやるのが本来の使い方です。

☆スタイルシート（CSS）を使った方法

スタイルシートを使うと上下左右のあける間隔など細かい指定ができます。
これを使って文字の位置をずらします。

どうするかというと・・・

「margin-left」という属性を使います。

使用例
（HTMLのソース）

このように
<div style="margin-left:○○px">ずらしたい文章</div>
とすればいいですね。

そうすると、○○ｐｘ分だけ右にずれます。（左に○○ｐｘのスペースがあく）
ｐｘは「ピクセル」という長さの単位です。 いろいろ試して間隔の感覚をつかんでみてくださいね。

同様に、上下左右の間隔を空けたい場合は

• 上：margin-top
• 右：margin-right
• 下：margin-bottom
• 左：margin-left

とそれぞれの場所を指定することができます。

右を１０ｐｘあけたいなら　margin-right:10px
上を２０ｐｘあけたいなら　margin-top:20px
下を３０ｐｘあけたいなら　margin-bottom:30px

のように指定できますし、以下のようにまとめて指定することもできます。

margin: 10px 20px 30px 40px;

（上・右・下・左の順に上から時計回りに指定、この場合は上10px・右20px・下30px・左40px）

最後にもうあと２つ使用例

使用例
（HTMLのソース）

「テスト中です 」の上部に３０ｐｘ、下部に５０ｐｘのスペースがあります。


このように、自分の好きなようにスペースをあけて、見やすくできますね。

ほかにもHTMLやCSSではいろいろなことができます。

動画で学べるHTML/CSS入門講座なんかはけっこう参考になります。

少しでも役に立ったらシェアお願いします。ホームページやブログ等での紹介も歓迎ですよ。