CSSボタンを右揃え

「ボタンを右に揃えるということは、ボタンをページの右側に設定することを意味します。 配置とは、さまざまな位置でのテキストまたはボタンの調整に関するものです。 テキストまたはボタンをページの右側に配置するか、左側または中央に配置するかを問わず、テキストとボタンの位置を記述します。 CSSでは、このようにテキストを揃えることができるため、さまざまなプロパティを使用してボタンをページの左、右、中央に揃えることができます。 CSSは、ボタンの配置にさまざまなプロパティを提供します。 ボタンを好きな場所に配置できます。 このチュートリアルでは、CSSの代替プロパティを使用したボタンの正しい配置についてすべて説明します。 ボタンを右に揃えるために代替プロパティを使用するさまざまなコードを提供しています。」

CSSで右ボタンを揃えるためのプロパティ

• text-alignプロパティを使用します。
• floatプロパティを使用します。
• justify-contentプロパティを使用します。

例1：Text-Alignプロパティを使用してボタンを右揃え

ボタンを作成するためのHTMLファイルを作成し、このボタンを揃えるために、CSSを作成する必要があります。 Visual Code Studioで、指定された例について詳しく説明します。 したがって、HTMLファイルを生成する必要があり、このHTMLファイルのコードが画像の下に貼り付けられます。

ここでは、2つの異なるボタンを作成し、元のボタンと右揃えボタンの違いを簡単に理解できるように、1つのボタンを右揃えにします。 したがって、このボタンの配置には、CSStext-alignプロパティを利用する必要があります。 作成したボタンでこのプロパティを使用すると、ボタンの位置がページの右側に設定されます。 CSSファイルで、このプロパティの使用方法を確認できます。

CSSコード

ここでは、CSSコードも以下に示します。 CSSを使用して、ボタンのスタイルや配置を調整します。 このコードでは、「text-align」プロパティを使用していることがわかります。

まず、「。」を使用します。 最初のボタンの名前はここでは「btn-original」であり、この最初のボタンの中括弧内では、「text-align」プロパティを使用して「左」に設定します。 2番目のボタンのタイトルである「btn-right」を入れて書きます。 「」を繰り返し、中括弧内で同じプロパティを使用します。今回は、ボタンをページまたは画面の「右側」に揃えます。

出力：

出力には、元のボタンが左側に表示され、ボタンが画面の右側に移動する2つのボタンが表示されます。

例2：Floatプロパティを使用してボタンを右揃え

このHTMLファイルでは、2つのボタンを再度設計します。 ここでは、最初のボタンの名前は「ボタン」で、2番目のボタンの名前は「右ボタン」です​​。 この例では、ボタンを右に揃えるために別のプロパティを使用します。 このコードのCSSで使用するプロパティは、「float」プロパティです。 「text-align」プロパティと同じように機能します。

CSSコード

このCSSファイルでは、floatプロパティを使用します。 CSSのfloatプロパティは、要素、オブジェクト、またはボタンを右側と左側にフローティングするために使用されます。 「.original」は、「original」ボタンにデザインを適用するために使用されます。 この中で、「float」プロパティを適用して「左」に設定し、元のボタンが画面の左隅に配置されるようにします。 「.right」ボタン内で、「right」を「float」プロパティに設定します。 これにより、2番目のボタンが画面の右隅に配置されます。

出力

上の画像では、ボタンは画面の右隅に配置されています。 ここでは、「float」プロパティを使用しており、「text-align」プロパティと同じ出力が表示されていることがわかります。

例3：Justify-Contentプロパティを使用してボタンを右揃え

3番目の例では、divクラスを使用してボタンを1つだけ作成し、CSSの3番目のプロパティである「justify-content」プロパティを使用します。 このプロパティもボタンを左または右に配置しますが、ボタンは右にのみ配置する必要があります

CSSコード

このCSSファイルでは、「背景」の色も「ピンク」に変更し、「パディング」を上下から「10px」、左右を「0」に設定しています。 ここで使用する「display」は「flex」です。次に、CSSの3番目のプロパティである「justify-content」を使用して「flex-end」に設定します。したがって、この「flex-end」はボタンを右側に設定します。終わり。

出力

ここでは、「background-color」から「pink」を使用しているため、背景色はピンクです。 この例のCSSファイルで「justify-content」プロパティを使用しているため、ボタンは右端にあります。

例4

この4番目の例では、HTMLのボタンクラスを使用して6つの異なるボタンを作成しました。 ここでは、6つのボタンすべてに異なる色を使用し、CSSプロパティを使用して3つのボタンを「右」に配置し、3つは元の場所、つまりプロパティを使用しない「左」に配置します。

CSSコード

最初のボタンの色は「緑」で、このコードは「＃4CAF50」です。 境界線は必要ないので、境界線は「なし」です。 これらのボタンの内側に書かれているテキストの「色」は「白」です。 上下のパディングは「15px」、左右のパディングは「32px」です。 「text-align」は中央に配置されるため、ボタン内のテキストはボタンの中央に表示されます。 「テキスト装飾」も「なし」です。 「font-size」は「16px」に設定されています。 上下の余白は「4px」、左右の余白は「2px」です。 「ポインタ」は、ここでは「カーソル」として使用されます。

次に、このボタンを右に揃えて、ここに「フロート」を配置します。これは「右」に設定されています。 また、次のボタンの色を変更してここに「赤」を適用し、ボタンの位置合わせにプロパティを使用しないため、デフォルトでは、このボタンは左側に表示されます。 4番目のボタン「background-color」は白なので、テキストの「color」も「black」に変更し、この4番目のボタンを右にフロートさせます。 5番目と6番目のボタンの色を灰色に変更した後、6番目のボタンで再び「float：right」を使用します。 ブラウザにこれらのボタンがどのように表示されるかを確認してみましょう。

出力

この出力では、6つのボタンがあり、プロパティ「float」を使用する右側に3つのボタンがレンダリングされています。 したがって、このプロパティの助けを借りて、3つのボタンが右側に浮かんでいます。 また、これら3つのボタンにはプロパティを使用しなかったため、左側に3つのボタンがあります。 これらのボタンの色も異なります。

結論

このチュートリアルでは、CSSがボタンを画面の右隅に揃えるために提供する3つのプロパティについて説明しました。 CSSの3つのプロパティ、「text-align」、「float」、「justify-content」のすべてについて詳しく説明しました。 3つの異なる例を生成し、各例に代替プロパティを適用し、すべてのコードの出力も表示したので、ボタンを右に揃える方法についてこのポイントを簡単に理解できます。 このチュートリアルは、CSSのプロパティを使用してボタンを右側に揃えるのに役立ちます。