画像の表示・活用 (HTML,CSS,JavaScript)(2ページ目)

画像が多い縦長のページでは、1画面目の表示完了にも時間がかかる場合がある画面外の画像を読み込む処理のせいで、画面内の画像(右側の段)の表示が遅れてしまう例。画像をたくさん掲載しているページでは、読み込み完了までに長い時間がかかることがあります。このとき、特に右図のように「複数段を用いたレイアウト」を...続きを読む

フェイドインとフェイドアウトを繰り返して、ふわっと画像が切り替わるスライドショーを掲載次の画像がフェイドインしてくる形で「ふわっと」切り替わるスライドショーページの上部に表示されているバナー画像が、スライドショーの形で繰り返し切り替わっていくデザインを採用したウェブサイトをよく見かけます。スライドシ...続きを読む

星画像を使ってレベル（ランク）を表示お勧め度合いや面白さ度合いなどを表現する方法として、星の数でレベル（ランク）を表す方法がよく使われます。例えば以下のような感じです。▲星の数でレベル（ランク）を表現このような表示を、「星画像を5つ並べる」ことで実現すると、少々面倒です。img要素を5つ並べるとHT...続きを読む

代替文字は代替以外の用途にも使われるウェブページ上に画像を掲載する場合は、何らかの事情で画像が読み込まれなかった場合のために、「代替文字」を記述しておけるようになっています。例えば以下のように記述します。<imgsrc="ファイル名"width="幅"height="高さ"alt="代替文字">この...続きを読む

円グラフを作成してくれるサービスを使うウェブ上で円グラフを表示させたいと思ったことはありませんか？今回は、以下のような円グラフを簡単に作成・表示させる方法をご紹介いたします。▲作成できる円グラフの例（※3次元の円グラフで、項目の色を個別に指定）■面倒な方法：ウェブ上に円グラフを表示させたい場合、Ex...続きを読む

画像に影を加えるには写真などの画像に「影」を加えて表示させたい場合、どうしますか？（左）画像単独の表示（右）画像に影を加えたところPhotoshopなどの画像加工ソフトを使って影を加える方法もありますが、たくさんの写真に影を付けたい場合にはとても手間がかかってしまいます。そこで今回は、画像を直接加工...続きを読む

画像をHTMLファイルそのものに埋め込むこともできる画像はHTMLとは別ファイルウェブページ内に画像を表示する際、一般的にはHTMLファイルと画像ファイルは別々に存在します。例えば、index.htmlファイル内に記述されたHTMLソースから画像としてimage.pngファイルが指定されている場合は...続きを読む

画像クリックで拡大表示されるJavaScriptが便利HTML内にたくさんの写真や画像を掲載するアルバムページなどでは、最初にサムネイル画像（縮小画像）だけを並べておき、閲覧者がそれをクリックしたりタップしたりした際にだけ拡大画像を表示するデザインがよく使われています。ウェブページ上で拡大画像を表示...続きを読む

角の丸い「タブ」デザインを、HTMLとCSSで(画像なしで)作成するHTMLとCSSで、上側の角を丸くした「タブ」を作るリンクをCSS(スタイルシート)で装飾して、「角の丸いタブ」に見えるデザインを作ってみましょう。単純な長方形よりも、上側の角を丸くしている方が「タブ」らしく見え、視覚的に分かりやす...続きを読む

前回は、ウェブページの上端にリボンを付ける方法をご紹介いたしました。今回は、そのリボンをリンクにして、クリック可能なリボンを作ってみましょう。【前回の記事】「ページの左上や右上に「リボン」を掛ける」リボン部分をクリック可能にする前回ご紹介した方法は、ページの上端にリボンを配置するだけでした。リボンに...続きを読む