画像の表示・活用 (HTML,CSS,JavaScript)

画像の表示サイズを画面幅(ウインドウ幅)に合うよう自動リサイズしたいウェブページに掲載する画像の表示サイズを、画面幅(ブラウザのウインドウサイズ)に合わせて自動変化させる方法については、記事「ウインドウ幅に合わせて画像サイズを変化させる方法」でご紹介いたしました。下図のように、閲覧者の画面幅がどんな...続きを読む

HTMLの背景画像として写真1枚を全画面に表示する方法解像度の高い写真など「1枚の大きな画像」を、背景画像として全画面(フルスクリーン)に掲載したい場合があります。ブラウザのウインドウサイズに関係なく、1枚の画像が縦横比を維持した状態で必ず画面全体を覆うように広がる下図のような表示です。1枚の背景画...続きを読む

画像をその場で拡大表示するスクリプトは多々あるが、もっと大きくしたい画像をその場で拡大表示するLightbox系スクリプトの表示例小さな画像をクリックすると、ページ移動することなくその場で拡大画像を表示する……というデザインは、方々のウェブサイトで頻繁に使われています。この機能を提供する代表的なスク...続きを読む

高精細ディスプレイには高解像度の画像を表示したいスマートフォンには高精細ディスプレイを搭載した端末も多いiPhoneのRetinaディスプレイなどのように、スマートフォンやタブレットなどのスマートデバイスには、高精細なディスプレイが搭載されています。この高精細ディスプレイでの表示に対応したウェブサイ...続きを読む

太さ1pxの線は、液晶画面の1ドットの幅で描かれる……とは限らない!?外枠は太さ1pxの画像ウェブ上で「太さ1px」の線を引くよう装飾すると、たいていは液晶画面上でも「1ドットの太さ」で線が引かれます。例えば、右図を一般的なPC用液晶画面で表示した場合のように。もし液晶画面のサイズが横幅1,024ド...続きを読む

背景画像は、実は枠線(border)の真下にも描画されている背景画像付きのボックスに(緑色の太い)枠線を付加したところbackground-imageプロパティなどを使ってボックス内に背景画像を掲載しているとき、このボックスにborderプロパティで枠線を引くと、例えば右図のように表示されます。ここ...続きを読む

画像を加工しなくても、CSSだけでトリミング(切り抜き)できる画像の一部分だけをトリミング(切り抜き)して掲載したいCSSの「clip」プロパティを使うと、指定の要素を好きなサイズにトリミング(切り抜き)できます。切り抜きの形は四角形だけですが、任意の部分を自由に切り抜くことができます。img要素に...続きを読む

シンプルなスライドショーではなく、もっと凝った表示効果が欲しい？シンプルなスライドショーでは物足りない？ウェブページ上で次々に表示画像を切り替えていくシンプルなスライドショーの作り方は、記事「複数の画像がふわっと切り替わるスライドショーを作る」などでご紹介致しました。それらの方法で実現できるのは、「...続きを読む

まだ読み込めていない画像の箇所を、読み飛ばされないようにローディング画像の例(これは静止画ですが実際にはアニメーションする画像を使います)画像の読み込みが完了するまでの間、画像が表示される予定の領域に、右図のような「読み込み中」であることを示す「ローディング画像」を表示させてみてはいかがでしょうか。...続きを読む

狭い画面では「メニューバー」は表示しにくい横幅が狭いと、横向きのメニューバーは、はみ出してしまう。閲覧者の画面が広い場合でも狭い場合でも、単一のページで対応できるようにする「レスポンシブ・ウェブデザイン」を採用する際、ナビゲーション機能として掲載している「メニューバー」の扱いに困ることがあります。横...続きを読む