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

PDFテンプレートの活用

PDFのテンプレートの活用について。 PDFを出力するプログラムはいろいろありますが、今回はすでにあるPDFをテンプレート化できるライブラリについて。 Contents1 FPDI2 ソース3 参考リ …

no image

パララックス系のギャラリー(中央ネタ)

ギャラリー的な画像を使ったときに思ったこと。下記が画像の標準的な扱い方かな・・・ 枠自体は高さも幅も決める(li要素のwidth,heightは決める) 基本は画像要素を中央揃え(positionの5 …

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

no image

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

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

no image

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

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