HTML | テキストを位置調整する

HTML,HTML テキスト

HTMLだけでサンプルコードを紹介しています。

HTMLだけでテキストを位置調整する

HTMLだけで「style属性」にて「margin」「padding」「position」などのプロパティを指定します。

「margin」プロパティの場合、「margin-top(上)」「margin-bottom(下)」「margin-left(左)」「margin-right(右)」のそれぞれの方向に対する余白を指定します。

例えば、「margin-left(左)」で左側に余白を作って位置調整する場合は以下のようになります。

<p style="margin-left:20px">margin-left:20px</p>
<p style="margin-left:40px">margin-left:40px</p>
<p style="margin-left:60px">margin-left:60px</p>

margin-left:20px

margin-left:40px

margin-left:60px

paddingプロパティの場合、padding-top(上)」「padding-bottom(下)」「padding-left(左)」「padding-right(右)」のそれぞれの方向で内側の余白を指定します。

「margin」プロパティは要素の外側の余白を調整しますが、「padding」プロパティは要素の内側の余白を調節します。

<p style="padding-left:20px">padding-left:20px</p>
<p style="padding-left:40px">padding-left:40px</p>
<p style="padding-left:60px">padding-left:60px</p>

padding-left:20px

padding-left:40px

padding-left:60px

他の要素に影響を与えない形で位置を調節したい場合は「position」プロパティが利用できます。

「position」プロパティについては様々な指定方法、ルールがありますのでCSS関連の情報を確認して下さい。

例えば、「position」プロパティにて「relative」を指定して「top(上)」「bottom(下)」「left(左)」「right(右)」で位置を調節します。

<p style="position:relative;left:100px;">position:relative;left:100px;</p>

position:relative;left:100px;

HTML,HTML テキスト

Posted by Yousuke.U