どうしたらいいですか？
これまではプログラミング未経験者の方に向けてHTMLとCSSの基礎からWEBページの作る流れを解説してきました。
前回はメインコンテンツのレイアウト崩れを修正する方法について解説しました。
前回の記事：CSSでWEBサイトのメイン要素のレイアウト崩れを修正しよう
メインコンテンツのレイアウト崩れは消えたものの、まだ画像が理想の場所に配置されていません。
そこで今回は画像を画面の右に配置する方法について紹介します。
ちなみにこの記事は連載記事の1つです。こちらから学習を進めておいてください。
【この記事でわかること】
✔ 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の教材をまだ準備していない方は準備しましょう。
学習ステップの全体はコチラ
