skillup

技術ブログ

デザイン

メインで使う画像のcssについて

投稿日:2017年11月27日 更新日:

CSSについていろいろと勉強したんですが、画像の使いに関して結構てこずったんでポイントをまとめておこうかと。

画像といっても商品の画像などワンポントでなくメインで使うタイプのものです。

  • imgタグをdisplay: block;をつける。つけないと縦幅認識しない。
  • 基本imgのタグに関して大きさに関して意識をもつこと。何も指定しないと画像本来の幅になる。%にするとカラムの幅割合をとる。設定が不適切だとはみ出します。
  • auto(画像サイズに依存),領域に依存(%表記),固定値の違いをしっかりと認識すること。
  • 画像の縮尺を守りたい場合はautoプロパティを使う。ディフォルトではこれだが意識づけのためにわざわざ書いたほうがいいかも。
  • 領域全体を埋めたい場合にはwidth:100%を使う(もちろん100以下の場合はその領域の何割かになる)。実際には幅は領域に会わせて、縦は自由に、といったパターンが多いためその場合、width:100%,height:autoになる。
  • 基本可変のサイズだがこのサイズ以上に広くしたくない、(狭くしたくない)場合にmax(or min)プロパティを使う。
  • 親要素(画像をくくっている要素)の大きさは基本的には画像のサイズによって値が可変になる。

一応いままで書いたもののリンクなども。

ワンポイント画像系のcssでの実装

cssでのmax,minや画像の配置に関して

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

-デザイン
-,

執筆者:


  1. […] 参考リンク メインで使う画像のcssについて […]

  2. […] 参考リンク メインで使う画像のcssについて […]

comment

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

関連記事

no image

lessについて(CSSライブラリ)

Contents1 lessって?1.1 スコープが使える1.2 変数が使える1.3 関数化1.4 インポート2 インストール3 コンパイル lessって? CSSの保守性を向上させるライブラリ。これ …

no image

デザイ二ングインターフェイスのまとめ

デザイ二ングインターフェイスを今まで読んで実務にすぐ生かせそうな&ポイントとなりそうな箇所のまとめ Contents1 ユーザーを理解する2 ユーザーの行動パターン3 ポジショニング(情報の配置) 4 …

no image

lessサンプル

lessのサンプル Contents1 lessファイル構成2 ソース3 注意点4 参考リンク lessファイル構成 header,footer sytle 変数 lib 関数 common head …

no image

object-fitによる画像比率を保ったセンタリング

CSSでレイアウトを組むときにネックになるのが画像のレイアウトです。 と言うのも可変要素であり、幅を制御するのが難しかったりします。 参考リンク メインで使う画像のcssについて まあ縦長とか横長とか …

no image

tableでのヘッダー固定に関して+borderを描く時のコツ

Contents1 tableでのヘッダー固定について2 borderを描く時のコツ tableでのヘッダー固定について 超小ネタですが、tableのヘッダー固定に関して。 ソースは下記リンクに。 h …