CSSで画像を縦並び＆右寄せしよう【すぐにできる】

あなた

画像を右寄せしたいです。

どうしたらいいですか？

これまではプログラミング未経験者の方に向けてHTMLとCSSの基礎からWEBページの作る流れを解説してきました。

前回はメインコンテンツのレイアウト崩れを修正する方法について解説しました。

前回の記事：CSSでWEBサイトのメイン要素のレイアウト崩れを修正しよう

メインコンテンツのレイアウト崩れは消えたものの、まだ画像が理想の場所に配置されていません。

そこで今回は画像を画面の右に配置する方法について紹介します。

ちなみにこの記事は連載記事の1つです。こちらから学習を進めておいてください。

>>HTMLとCSSの学習ステップ一覧はコチラ

【この記事でわかること】

✔ CSSで画像を右寄せする方法

【この記事の信頼性】

この記事を書いている僕は現役のWEBエンジニアです。

普段からHTMLとCSSを使ってWEBページを制作しています。

ではさっそく見ていきましょう。

CSSで画像を右寄せ＆縦並びにする方法

前回までのコードだと、次の画像のように表示されてしまっているはずです。

そこで、今回はこの「テスト画像1」と「テスト画像2」を右寄せ＆縦並びにしていきます。

対象となるHTMLのコード

今回はこの部分をCSSでコーディングしていきます。

                <div id="Banner_box">
                    <a href="#"><img src="images/test1.jpg" class="side_image" alt="1"></a>
                    <a href="#"><img src="images/test2.jpg" class="side_image" alt="2"></a>
                </div>

使うCSS

次の記述をCSSファイルに追加しましょう。

main #Banner_box {
    height: 300px;
    width: 200px;
    float: right;
    margin-top: 30px;
}

.side_image{
   border: 1px solid #474747;
}

追加すると、画像が右寄せ＆縦並びになります。

これは「width」で横幅を指定しつつ、「float」で右寄せを指示しているからです。

横幅を指定したことで、<div id="Banner_box">というブロック要素の中のa要素が縦並びになり、さらに右寄せを指示したので右によったという感じです。

以下の画像のとおりになっておいればOKです。

display:flexを使っても表現できる

ちなみにですが以下のコードを使ってもCSSで画像を縦並びにすることができます。

main #Banner_box {
    height: 300px;
    width: 200px;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
}

これは「display: flex;」と「flex-direction: column;」の合わせ技により縦並びを実現するパターンです。

プロパティ	意味
display:flex	フレックスコンテナ
flex-direction	子要素(フレックスアイテム)をどの方向に並べていくかを指定する。columnは縦方向

display:flexは使えると便利なので覚えておきましょう。

今回は以上です。

HTMLとCSSの教材をまだ準備していない方は準備しましょう。

>>HTMLとCSSのオススメ教材を紹介【失敗しない】

学習ステップの全体はコチラ

>>HTMLとCSSの学習ステップ一覧