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のレイアウト例 その3 固定+リキッドレイアウト

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

no image

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

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

no image

レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。 スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。 要は通常の980px分をそのままiPhoneの画面に収まるよう縮小 …

no image

positionを使うときに注意すること

positionを使ったときに色々なまとめ。 親>子>孫だったときに親がrelative、子、孫がabsoluteだと孫の基準点は子になる(ソース参照) position:absolute …

no image

CSSを書くときのコツ

前回のCSSのルールを踏まえて、今回はCSSを書くときの概念的なルールです。 Contents1 CSSのデメリット1.1 抽象化が難しい1.2 すべてのルールがグローバルスコープ2 CSSを書くとき …