CSSで画像の縦横比を保ったまま大きさを変えて表示する

縦横比を保ったまま画像のサイズを変えて表示する方法です。
例えば、ウェブサイトをPCで閲覧するためのサイズとスマホで閲覧するサイズの2種類をCSSで切り替えてつくる場合、画像のサイズもPCとスマホによって切り替えたいときに、この方法を使います。

CSSで画像のサイズを変更する

横か縦のサイズを明示的に指定した場合、もう一方のサイズを計算しなければならないのは面倒です。
そういった場合は、もう一方のサイズにautoを指定します。

img{
width:300px;
height:auto;
}

widthを%で指定しても同じです。

ウェブページの内容量が少ない場合には、フッターをブラウザの表示領域最下部に表示し、内容量がある場合にはスクロールした最下部に表示する方法です。フッターを画面最下部に表示する HTMLソース <…続きを読む

ウェブサイトにメールアドレスを記載するときに、「xxx@aaa.com」のように直接表記すると、メールアドレスを収集され、スパムメールを送り付けられてしまう可能性が増えてきてしまうため、JavaScr…続きを読む

CSSの設定のみで、内容が少ないページであっても、フッターは最下部に表示され、さらに内容がたくさん書いてある場合には、スクロールした最後にフッターが表示されるようにする方法です。以前にも紹介しました…続きを読む

Fireworks CS6を起動しようとしたら「現在のFireworksユーザー権限では、レジストリ情報を更新することができません。Dreamweaverを併用しての起動と編集機能は、管理者権限でFi…続きを読む

FTPソフトである「FileZilla」を使ってサーバ上のファイルを削除しようとしたときに、「8ビット文字コードへ変換するコマンドに失敗しました」というメッセージが出てしまい、削除できないことがあ…続きを読む

CSSを使ってウェブサイトの画面レイアウトを、スマホ用とPC用とで切り替える方法です。画面の幅によって表示方法を切り替えるスマホを認識するというよりは、画面の横幅が何ピクセル以下か、によって読み込…続きを読む

ウェブサイトをスマホ対応しようとCSSをつくり、いざ確認してみるとAndroidとiPhoneで文字サイズがかなり違う、ということが起こりました。 iPhoneの方がAndroidよりも小さく、iPh…続きを読む

CSS3を使ってテーブルの両端の列の右側はボーダーを表示せず、それ以外のセルの右側にはボーダーを表示したい、という場合には、複数の条件を適用したセレクターを設定する方法です。「～かつ、～」というセレ…続きを読む

GoogleMapにリンクを貼るときに、URLが長くなってしまうのを防ぐ、短縮URLの取得の方法です。まず、GoogleMapを開きます。左上の検索窓に住所を入力して、その住所を検索します（ここで…続きを読む

Googleカレンダーに、別のGoogleアカウントのカレンダーを同期させることはできますが、別のGoogleアカウントで複数設定しているカレンダーをそれぞれ同期させる方法がわからなかったので調べまし…続きを読む

kuuur.netは管理人KUUURが気になった言葉を取り上げて調べ見識を深めるサイトです。

kuuur.netの内容には誤りがあることがあります。kuuur.netの内容を信用した結果損害等を被った場合にKUUURは責任を負うことはできません。この点をご理解の上kuuur.netをご利用ください。内容の訂正などのご意見はお問い合わせからお願いします。

kuuur.netはリンクフリーです。KUUURへの連絡も不要です。ただし次の2点についてご留意ください。(1) フレーム内表示など自分のサイトのコンテンツであるかのような表示はしないでください。(2) リンクしたページのURLは予告なく変更されることがあります。

kuuur.netのコンテンツは他に著作権が存在するものを除きすべてKUUURに帰属します。

CSSで画像のサイズを変更する