skillup

技術ブログ

デザイン

メインで使う画像のcssについて

投稿日:

CSSについていろいろと勉強したんですが、画像の使いに関して結構てこずったんでポイントをまとめておこうかと。

画像といっても商品の画像などワンポントでなくメインで使うタイプのものです。

  • 基本imgのタグに関して大きさの記述を必ずいれること。※width:auto;など。そうしないと画像自体の大きさをとってしまい。領域をはみ出します。
  • auto(画像サイズに依存),領域に依存(%表記),固定値の違いをしっかりと認識すること。
  • 画像の縮尺を守りたい場合はautoプロパティを使う。ディフォルトではこれだが意識づけのためにわざわざ書いたほうがいいかも。
  • 領域全体を埋めたい場合にはwidth:100%を使う(もちろん100以下の場合はその領域の何割かになる)。実際には幅は領域に会わせて、縦は自由に、といったパターンが多いためその場合、width:100%,height:autoになる。
  • 基本可変のサイズだがこのサイズ以上に広くしたくない、(狭くしたくない)場合にmax(or min)プロパティを使う。
  • 親要素(画像をくくっている要素)の大きさは基本的には画像のサイズによって値が可変になる。

一応いままで書いたもののリンクなども。

ワンポイント画像系のcssでの実装

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

実務でCSSを書く時のポイントについて

-デザイン
-

執筆者:


comment

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

関連記事

no image

boostrapでのヘッダーナビ作成

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

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

CSSで背景画像の出力

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

基本的な …

no image

CSSはまりやすいポイント ※随時更新予定

CSSにてよく確認するのネタに関して Contents1 中央寄せ2 命名3 テーブル 中央寄せ vertical-alignを指定できるのは「インライン要素」と「テーブルセル」だけ text-ali …

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …