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

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

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

no image

css写経学習で感じたこと

こっちのブログでも書いてますが、CSSを最近写経してて気づいたことがいろいろあるんでメモリます。 常時追加予定。 Contents1 全体2 レスポンシブ3 レイアウト4 list系5 display …

no image

HTML5について

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

no image

css tips display:table,marginの相殺,font-size指定,margin上下の%など

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。 Contents1 display:table2 inputのfocus時の青を消す3 marginの相殺4  font-s …

no image

CSSで背景画像の出力

最近はやりのWEBデザインでよくある、大きな背景画像のなかにユーザー名とパスワードを入力させるような画面の作成方法について。

基本的な …