【html,css】で写真と文字を並べる方法
ホームページを作っていくときに欠かせないのは、レイアウト。
図や写真を横に２，３枚並べたり、図や写真と文字を並べたりするのは必須のレイアウトと言って良いでしょう。
自分も実際にホームページを作っていて、毎回悩むのは、ここはどのようなレイアウトを使うかと言うことです。
float-leftは、けっこう使用頻度が高いかもしれませんが、display-flexもホームページでは欠かせないレイアウトです。
また、最近では、display-gridもよく使うようになってきました。図や写真、文字を縦横に自在に並べられます。とても便利で、これからは、display-gridを多く使うことになるかも知れません。
このページでは、みなさんがよく使うと思われるこれら３つの方法について説明していきます。
display: flexの使用例
【display:flex】
フレックスコンテナーボックスを生成します。フレキシブルボックスレイアウトを定義しますので、文字の回り込みはしません。
文字数が多くなっていくと、ボックスが縦に伸びていきます。
display: flex
フレックスコンテナーボックスを生成します。フレキシブルボックスレイアウトを定義しますので、文字の回り込みはしません。
文字数が多くなっていくと、ボックスが縦に伸びていきます。それに伴い写真のイメージが崩れます。
上の写真では.disp-flexでwidthとheightを70pxに固定しています。
また、写真のボックス内での位置は、変えることができます。
margin: top
margin: bottom
margin: auto
などの指定によって変えることができます。
スマートフォンやタブレットなどでは、写真の大きさによっては文字列部分が狭くなってレイアウトが崩れます。
写真と文字のレイアウトは縦に置く方が良いでしょう。PC画面の場合は横に置いてかまいません。
/* displayflex---css-------------------------------*/
.disp-flex{
display: flex;
}
.disp-flex img{ /*image画像の大きさや位置を指定しておく*/
width: 70px;
height: 70px;
margin: auto;
margin-right: 10px;
}
/* displayflex---html----------------------------------*/
<div class="disp-flex">
<img src="images/70fork.png" alt="フォークリフトの画像">
<p>display: flexを使用した例<br>
display: flexを使用すると、・・・・</p>
</div>
float: leftの使用例
【float: leftを使用した例】
float: leftを使用すると、写真を左側に寄せ、文字の回り込みを指定します。
写真を右に寄せたいときは、rightを使用してください。写真と文字のスペースは写真にcssでmarginを使用してレイアウトを整えます。
スマホ対応（レスポンス対応）にする場合は写真の横に文字や別の画像を配置するのは良くありませんので、縦置きにする方が良いでしょう。
float: left
float: leftを使用すると、写真を左側に寄せ、文字の回り込みを指定します。
写真を右に寄せたいときは、rightを使用してください。写真と文字のスペースは画像にcssでmarginを使用してレイアウトを整えます。
スマホ対応（レスポンス対応）にする場合は写真の横に文字や別の画像を配置するのは良くありませんので、縦置きにする方が良いでしょう。
必ず、clear: bothと一緒に使用してください。
下記のホームページで、floatを使用した例を見ることができます。PC画面では、横置き。スマホ画面では、縦置きにしています。
Instant WPが起動しない
/* floatleft---css-------------------------------------*/
.disp-float{
float: left;
}
.forkimg{
margin-right: 10px;
margin-bottom: 10px;
}
.clear {
clear:both;
}
/* floatleft---html------------------------------------*/
<div class="disp-float">
<img class="forkimg" src="images/70fork.png" alt="フォークリフトの画像" width="70px">
</div>
<p>floatleftを使用した例<br>
float:leftを使用すると、・・・</p>
<div class="clear"></div>
display: gridの使用例
【display: gridを使用した例】
グリッドコンテナーボックスを生成します。
【display: gridを使用した例】
グリッドコンテナーボックスを生成します。
display: grid
グリッドコンテナーボックスを生成します。
F12キーを押して、フレキシブル表示の隣の画像をクリックして、画像のところにマウスをもっていってみてください。
画像の枠が、グリッドになっていることが分かると思います。設定によって、列や行を増やすことができます。
写真の位置は、
justify-self:
align-self:
などで変えることができます。
このホームページの大枠（２カラム）はdisplay: gridを使用しています。
また、下記のホームページでも、display: gridを使用していますので参考にしてみてください。
フランス語版旅行案内
フォークリフト 学科試験問題
/* displaygrid---css-------------------------------*/
.disp-grid{
display: grid;
grid-template-columns: 70px 1fr;
column-gap: 10px;
align-items: center;
}
/* displaygrid---html------------------------------*/
<div class="disp-grid">
<img src="images/70fork.png" alt="フォークリフトの画像">
<p>display gridを使用した例<br>
display:gridを使用すると・・・</p>
<img src="images/70fork.png" alt="フォークリフトの画像">
<p>display gridを使用した例<br>
display:gridを使用すると・・・</p>
</div>
写真と文字を並べる方法。主な３つの方法を紹介しました。
自分のホームページのレイアウトを考えて、これらの３つの方法を使い分けてください。