skillup

技術ブログ

デザイン

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

投稿日:

主に画像なんかで使われるんですが、max(min)-width(height)などの使い方に関して。

えーmax(min)はどういうときに使われるかというとまず可変な要素に対して使われることが多いです。

内部によって幅が決まるようなパターンですね。(だから画像が多い。)

要は基本は可変なんだけど、「最大でこれ以上の領域はとってはいけない」というケースではmaxが使われるし、これ以上小さくなってはいけないというケースではminが使われます。

あとは基本は幅は50%と決めているけど、でもこれ以上は小さくなってはだめ(これ以上大きくなってはだめ)というときにも当然使われます。

まあ基本スマホ用のサイトで使われることが多いですね。

【CSS】max-widthとmin-widthの使い方まとめ

画像の領域ネタ

領域に画像を入れる場合、

  1. 縦横どららかに合わせて縦横比は保ったままにする(内接or外接)
  2. 領域全体を埋め尽くし、かつ画像全体が表示されるようにして縦横比は無視する

の2パターンがあります。

前者は

  • background-sizeを使う場合はでcontain(内接)を使うかcover(外接)を使うかのどちらか。
  • 使わなければwidthやheightで長いほうを100%にしてもう片方は設定しない or widthをautoにしてmaxのみ設定する

後者はwidth,heightともに100%を使えばOKです。

【図解】CSSだけで画像の縦横比を維持したサムネイルを表示する

【CSS】img画像の縦横比は元のまま、表示させたいボックスサイズの大きい方に合わせて縮小して表示させる。ついでに上下左右中央寄せで。

【CSS】img画像の縦横比を保ったままボックス内に収める方法

画像の中央配置に関して

display:blockとmargin:0 autoでやってきましたが、position使うんですね・・・

CSS 画像を中央配置

【CSS】img画像の縦横比を保ったままボックス内に収める方法

 

-デザイン
-

執筆者:


comment

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

関連記事

no image

Bootstrapでのラジオボタンの装飾について(toggle)

ラジオボタンのようなn択式のチェックに関して、HTMLディフォルトのごついやつではなく、下記のようにボタンがへこんだものを実装したい場合の処理についてメモします。 下記のようなボタンの状態をtoggl …

no image

transition関連

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

no image

flexショートハンドに関して

実務でflexをちょこちょこ使うようになりました。 やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・ んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関し …

no image

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

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

no image

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

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