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

bulmaフレームワークに関して

以前から使っているbulmaフレームワークですが、ドキュメントをフルで読んだことがなく、いい機会なので全て読み、ポイントをメモります。 https://bulma.io/documentation/ …

no image

CSSのブロックとインライン、レイアウトについて

今回はCSSを組む時のブロックレベルとインラインの基本とレイアウトに関して。 Contents1 ブロックレベルとインライン1.1 ブロックレベル要素1.2 インライン要素2 レイアウトに関して2.1 …

no image

pcサイトのコーディングに関しての注意点。

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …

no image

CSSで背景画像の出力

最近はやりのWEBデザインでよくある、大きな背景画像のなかにユーザー名とパスワードを入力させるような画面の作成方法について。

基本的な …

no image

css flexboxについて どんなことができるのか?

CSSを使い始めて数年がたっていますが、いまだに最適な書き方がようわかっとりません(汗) 特に難しいのが全体的なレイアウトの決定でfloatとかpositionなんかを使っていろいろと悪戦苦闘していま …

アーカイブ