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

css flexboxについて どんなことができるのか?

CSSを使い始めて数年がたっていますが、いまだに最適な書き方がようわかっとりません(汗) 特に難しいのが全体的なレイアウトの決定でfloatとかpositionなんかを使っていろいろと悪戦苦闘していま …

no image

PDFテンプレートの活用

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

no image

スマホサイト対策全般

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

no image

レスポンシブサイト作成に関して

実務でレスポンシブを作ったので、そのまとめに関して。ちなみにPCのサイト自体も作ったことなかったのでそのまとめに関しても。 メインキャッチの処理は縦横の比率を変えない、常に要素を中央に配置するとなると …

no image

CSSのブロックとインライン、レイアウトについて

今回はCSSを組む時のブロックレベルとインラインの基本とレイアウトに関して。 Contents1 ブロックレベルとインライン1.1 ブロックレベル要素1.2 インライン要素2 レイアウトに関して2.1 …