HTMLの整列方法

適切なコーディングを行うには、HTMLの位置合わせにCSSを使用する必要がありますが、すべてのウェブサイトでスタイルシートをカスタマイズできるわけではありません。スタイルシートをサイトに追加できない場合でも、HTMLで何かを整列させ、思い通りに表示させる方法をご覧ください。このテクニックは「インライン」CSSと呼ばれます。

方法1

HTMLでテキストを揃える

1. 配置を変更する各セクションを「div」で囲みます。つまり、アライメントが変更される最初のHTMLタグの前にある "less than "と "greater than "の記号（<>）の中に "div "を追加し、アライメントが変更される最後のHTMLタグの後にあるこれらの記号の中に"/div "を追加する必要があります。
2. その "div "内のテキストのアライメントをどのように変更する必要があるかを決定します。
3. テキストを左揃えにする必要がある場合は、次のテキストが「<>」記号の中に入るように「div」タグを変更します： div style='text-align:left'。

   • 右寄せにしたい場合は、「div」タグを「<>」の中に「div style='text-align:right'」と記述します。
   • テキストを中央揃えにする必要がある場合は、"<>"マーク内の "div "タグを "div style='text-align:center'"に変更してください。
   • テキストの両端揃えが必要な場合は、"<>"マーク内の "div "タグを "div style='text-align:justify'"に変更してください。
4. 変更を保存します。
5. コンテンツの外観を確認し、うまくいったことを確認してください。

   • うまくいかなかった場合は、ウェブサイトのスタイルシートに、あなたの「div」を上書きする特定のコーディングがあります。各要素の開始タグ内に適切なバージョンの "style='text-align:right'"を追加することで、サイトのスタイルシートを上書きし、配置を変更します。例えば、"p "タグは"<>"記号の中で "p style='text-align:right'"となります。
6. 思い通りにテキストが表示されるのをお楽しみください。

方法2

HTMLで画像を揃える

1. 整列させたい画像のHTMLコードを探します。
2. img "タグを編集して、適切な "float "プロパティを追加します。

   • 画像を左に寄せたい場合は、"<>"マークの中に "img style='float:right'"のように "style='float:left'"を追加します。
   • 画像を右に寄せたい場合は、"<>"マーク内の "img style='float:right'"のように、タグに "style='float:right'"を追加します。
   • 画像を中央に表示させたい場合は、コードが少し複雑になります。float:center "プロパティはないので、"img style='align:center;text-align:center'"のように、"style='align:center;text-align:center'"をタグに追加しなければなりません。
3. コードを保存します。
4. 整列された画像をお楽しみください。

この記事は、CC BY-NC-SAの下で公開されている " How to Align Something in HTML " を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。