POPSブログ

baserCMS4.0系 TOP画像のレスポンシブ表示

399

  Category:  basercms2017/01/03 pops 

baserCMSが4.0系レスポンシブデザインでの、TOP画像のレスポンシブ表示等のテストをします。クラス化して設定変更出来る様にも工夫します。

 

TOP画像のレスポンシブ表示のテスト

画像のレスポンシブ表示とTOP画像のエフェクト処理の2つについて考えて見ますが、先にTOP画像のレスポンシブ表示よりテストしてみます。「無料レスポンシブHTMLテンプレートNo.028」#mainImgと同じになりますが1箇所のみの使用になりますので、クラスで処理します。


画像のレスポンシブ表示

レスポンシブ表示を行う場合はCSSのwidth設定に max-width を利用します。max-widthの使用法次第では色々な表示が可能ですが、実際テストしないと理解し難い。使用する場所で少し違うものを作りテスト表示してみる。

responsive-image

 

TOPページなどにおける画像のレスポンシブ表示のデモ

TOPページなどにおける画像のレスポンシブ表示であるが、実際に見たほうが判り易い、ブラウザの横を伸縮ください。


DEMO

模擬デモページ (http://pops-web.com/main/baserhtml/top9.html) : TOPページの模擬出力HTML

ブラウザ幅に横を合わせる : 確認ツールで見た場合の表示

PC iphone ipad 或いは類似した機器等での表示例で、携帯(モバイル)には対応していません。PCで確認ください。

 

1. max-widthに最大の幅を設定します。(通常はpx値で指定します)
2. 画像幅は 100%、高さは auto です。(縦横同一比率で縮小または拡大されます)
3. 画像幅 width が px 指定ではレスポンシブには成りません。(指定幅で表示される)
4. 中央表示は margin:0 auto、を設定します。リスト形式のものは中央表示成りません。
(中の要素をフロートすると狂う、下方にスクロールバーがでる、対処法あり次ページで述べる)
5. borderは画像に。その他の要素ではボトムに隙が出る事がある。
6. 画像の表示品質はブラウザ、解像度によって異なります。


以下簡単な説明。フロート構成ではありません。実際作ると理解できると思います。


書式 (画像の場合の例)

中の要素の大きさは、幅 100%、高さ auto、にする事。(中の要素は画像とは限りません...)


<div class="hoge" >
<img src="画像URL" />
</div>

.hoge{
max-width:指定の幅px;
height:auto;
margin:0 auto;
}
.hoge img{
width:100%;
height:auto;
}

画像のレスポンシブ中央表示1 (幅変更可能)

読み込み画像サイズに関係なく、表示サイズを指定変更します。画面に応じてレスポンシブ中央表示します。

CSS初期値はテキトウな指定幅にしておく、複数個所に使えるように、HTMLのstyleで直接変更出来る様にしたものです。

専用のものが必要な場合は、固有設定のクラスを作れば良い訳です。クラス名は自由です。


HTML

下記のように、HTMLのstyleで加筆して直接変更するのが簡単と思います。

意外と便利と思います。


<div class="responsiveImage" style="max-width:1260px;">
<img src="/main/baserhtml/images/main_image_5.jpg" />
</div>

------------------------------------------------------

1. style設定なしは初期設定の440pxに成る
2. style="max-width:1260px;"、は幅1260px
3. style="max-width:100%;"、は画面幅一杯に
4. style="max-width:90%;"、は画面幅の90%に

CSS

borderは画像に処理したほうが狂いがない様です。クラス化しても良い。


/* 通常クラス化 */
.responsiveImage{
max-width:440px;
height:auto;
margin:0 auto;
padding:0;
}
.responsiveImage img{
width:100%;
height:auto;
margin:0;
padding:1px;
border:1px solid #d5d5d5;
}

画像のレスポンシブ中央表示2

読み込み画像サイズが最大になる。画面に応じてレスポンシブ中央表示します。サイズ指定は有りません。

text-align:center使用。HTML5では設定できない要素もあるので注意。
「無料レスポンシブHTMLテンプレートNo.028」画像中央表示 #mainImg と同じになります。


HTML


<div class="autoImage">
<img src="/main/baserhtml/images/mainImg12.jpg" />
</div>

CSS


/* 最大幅は画像サイズ */
.autoImage{
text-align:center;
margin:0;
padding:0;
}
.autoImage img{
max-width:100%;
height:auto;
padding:1px;
border:1px solid #d5d5d5;
}

画像のレスポンシブ表示3

画像レスポンシブ番外「responsiveクラス」その要素内で画像を伸縮します。余白は margin-left で処理。
width処理ですからレスポンシブ表示と呼ぶに相応しくはない。
単にテキトウ」に作ったものです。目的に合わせて数種あれば便利かも知れません。
max-widthは使用していません。必ずしも中央表示の必要は無い。

タブレットでは画像が拡大する場合が多いと思います。



<img class="responsive" src="/main/baserhtml/images/flight01.jpg" />


/* 横%指定画像 */
img.responsive{
width:98%;
height:auto;
margin-left:1%;
}
-------------------------------------------------
同じこと
margin:0 1%;

 

【参照】当方の記事: baserCMS4.0系 レスポンシブデザインのテーマ制作1

 

HTML5対応の通常のレスポンシブ表示ページで利用出来ると思います。
TOP画像のエフェクト処理は次ページで、以上です。

 


[ この記事のURL ]


タグ:html5 , basercms4

 

ブログ記事一覧

年別アーカイブ一覧



[1]