小野市のWEB職人によるSEOに強いホームページ作成をしています。また、ホームページ制作代行・支援等もやってます。

レスポンシブ(可変) 画像付き 3列ボックスを作ってみた。

こんにちはぁ~ヽ(´▽`)/
今日はレスポンシブに対応したボックスを作ってみた。
Web制作をしてると何かと役にたちそうなボックスです!
はい!下に並んでるヤツですよ~ヾ(*ゝω・*)ノ

DAISUKE(だいすけ)

DAISUKE(だいすけ)

好きな物リスト

  • 仮面ライダー
  • 妖怪ウォッチ
  • ドラゴンクエストドラゴンクエストドラゴンクエスト
DAISUKE(だいすけ)

DAISUKE(だいすけ)

僕はだいすけです。
2015年の春から小学一年生になりました。

DAISUKE(だいすけ)

DAISUKE(だいすけ)

僕はだいすけです。
2015年の春から小学一年生になりました。


パソコンとスマートフォンに対応!

パソコンとスマートフォンで見え方が自動で変わるようにしています。

スマートフォンでの表示は、縦1列に並ぶようにしています。


スマホ表示

難しかったとこは、やはりアイコン付きリスト(左側のリスト部分)でしょうか・・
Windowの幅を縮めると画像にリストが重なってしまって結構大変でした。
今のところ、IE11でも問題なく表示されています。

※古いIEには対応しておりません。ヽ(;▽;)ノ

画像をクリックするとブラグインのライトボックスに対応しています。

また機会があればソースコード載せてみたいと思います。






最後まで読んで頂きありがとうございました。

ランキングに参加しています。

↓ポチッっとお願い致します。
m(_ _)m


にほんブログ村 地域生活(街) 関西ブログへ

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

*

郵便番号から住所検索

-

Address

ブログ

にほんブログ村 地域生活(街) 関西ブログへ