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

フォーカス時のみ書き込み可能になるHTML要素について。contenteditableなど

通常はただのテーブル(or普通のHTML)ですが、クリックするとinputになり、入力が可能になる手法について。 contenteditableなど 普通のHTML要素に [crayon-6285b4 …

no image

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

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

no image

compassについて

sassをベースにしたフレームワークがcompassです。 Contents1 compassとは?2 使用方法3 参考リンク compassとは? sassの記法をベースにCSSファイルの作成が可能 …

no image

CSSネタに関して

何回か書いてきたCSSのまとめネタ的なもの。 紙で印刷しておくと生産性が3倍ぐらいになる。思った以上にコーディングがしやすい。 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にも …

no image

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

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

アーカイブ