必要な工具
HTMLでの配置の概念を詳しく説明するには、HTMLコードの実行に必要ないくつかのツールについて説明する必要があります。 1つはテキストエディタで、もう1つはブラウザです。テキストエディタは、メモ帳、崇高なもの、メモ帳++、またはその他の役立つ可能性のあるものです。このガイドでは、Windowsのデフォルトのアプリケーションであるメモ帳と、ブラウザとしてのGoogleChromeを使用しました。
HTML形式
アラインメントを理解するには、まずHTMLの基本に関するノウハウが必要です。サンプルコードのスクリーンショットを示しました。
< html >>
< 頭 >>..。</ 頭 >>
< 体 >>…。</ 体 >>
</ html >>
HTMLには2つの主要な部分があります。 1つは頭で、もう1つは体です。すべてのタグは山括弧で囲まれています。ヘッド部分は、タイトルのタグを使用してhtmlページに名前を付けることを扱います。また、頭の中でスタイルステートメントを使用します。一方、本文はテキスト、画像、動画などの他のすべてのタグを処理します。つまり、htmlページに追加したいものはすべてhtmlの本文部分に書き込まれます。
ここで強調する必要があるのは、タグの開閉です。書き込まれる各タグは閉じる必要があります。たとえば、Htmlにはの開始タグがあり、終了タグはです。したがって、終了タグの後にタグ名が続くことがわかります。同様に、他のすべてのタグも同じアプローチに従います。各テキストエディタは、htmlの拡張子で保存されます。たとえば、example.htmlという名前のファイルを使用しました。次に、メモ帳のアイコンがブラウザのアイコンに変わったことがわかります。
アラインメントはスタイリングの内容です。 HTMLのスタイルには3つのタイプがあります。インラインスタイル、内部および外部のスタイリング。インラインはタグに含まれます。内部は頭の中に書かれています。同時に、外部スタイルは別のCSSファイルに書き込まれます。
テキストのインラインスタイリング
例1
次に、ここで例について説明します。上に表示されている画像について考えてみます。そのメモ帳のファイルに、簡単なテキストを書きました。ブラウザとして実行すると、ブラウザに以下の出力が表示されます。
このテキストを中央に表示したい場合は、タグを変更します。
このタグはインラインタグです。このタグは、html本文に段落タグを導入するときに記述します。テキストの後、段落タグを閉じます。ファイルを保存してブラウザで開きます。
段落は、ブラウザに表示されるときに中央に配置されます。この例で使用されているタグは、任意の配置、つまり左、右、中央に使用されます。ただし、テキストを中央にのみ配置する場合は、この目的で特定のタグが使用されます。
< 中心 >……..</ 中心 >>センタータグは、テキストの前後に使用されます。これも前の例と同じ結果を示します。
例2
これは、HTMLテキストの段落ではなく見出しを揃える例です。この見出しの配置の構文は同じです。これは、タグを介して、またはインラインスタイルを設定するか、見出しタグ内に整列タグを追加することによって実行できます。
出力はブラウザに表示されます。見出しタグはプレーンテキストを見出しに変換し、タグはそれを中央に揃えました。
例3
テキストを中央に揃えます
ブラウザに段落が表示されている例を考えてみましょう。これを中央に揃える必要があります。
このファイルをメモ帳で開き、タグを使用して中央の位置に揃えます。
< NS スタイル =文章-整列：中央;>このタグを段落タグに追加したら、ファイルを保存してブラウザで実行してください。段落が中央揃えになっていることがわかります。下の画像を参照してください。
テキストを右揃え
テキストを右に傾けるのは、ページの中央に配置するのと同じです。段落タグでは、中央の単語だけが右に置き換えられます。
< NS スタイル =文章-整列：右;>………..</ NS >>変更は、以下に追加された画像を通して見ることができます。
ブラウザでWebページを保存して更新します。これで、テキストがページの右側に移動します。
テキストの内部スタイル
例1
上記のように、内部css（カスケードスタイルシート）または内部スタイリングは、ページのhtmlのヘッド部分で定義されているcssの一種です。内部タグと同様に機能します。
上記のページを検討してください。見出しと段落が含まれています。中央にテキストを表示する必要があります。インラインアライメントでは、すべての段落内にタグを手動で書き込む必要があります。ただし、スタイルステートメントでpを指定することにより、テキストの各段落に内部スタイルを自動的に適用できます。その場合、段落タグ内にタグを書き込む必要はありません。コードを観察すると、機能しています。
< スタイル >>NS{{文章-整列： 中心}
</ スタイル >>
このタグは、ヘッド部分のスタイルタグ内に書き込まれます。次に、ブラウザでコードを実行します。
ブラウザでページを実行すると、すべての段落がページの中央に配置されていることがわかります。このタグは、テキストに存在するすべての段落に適用されます。
例2
この例では、段落と同じように、テキストのすべての見出しを右側に揃えます。この目的のために、頭の中のスタイルステートメントの見出しについて説明します。
H2、h3{{
文章-整列： 右
}
ファイルを保存した後、ブラウザでメモ帳ファイルを実行します。見出しがHTMLページの右側に配置されていることがわかります。
例3
内部スタイルでは、テキスト内の一部の段落のみのテキストを揃える必要があり、他の段落は同じままにする必要がある場合があります。したがって、クラスの概念を使用しています。 styleタグ内にdotメソッドを含むクラスを紹介します。整列させたい段落タグ内にクラスの名前を追加する必要があります。
< スタイル >>。中心{{
文章-整列： 中心}
</ スタイル >>
クラス =センター>……</ NS >>
最初の3つの段落にクラスを追加しました。次に、コードを実行します。出力では、最初の3つの段落が中央に配置されているのに対し、他の段落は中央に配置されていないことがわかります。
結論
この記事では、インラインタグと内部タグを使用してさまざまな方法で位置合わせを行うことができると説明しました。