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をゴリゴリ書く機会があり、力不足を感じたので、メモを。 ライブラリlessやsassを使うとスコープを設定できるのでかなり楽 大まかな幅設定 スマホデザインの場合、幅を基本的に%で指定。p …

no image

HTML5のinputタグのvalidatorについて

HTML5は標準でinputタグのバリデーション機能がついており、必須チェックや簡単なエラーチェックなどをすることが出来たりします。 必須入力のほかにも、telやemail、時間など様々なタイプのもの …

no image

実務でCSSを書く時のポイントについて

先月にかなりたくさんCSSを書いたんでその時感じたポイントみたいなものを。 Contents1 いきなりかかずにまず共通部分をみつける2 見た目の調整には紙に印刷して横においておく3 色や幅、フォント …

no image

レスポンシブサイト作成に関して

実務でレスポンシブを作ったので、そのまとめに関して。ちなみにPCのサイト自体も作ったことなかったのでそのまとめに関しても。 メインキャッチの処理は縦横の比率を変えない、常に要素を中央に配置するとなると …

no image

css animationの使い方、他スクロース量でのアニメーションなど

transitionとちょっと近いですがCSSでのanimationに関して。 HTML

CSS [crayon-5f70efd9be …