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

一般的なWebサイト制作について

実務で通常のWebサイトを作成するというお仕事が。 Webサイトを改めて作成するっていう経験からはだいぶ遠のいてましたんで、これを機にスキルをまとめたいなーって思います。 サイト作成といっても本格的な …

no image

固定されたナビ(ヘッドとサイド)

boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。 Contents1 ヘッダーを固定したい場合2 サイドバーを固定したい場合3 参考リンク ヘッダーを固定し …

no image

positionを使うときに注意すること

positionを使ったときに色々なまとめ。 親>子>孫だったときに親がrelative、子、孫がabsoluteだと孫の基準点は子になる(ソース参照) position:absolute …

no image

HTML5のinputタグのvalidatorについて

HTML5は標準でinputタグのバリデーション機能がついており、必須チェックや簡単なエラーチェックなどをすることが出来たりします。 必須入力のほかにも、telやemail、時間など様々なタイプのもの …

no image

checkboxのカスタマイズ

ブラウザのディフォルトではなくcheckboxをカスタマイズしたいとき。 やったことなかったんですが、やってみると結構面白い。 Contents1 ソース2 参考リンク ソース まずはソースを。 ht …