skillup

技術ブログ

デザイン

キャッチ画像の扱いについて

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

今さらながらですが、サイトのトップなどに貼り付けるメインビジュアル系の画像の処置について。

スマホサイトオンリーだとあまり考えなくてもいいかもしれませんが、PCやレスポンシブの場合、ブラウザの幅が伸縮することを前提として組まなくてはいけないので要注意です。

最適解があるわけではないですが、一応オススメの設定などを。

一般的には

  • 縦横の伸縮をしない
  • 画像の中心とブラウザの中心が一致

などが求められる仕様かなと思います。

ソースは↓です。

https://github.com/umanari145/css/blob/master/main_visual.html

気をつけるべきポイント

背景画像で使う場合

  • background-size:coverでほぼ決まり。高さが動的に変えていい場合はbackground-size:100% 100%
  • coverを使う場合はbackground-position:center centerにする。要はどこが基準になるのか。大きい画像を小さい領域に入れようとするとよくわかる。パラメーターいじって実験。
  • スクロールしても背景が固定の場合は、background-attachment: fixed;を使う。positionに関してはcenter center(真ん中を中心にする)が一般的。領域を狭くして、top rightなどとすると違いがわかる(詳しくはソース参照)。

imgタグで使う場合

  • position:abosoluteでtop,left50%にし、ネガティブマージンかtranslateで画像分中央に移動させる。

ソースのようにサンプルを色々動かすのがいいでしょう。

 

 

-デザイン

執筆者:


comment

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

関連記事

no image

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

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

no image

transition関連

cssのanimationに関して。 例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。 [crayon-66069 …

no image

CSSのレイアウト例 その3 固定+リキッドレイアウト

本日は固定レイアウト+リキッドレイアウトについて。 リキッドレイアウトとはブラウザの幅に合わせて表示を変える方法でして、スマホが一般的となった現在では非常によく使われています。 今回解説するのは例えば …

no image

HTML5について

CSSのサンプルを書いていく途中で、HTML5タグが出来てたので簡単におさらいです。 Contents1 HTML5のメリット1.1 form周りのhtml1.2 文章構造の明確化1.2.1 navに …

no image

CSSはまりやすいポイント ※随時更新予定

CSSにてよく確認するのネタに関して Contents1 中央寄せ2 命名3 テーブル 中央寄せ vertical-alignを指定できるのは「インライン要素」と「テーブルセル」だけ text-ali …

アーカイブ