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

GIMPでの薄膜レイヤー&縁取り

えー本業はプログラマなんですが、ガチンコ塾のブログの画像なんかもたまに作ってます。 まーほとんど素人なんですけどね(笑) 一応昔にPhotoshopとIllustratorは使ってました。今では忘却の …

no image

CSSのレイアウト例 その4 グリッドレイアウト

本日はグリッドレイアウトについて。 このサイトだけ見ても多分、デザインのイメージはわかないと思います(汗) サイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザイン …

no image

スマホサイト対策全般

スマホ対策のデザインに関するチェックリスト。 Contents1 viewport2 横のはみ出しチェック3 メディアクエリ viewport まずは横幅などがおかしくないかの確認 [crayon-6 …

no image

data- HTML5のカスタムデータについて

HTML5のカスタムデータ属性について。 HTML5ではタグにdata-*とすることで任意の値を持たせることができます。 いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ 例として下記 …

no image

共通CSSに必要な要素

簡単な業務アプリだとBootstrapなどのCSSフレームワークを使うことが多かったのですが、不必要な機能があることもあり、自作で非常に手軽なCSSを集めてこれを共通のCSSとして使うことが多いです。 …