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;