skillup

技術ブログ

デザイン

パララックス系のギャラリー(中央ネタ)

投稿日:2018年3月17日 更新日:

ギャラリー的な画像を使ったときに思ったこと。下記が画像の標準的な扱い方かな・・・

  • 枠自体は高さも幅も決める(li要素のwidth,heightは決める)
  • 基本は画像要素を中央揃え(positionの50%ぞろえとtransform-50%で中央ぞろえ)
  • 高さに揃える(max-height:100%)
  • 縦横比は絶対遵守(height:auto;width:auto)
  • 縮小はしても拡大はしない
  • 当然枠は超えない(li要素のoverflow:hidden)

HTML

CSS(ソースにあるアニメーション要素は排除)

ソース

https://github.com/umanari145/css/blob/master/original_pararax.php

-デザイン
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSSの概要 主に適用ルールについて

昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。 本日からは正しいCSSについてみていこうと。 Contents1 CSSとは?2 CSSの書き方3 CSSの挙動4 プロ …

no image

checkboxのカスタマイズ

ブラウザのディフォルトではなくcheckboxをカスタマイズしたいとき。 やったことなかったんですが、やってみると結構面白い。 Contents1 ソース2 参考リンク ソース まずはソースを。 ht …

no image

cssでのmax,minや画像の配置に関して

主に画像なんかで使われるんですが、max(min)-width(height)などの使い方に関して。 えーmax(min)はどういうときに使われるかというとまず可変な要素に対して使われることが多いです …

no image

ワンポイント画像系のcssでの実装

主にリストやリンクなどのワンポイントアイコン系の画像をどう実装するかについて。 Contents1 list-style2 background-image3 Font Awesome4 after5 …

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …