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

UIまで手が回らないプログラマのための画像加工サービス&ツール紹介など

本業はプログラマ―なんですが、ガチンコ塾のブログの画像を作る程度の加工などをちょこちょこやってます。 プログラマーといえどUIを全く気にしないのは問題ですし、中小企業だと広く浅くできる人間が求められる …

no image

CSSの適用ルールと継承について

前回のエントリーでも書いたようにいまいちわかっていないことが多いので、復習します。 Contents1 セレクタの種類2 セレクタの詳細度3 継承 セレクタの種類 CSSのセレクタには下記のようなもの …

no image

sassについて

以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。 Contents1 sassとは2 インストール&コンパイル3 一般的な記法など4 参考リンク sassとは 一言で …

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

no image

WordPressのカリキュラムを考える

WordPressを触っていますが、ちょっと体系的に覚える必要がありそう。 結構長い間、触ってきましたが、体系立てて覚えていないのでいざこの処理は?ときかれると案外迷います。 例えば0から初心者に教え …