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

pcサイトのコーディングに関しての注意点。

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …

no image

HTML5について

CSSのサンプルを書いていく途中で、HTML5タグが出来てたので簡単におさらいです。 Contents1 HTML5のメリット1.1 form周りのhtml1.2 文章構造の明確化1.2.1 navに …

no image

css小ネタ

実務でCSSをゴリゴリ書く機会があり、力不足を感じたので、メモを。 ライブラリlessやsassを使うとスコープを設定できるのでかなり楽 大まかな幅設定 スマホデザインの場合、幅を基本的に%で指定。p …

no image

bulmaフレームワークに関して

以前から使っているbulmaフレームワークですが、ドキュメントをフルで読んだことがなく、いい機会なので全て読み、ポイントをメモります。 https://bulma.io/documentation/ …

no image

boostrapでのヘッダーナビ作成

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。 実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していまし …

アーカイブ