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

レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。 スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。 要は通常の980px分をそのままiPhoneの画面に収まるよう縮小 …

no image

lessについて(CSSライブラリ)

Contents1 lessって?1.1 スコープが使える1.2 変数が使える1.3 関数化1.4 インポート2 インストール3 コンパイル lessって? CSSの保守性を向上させるライブラリ。これ …

no image

cakePHP+bootstrapでのページャー

cakePHP+bootstrapでページャーのリンクを下記のように出力したいときのメモを。 ソース コントローラーのほうでは特に設定する必要なはく、HTMLのほうで下記のように設定すればOKです。 …

no image

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

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

no image

boostrapでのヘッダーナビ作成

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