講座1

画像と文章を横並びにする方法

  • Jo Masafumi
  • Jo Masafumi
学習状況をツイッターでつぶやく

次は、画像と文章を横並びにする方法をします。

画像と文章を横並びにする方法

ワードプレスの管理画面を開きます。

左上の「投稿」を押します。

左上の「新規追加」を押します。

左上の「タイトルを追加」に「画像と文章を横並びにする方法」と入力します。

右側の「テキスト」を押します。

下記コードを「テキスト」にコピーして、貼り付けます。

<div class="kaijo">
<div class="float-hidari">
画像１
</div>
<div class="float-migi">
こんな形で文字と画像を横並びにしたいときありますよね？
これは左の画像に「float:right;」、右のテキストに「float:left;」を設定した例です。  
</div>
</div>

貼り付けました。

次は、「画像１」の文字を消します。

左上の「メディア追加」を押します。

左上の「メディアライブラリ」を押します。

①「サンプル画像１」を選択します。

②「配置：なし」、「リンク先：なし」、「サイズ：フルサイズ」を選択します。

③右下の「投稿に挿入」を押します。

画像が挿入されました。

右側の「公開」を押します。

「OK」を押します。

右上の「変更をプレビュー」を押します。

左側に「サンプル画像１」と右側に「文章」が横並びに表示されていることを確認します。

学習状況をツイッターでつぶやく
↑じょうまさふみに学習状況を報告すると喜びます(^^)/

floatを使って左に画像と右に文章を横並びにする方法

CSS

/*画像と文章　横並び*/
.float-migi{
  float:right; /*右より*/
  width:50%; /*幅*/
  padding-left: 20px; /*左余白*/
  padding-right: 20px; /*右余白*/
  margin-top: 1em; /*上側の余白*/
  margin-bottom: 1em; /*下側の余白*/
  box-sizing: border-box; /*枠線はみだし対策*/
}
.float-hidari{
  float:left; /*左より*/
  width:50%; /*幅*/
  padding: 20px; /*余白*/
  box-sizing: border-box; /*枠線はみだし対策*/
}
.kaijo:after{
  display:block; /*固定表示*/
  clear:both; /*周りこみ解除*/
  content:"";
}

HTML

<div class="kaijo">
<div class="float-hidari">
<img src="https://kouza8.wp-sensei.net/wp-content/uploads/2019/04/サンプル画像1.png" alt="" width="600" height="300" class="alignnone size-full wp-image-2393" />
</div>
<div class="float-migi">
こんな形でテキストと画像を横並びに配置したいときってありませんか？
これは左の画像に「float:right;」、右のテキストに「float:left;」を設定した例です。  
</div>
</div>

記事をプレビュー表示したとき

こんな形でテキストと画像を横並びに配置したいときってありませんか？
これは左の画像に「float:right;」、右のテキストに「float:left;」を設定した例です。

tableを使って左に画像と右に文章を横並びにする方法

<table style="border-style: none;" width"100%">
<tr>
<td style="border-style: none;" align="center" width="50%">
<img src="https://kouza8.wp-sensei.net/wp-content/uploads/2019/04/サンプル画像1.png" alt="" width="600" height="300" class="alignnone size-full wp-image-2393" />
</td>
<td style="border-style: none;vertical-align:top;padding-top: 20px;" align="left" width="50%">
「border-style:none;」は、枠線なしです。
「vertical-align:top;」は、縦方向を上側にします。
「padding-top: 20px;」は、上側に余白20pxです。
「align="left"」は、文字を左よせにします。
「width="50%"」は、横幅50%です。
</td>
</tr>
</table>

記事をプレビュー表示したとき

「border-style:none;」は、枠線なしです。
「vertical-align:top;」は、縦方向を上側にします。
「padding-top: 20px;」は、上側に余白20pxです。
「align="left"」は、文字を左よせにします。
「width="50%"」は、横幅50%です。

floatを使って右に画像と左に文章を横並びにする方法

CSS

.float-migi{
  float:right; /*右より*/
  width:50%; /*幅*/
  padding-left: 20px; /*余白*/
  margin-top: 1em; /*上側の余白*/
  margin-bottom: 1em; /*下側の余白*/
  box-sizing: border-box; /*枠線はみだし対策*/
}
.float-hidari{
  float:left; /*左より*/
  width:50%; /*幅*/
  padding: 20px; /*余白*/
  box-sizing: border-box; /*枠線はみだし対策*/
}
.kaijo:after{
  display:block; /*固定表示*/
  clear:both; /*周りこみ解除*/
  content:"";
}

HTML

<div class="kaijo">
<div class="float-hidari">
こんな形でテキストと画像を横並びに配置したいときってありませんか？
これは左の画像に「float:right;」、右のテキストに「float:left;」を設定した例です。  
</div>
<div class="float-migi">
<img src="https://kouza8.wp-sensei.net/wp-content/uploads/2019/04/サンプル画像1.png" alt="" width="600" height="300" class="alignnone size-full wp-image-2393" />
</div>
</div>

記事をプレビュー表示したとき

こんな形でテキストと画像を横並びに配置したいときってありませんか？
これは左の画像に「float:right;」、右のテキストに「float:left;」を設定した例です。

tableを使って右に画像と左に文章を横並びにする方法

<table style="border-style: none;" width"100%">
<tr>
<td style="border-style: none; vertical-align:top; padding-top: 30px;" align="center" width="50%">
「border-style:none;」は、枠線なしです。
「vertical-align:top;」は、縦方向を上側にします。
「padding-top: 20px;」は、上側に余白20pxです。
「align="left"」は、文字を左よせにします。
「width="50%"」は、横幅50%です。
</td>
<td style="border-style: none;vertical-align:top;padding-top: 20px;" align="left" width="50%">
<img src="https://kouza8.wp-sensei.net/wp-content/uploads/2019/04/サンプル画像1.png" alt="" width="600" height="300" class="alignnone size-full wp-image-2393" />
</td>
</tr>
</table>

記事をプレビュー表示したとき

「border-style:none;」は、枠線なしです。
「vertical-align:top;」は、縦方向を上側にします。
「padding-top: 20px;」は、上側に余白20pxです。
「align="left"」は、文字を左よせにします。
「width="50%"」は、横幅50%です。