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を書く時のポイントについて

-デザイン
-,

執筆者:


comment

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

関連記事

no image

transition関連

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

no image

破綻しないCSSについて

業務では開発する人間があまりおらず、プログラム以外にもデザイン(CSSなどのレイアウト)やらサーバーやら一人ですべてやることが多いです。 CSSなんかは最初に触ってから4,5年は立ちますけど、系統的に …

no image

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

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

no image

CSS floatについて

以前もちょっと書きましたが、CSSのfloatについて。 http://skill-up-engineering.com/?p=1708への追記 親から見るとfloatした子供は存在しない状態 flo …

no image

スマホサイト対策全般

スマホ対策のデザインに関するチェックリスト。 Contents1 viewport2 横のはみ出しチェック3 メディアクエリ viewport まずは横幅などがおかしくないかの確認 [crayon-5 …