画像の並びをブラウザ幅に合わせてレイアウトを変化させる方法

素材サンプルの配置

ただ画像を並べただけの状態。これであれば自動的にブラウザの幅に合わせて並びが変化する。
横並び個数の上限は制限していない→方法がわからない

sp_no_img01.jpgsp_no_img02.jpgsp_no_img03.jpgsp_no_img04.jpgsp_no_img05.jpgsp_no_img06.jpgsp_no_img07.jpgsp_no_img08.jpg

素材サンプルの配置

並べたい画像をdiv(capimglist)で囲む。
更に画像とキャプションの入ったp2つをdiv(capimg)で囲んだパターン。


---------------------ここから---------------------




キャプション1


sp_no_img01.jpg




キャプション2


sp_no_img02.jpg




キャプション3


sp_no_img03.jpg




キャプション4


sp_no_img04.jpg




キャプション5


sp_no_img05.jpg





□HTML例

<div class="capimg">
 <div>
  <p>画像1が入る</p>
  <p>説明文などのキャプション1が入る</p>
 </div>
 <div>
  <p>画像2が入る</p>
  <p>説明文などのキャプション2が入る</p>
 </div>
</div>

□CSS例

説明

①一つの画像用のdivが横幅いっぱいになってしまうことを回避
②各画像の左右のみ10pxの余白を追加
・capimg内の幅を内容によって決定させる
・paddingで余白を上下は0、左右は5pxずつとる

.capimg div{
   display: inline-block;
   padding: 0 5px;
}


②自動改行タグを無効化する設定
クラス名capimglistというdiv要素の中にある<br />タグを以下の様に設定
・capimg内の<br />のdisplayを非表示

.capimg br{ display: none;}


隙間を回避するための設定
④p内のテキストの中央寄せ
クラス名capimgというdiv要素の中にあるimgタグを以下の様に設定
・vertical-alignをbaseline以外に設定
・margin-bottomが10pxとされているので0に変更(スマートフォン用に!importantで無理やり)
・text-alignをcenterに設定

.capimg img, .capimg p{
   vertical-align: bottom;
   margin-bottom: 0!important;
   text-align: center;
}




□具体的な設定手順

・HTMLは記事編集時に記事内に挿入

・CSSはカスタムCSSを使用

1.Seesaaブログにログイン

2.「デザイン」>「CSS/HTML編集」>現在使用しているデザインを選択

3.スタイルシート編集の最下部に以下の内容を記述し「保存」
/*--キャプション付き画像リスト--*/
.capimg div {
display: inline-block;
padding: 0 5px;
}

.capimg br { display: none;}

.capimg img, .capimg p {
vertical-align: bottom;
margin-bottom: 0!important;
text-align: center;
}

この記事へのコメント