HTML/CSS

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

2021年2月10日

CSSで画像を縦並び&右寄せしよう【すぐにできる】と書かれた画像

 

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

どうしたらいいですか?

 

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

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

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

 

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

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

 

※補足

この記事は連載の1つです。

以下の学習ステップを歩んできていることを想定しています。

>>【完全無料】HTMLとCSSの学習ステップ一覧

 

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

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

 

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

 

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

 

画像が間違った位置で横並びになっている

 

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

 

対象となるHTMLのコード

 

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

 

                <div id="banner">
                    <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 {
    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 {
    height: 300px;
    width: 200px;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
}

 

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

 

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

 

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

 

今回は以上です。

次回はフッターを整えていきます。

>>次の回:CSSでフッターを整えよう【WEB制作の基本です】

 

\ HTMLとCSSについて最初から学びたい方はこちら /

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

\ Web制作の副業で今すぐ稼ぎたい方はこちら /

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

 

プログラミングスクールに関する情報

【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
【転職保証つき】返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。   1位:DMMWEBキャンプ  【 ...

続きを見る

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきました。 結論から話すと ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

-HTML/CSS

© 2024 エンジニアてんし君ブログ