ITメモ
HTML
外部Link
【HTML ドキュメント】MDN Web Docs(Mozilla)
「HTML」リファレンス
HTMLメールの作り方「指定キーワード」を検索した「Google検索結果ページ」への「リンク」を作る方法「Google Map」へ「リンク」を作る方法「HTMLタグ」に「マウスアクション」を指定する方法「HTML」で「空白」を表示する方法「HTML」で「タブ(空白)」を表示する方法
「HTML」の基礎知識
「HTML」の書式「HTML」でのコメントの仕方「HTML」での「改行」の仕方「CSS」の使い方「Javascript」の使い方「HTMLタグ」の使い方「HTML」の特殊文字一覧ブラウザやタブに表示される小さなアイコン「favicon(ファビコン)」の作り方他のページに移行する「リンク」の作り方 表の作り方Webページに画像の埋め込む方法動画を埋め込む方法音声ファイルを埋め込む方法地図を埋め込む方法入力フォームの作り方
「HTML」タグ
【DOCTYPE】「HTML」の「DOCTYPE宣言」【html】すべての「HTMLタグ」の親要素「html」タグ【head】「Webページ」の付属情報を設定する場所【meta】「Webページ」の設定をする「HTMLタグ」【title】「Webページ」の「タイトル」を設定する「HTMLタグ」【link】外部ファイルとの関係定義や読み込みをする方法【script】「Javascript」を実行する方法【div】レイアウトの枠として使う方法【p】文章の段落ごとに区分する方法【li】リスト(箇条書き)で表示をする方法【table】表の作り方【br】「HTML」での「改行」の仕方【a】リンクの作り方【h1-h6】Webページの見出しの設定方法【img】画像を表示する方法【span】文字列の一部を装飾する方法【ruby】「ルビ」をふるための要素





【HTML】Webページに画像の埋め込む方法

【HTML】
Webページに画像の埋め込む方法




「Webページ」に、
「画像」を埋め込む方法をまとめています。


「HTML」では、
基本的に、画像を埋め込むには、
「HTMLタグ」の「imgタグ」を利用して、
Webページに「写真」「イラスト」「グラフ」などの
イメージ画像を埋め込むことができる。

「Javascript」などを使用し、
「画像」を途中で変えたり、
後から追加することも可能です。


「CSS」では、
「背景画像」として「画像」を表示させることも可能です。




詳しくは、
下記をご参照ください。



INDEX







画像を埋め込む「img」タグの使い方


img画像ファイルを指定
figure本筋とは直接には関係しない図表やソースコードなどを記述
figcaptionfigure要素のキャプションを指定。figureタグ内の最初か最後に記入。


「img」タグの書式


画像を埋め込む「img」タグの書式はシンプルです。
一番簡単な「img」タグコードは、下記のようになります。
<img src="画像URL" width=140 height=100>


属性

src 画像のURLを記述するための属性です。
URL指定を間違えると画像は表示されません。
「img」タグでは、この「src」属性だけでも画像が表示されます。

URLの指定方法は、「相対URL」と「絶対URL」のどちらでも指定できます。
絶対URLは、「http://○○.com/○○/○○.jpg」という記述方法。
相対URLは、「./○○/○○.jpg」という記述方法。
width 画像の横幅指定をする属性。
数字のみでの指定も可能だが、「100px」と単位指定でも可能。
数字以外の文字が含まれる場合は、「width="100px"」というように、「"」で囲む必要がある。
height 画像の縦幅指定をする属性。
数字のみでの指定も可能だが、「100px」と単位指定でも可能。
数字以外の文字が含まれる場合は、「width="100px"」というように、「"」で囲む必要がある。



サンプルコード

HTMLコード

<img src="picture123.jpg" width=140 height=100>
<img src="picture123.jpg" width="140px" height="100px">


HTMLコード

<figure>
<figcaption>Sample Photo</figcaption>
<img src="picture123.jpg" width=140 height=100>
</figure>



Back



画像を並べたときのスペースを消す方法


HTMLコードで、改行をして画像を一列に並べると、画像の間にスペースが入る。
そのスペースを除去する方法はいくつかある。


画像を並べたときのスペースを消す方法
・HTMLコードで、画像タグに改行を加えないでコーディングする。
・改行をコメントアウト「<!-- 改行 -->」で囲む。
・CSSで「display:table-cell; 」を使う。


一番よく利用するのは、「display:table-cell;」を指定するのが簡単。


Back



マウスのアクションで、簡単に画像の写真を変更させる方法


ホームページを作っていると、マウスの動作によって画像を変更させたりしたい時があります。
他のページへのリンクボタンなどが代表的でしょう。

そんなとき、一番簡単な方法の一つです。
HTMLコードは、凄く簡単です。

サンプルコード
<img src="./最初の画像ファイル名.jpg" onMouseOver="this.src='./マウスを乗せたときに表示する画像ファイル名.jpg'" onMouseOut="this.src='./最初の画像ファイル名.jpg'">



画像を変更させるのは、「onMouseOver="this.src='ファイルURL'"」の部分で、画像を元に戻すのは、「onMouseOut="this.src='ファイルURL'"」の部分です。

  • 「onMouseOver」=マウスを対象の上にかぶせた時にする行動を記述する属性。
  • 「onMouseOut」=マウスを対象の上からはずした時にする行動を記述する属性。
  • 「this.src='ファイルURL'」=画像のURLを変更するというコード。



「this.src」の意味
  • 「this」=属性が記述されているタグ(要素)
  • 「src」=画像のURLを指定する属性



「”(ダブルクォート)」と「’(シングルクォート)」
「onMouseOver="this.src='ファイルURL'"」で、「”(ダブルクォート)」と「’(シングルクォート)」の二つが利用されています。
両方とも「”(ダブルクォート)」の場合、「onMouseOver」と「this.src」の区切りである「”(ダブルクォート)」が混在してしまいます。
それを避けるために、「”(ダブルクォート)」の中で、「”(ダブルクォート)」を使いたい場合、「’(シングルクォート)」を利用します。
逆でも記述可能です。
「’(シングルクォート)」の中で、「”(ダブルクォート)」を使うことで混在を防ぐことができます。


Back

画像を先読み込みする方法


大きな画像を表示するなどをするには、少し時間がかかります。
なので、前もって、画像を「preload(先読み込み)」しておくと、
画像の表示や切り替えがスムーズになる。
表示のズレなどの防止にもなる。


画像を先読み込みする書式

<html>
<head>
<link rel="preload" href="../Images/BackgroundImages/BG_001.jpg" as="image">
<link rel="preload" href="../Images/BackgroundImages/BG_002.jpg" as="image">
<head>
<body>
</body>
</html>


Back



【CSS】テーブル以外のブロック要素で画像を中央配置する方法


「<div>」「<p>」などのブロック要素で、画像などのインライン要素を縦横ともに中央に配置する方法がある。

CSSによって、「display:table-cell;」を指定することで、テーブル要素と同じ機能をブロック要素に与え、
「vertical-align:middle;」を有効化することができる。
非常にシンプルなので、使える手法。




記述例
HTML
<div class="ImageDisplay">

<img src="画像のURL"/>

</div>


CSS
.ImageDisplay{
display:table-sell;
text-align:center;
vertical-align:middle;
}


Back



【CSS】画像を切り替える方法


リンク作成で使う「a」タグを使うことで、CSSで画像を切り替えることができる。
マウスを重ねた時に背景画像を切り替えることで、表示される画像を変更する方法。

CSSだけで、画像を切り替えることができるので、簡単に利用することができる。
画像を切り替える方法の一つとしてメモ。


CSSコードの書き方


未訪問のリンクlink { color: #00ff00; }
訪問済みのリンクa:visited { color: #00ff00; }
マウスでクリック中など、アクティブな要素a:active { color: #00ff00; }
マウスが乗せられている要素a:hover { color: #00ff00; }
一括指定a:link, a:visited, a:active { color: #00ff00; }
ID名での一括指定ID名:link, ID名:visited, ID名:active { color: #00ff00; }
クラス名での一括指定クラス名:link, クラス名:visited, クラス名:active { color: #00ff00; }


画像を切り替えるには、
「未訪問」「訪問済み」と「アクティブ(クリック中)」「マウスオーバー(マウスが重なっている)」の背景画像を変えることで、
画像を切り替える。


記述例
.クラス名:link, .クラス名:visited{
background-image: 通常表示の画像url(画像のパス);
}

.クラス名:active, .クラス名:hover{
background-image: 切換後の画像url(画像のパス);
}


記述例だけで、マウスを重ねるだけで、画像が変わりますが、
縦横のサイズなどの設定も忘れずに指定してください。

画像が切り替わらないとき、表示されない時は、URLの指定が間違っていることが多いです。
画像ファイルの場所を確認して正確にURLを指定してください。



Back



【CSS】画像の角度を替える方法


画像に角度をつけて表示したいときに、CSSで指定して画像に角度をつけることができる。
CSS3からの機能らしく、古いバージョンのブラウザなどには対応していないので注意。

画像は、少し角度をつけるだけでレイアウトの雰囲気が変わる。
以前では、画像を加工して角度をつけたり、フレームをつけたりしていたが、
簡単なレイアウト装飾は、CSSでもできるようになってきている。



画像を回転させるCSSプロパティ
「角度」の指定には、単位「deg」を利用して数値で指定する。
単位の指定方法は、「角度deb」「180deb」と指定する。


項目CSSプロパティ
CSS3の書き方 transform: rotate( 角度deg );
transform: rotate( 90deg );
2D回転 transform: rotate( 角度deg );
transform: rotate( 180deg );
X軸回転 transform: rotateX( 角度deg );
transform: rotateX( 180deg );
Y軸回転 transform: rotateY( 角度deg );
transform: rotateY( 180deg );
Z軸回転 transform: rotateZ( 角度deg );
transform: rotateZ( 60deg );
基準点を指定する方法 左上端を基準にして回転するように指定
transform-origin: left top;
インライン要素に指定する場合 インライン要素に適用する場合、インライン要素を「inline-block」にする。
display: inline-block;



ブラウザごとの記述
CSS3に対応しておらず、ブラウザ独自に記述方法が決まっている場合がある。
その場合の記述方法は、各ブラウザで異なってくるので、記述書を確認するなどして、
独自の記述方法を確認する必要がある。
CSS3になって時間が経過しているので、最新のブラウザバージョンでは利用可能となっている。

ブラウザ記述方法
CSS3の書き方transform: rotate( 90deg );
Firefox用-moz-transform: rotate( 90deg );
Chrome・Safari・新しいOpera-webkit-transform: rotate( 90deg );
古いOpera用-o-transform: rotate( 90deg );
IE9用-ms-transform: rotate( 90deg );


Back



【CSS】画像間の隙間をなくす方法


画像間の隙間とは

画像を並べて記述すると、画像と画像の間に隙間ができることがある。
その時の解決方法が、いくつかある。

ブラウザによっては、まったく機能しなかったりするので注意。



画像間の隙間をなくす方法


一覧
・タグを改行せず、一行に並べる。
・タグの間(改行)をコメントタグで囲う。
・タグを閉じる「>」前で改行して、次の行に移行する。
・親要素に「font-size: 0;」に適用する。
・「display:table-cell;」を適用して、左づめにする。(IEでは適用不可の様子)
・「display: inline;」を適用する。
・「float: left;」を適用して、画像を詰める。



Back



【CSS】画像にテキストを回り込ませる方法


画像の次に、テキストを入力すると、画像の下位置の横からテキストが表示される。
画像の上からテキストを流し込みたい場合に、画像にテキストを回り込ませる方法が必要になる。


画像にテキストを回り込ませる方法
・「img」タグの「align」属性を使う。
・「css」の「float」を使う。


「img」タグの「align」属性を使う


<img src="画像のURL" align="left" />
<img src="画像のURL" align="right" />
<img src="画像のURL" align="all" />


alignの値
left画像を左に寄せ、画像の右側にテキストを回り込ませる。
right画像を右側に寄せ、画像の左側にテキストを回り混ませる。
all「all」による回り込み解除。画像が左右のどちらにあっても、「all」の指定によって回り込みは解除される。



「css」の「float」を使う。


CSSの指定でも、画像の横にテキストを回り込ませることができる。

<img src="画像のURL" style="float:left;" />
<img src="画像のURL" style="float:right;" />

回り込みの解除
<img src="画像のURL" style="clear:left;" />
<img src="画像のURL" style="clear:right;" />



Back



【CSS】画像を背景に使う方法


画像を背景にするには、CSSの「background」プロパティを使って設定する。
「background」プロパティで、他の設定と一緒に設定する方法と、 「background-image」プロパティで、画像のURLを設定する方法がある。
「background-image」プロパティで設定した場合は、 他の背景設定も個別で設定する必要がある。

  • background: 値; --- 背景色や背景画像を指定。
  • background-color: 値; --- 背景の色を指定。
  • background-image: url(画像のパス); --- 背景画像を指定。
  • background-repeat: 値; --- 背景画像のリピート設定。
  • background-attachment: 値; --- スクロールバーがある場合の背景画像の対応を設定。
  • background-position: 縦,横; --- 背景画像を表示する際の基準位置を指定。
  • background-clip: 値; --- 背景画像を表示する領域を指定。
  • background-size: 横 縦; --- 背景画像のサイズを指定。
「background」で、一括で指定することも可能ですが、個別に指定することも可能。


記述例:

background: #cc9999 url(back.gif) no-repeat 80% 80%;

background:
url(../image/back.gif) no-repeat top right,
url(../image/back.gif) no-repeat top left,
url(../image/back.gif) no-repeat bottom left,
url(../image/back.gif) no-repeat bottom right,
#cc9999;


background-color: #cc9999;
background-image: url(../image/back.gif);
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-repeat: space;
background-repeat: round;


background-attachment: fixed;


background-position: left top; /* 左上 */
background-position: 20px 30px; /* 左上から右に20px, 下に30px */
background-position: left; /* left center と同意 */
background-position: top; /* center top と同意 */
background-position: center; /* center center と同意 */
background-position: 80% 80%; /* center center と同意 */
background-position: left 20%; /* left center と同意 */


background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;


-moz-background-size: auto;
-webkit-background-size: auto;
-o-background-size: auto;
background-size: auto;
-moz-background-size: 50px;
-webkit-background-size: 50px;
-o-background-size: 50px;
background-size: 30px;
-moz-background-size: 80% 80%;
-webkit-background-size: 80% 80%;
-o-background-size: 80% 80%;
background-size: 80% 80%;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
-moz-background-size: contain;
-webkit-background-size: contain;
-o-background-size: contain;
background-size: contain;



「background」の属性

属性名説明
background: 値; color,image,repeat,attachment,position,origin は、順不同で1つ以上指定可能。
color = 背景色を指定。
image = 背景画像を指定。
repeat = 背景画像の繰り返しを指定。
attachment = 背景画像の貼り付け方法を指定。
position = 背景画像の位置を指定。
size = 背景画像のサイズを指定。
origin = 背景画像表示の基準位置を指定。
clip = 背景画像の表示領域を指定。
背景色や背景画像を指定。
background-color: 値; 値の設定は、#000000~#ffffffの間で値を指定。
0~f間での16進法で指定するようになっています。
6桁表示のうち、
  • 左の2桁=赤
  • 真ん中の2桁=緑
  • 右の2桁=青
と赤・緑・青のRGBでの指定方法が主流です。
redやGreenなどでも指定可能です。

指定方法の一覧
#RGB R=赤 --- 「0-255」で指定。
G=緑 --- 「0-255」で指定。
B=青 --- 「0-255」で指定。
#RRGGBB R=赤 --- 「0-F」16進数で指定。
G=緑 --- 「0-F」16進数で指定。
B=青 --- 「0-F」16進数で指定。
colorName「White」や「black」「red」などの色の名前で指定。
rgb(R, G, B) R=赤 --- 「0-255」で指定。
G=緑 --- 「0-255」で指定。
B=青 --- 「0-255」で指定。
rgba(R, G, B, a) R=赤 --- 「0-255」で指定。
G=緑 --- 「0-255」で指定。
B=青 --- 「0-255」で指定。
a=透明度 --- 「0-100」で指定。
hsl(h, s, l) h=カラー --- 「0-360」で指定。
s=彩度 --- 「0-100%」で指定。
l=明度 --- 「0-100%」で指定。
hsla(h, s, l, a) h=カラー --- 「0-360」で指定。
s=彩度 --- 「0-100%」で指定。
l=明度 --- 「0-100%」で指定。
a=透明度 --- 「0-100%」で指定。
transparent
currentColor
背景の色を指定
background-image: url(画像のパス); 画像のURL指定は、絶対パスと相対パスで指定可能です。
絶対パスは、http://○○.com/images/sample.jpgと言うように指定します。
相対パスは、現在実行されているHTMLドキュメントを中心に考えます。
./images/sample.jpgと入力した場合
現在のHTMLドキュメントと同じディレクトリにあるimagesディレクトリの中にあるsample.jpgという画像ファイルを指定しています。

例:
background-image: url(./images/sample.jpg);
背景画像を指定
background-repeat: 値; repeat = 背景画像を繰り返し表示。
repeat-x = x軸だけ背景画像を繰り返し表示。
repeat-y = y軸だけ背景画像を繰り返し表示。
no-repeat = 背景画像を繰り返さない。
space = 表示エリアのサイズによって、画像間にスペースを入れて調整してリピート。
round = 表示エリアのサイズによって、画像を縮小調整してリピート。
背景画像のリピート設定
background-attachment: 値; scroll = 親要素のスクロールではスクロールしない。画面のスクロールにはスクロールする。
fixed = 親要素のスクロールではスクロールしない。画面のスクロールにもスクロールしない。
local = 親要素と一緒に背景画像もスクロール。画面とも一緒にスクロールする。
inherit = 親要素の値を継承。
スクロールバーがある場合の背景画像の対応を設定。
background-position: 縦,横; center = 中央に表示。
left = 左側に表示。
right = 右側に表示。
top = 上部に表示。
bottom = 下部に表示。
% = 表示領域に対する割合で指定。
数値 = 上端、左端等からの距離で指定。
横方向位置、縦方向位置の順番で表示。
省略 = center
背景画像を表示する際の基準位置を指定。
background-clip: 値; border-box = ボーダーの外側まで表示。
padding-box = パディングの外側(ボーダーの内側)まで表示。
content-box = コンテンツの外側(パディングの内側)まで表示。
背景画像を表示する領域を指定。
background-size: 横 縦; auto = 自動計算。
数値 = 長さを指定。
% = 表示領域に対する割合で指定。
cover = 要素領域をすべて埋め尽くす大きさで表示。
contain = 可視領域に表示される最大サイズで表示。

数値,%,autoを1つのみ指定すると横方向に適用される。
ひとつのみ記述した場合は、横方向に適用され、縦方向=auto。
背景画像のサイズを指定。


Back





Web制作に使う「画像」の入手方法


Web制作に使う「画像」を入手する方法はいくつかあります。

・自分で写真を撮る
・自分でイラストを描く
・ストックフォトで購入する
・画像フリーサイトで無料でダウンロードする
・SNSなどの画像埋め込みサービスを使う
・市区町村や観光サイトが提供する画像を使用する

などの方法を利用して、
Webで使用する画像を調達します。
画像の数が膨大なので、
少しずつ、自分が使いやすい方法を選ぶのが、
1番効率が良いと思います。



ストックフォトで画像を購入するには

ストックフォトは、
画像を販売しているネット販売サイトです。
日本のサイトから海外のサイトまで、
色々なストックフォトサイトがあります。
使い勝手の良さや、画像の取扱数などから、
初心者の方にも使いやすいのは、

Adobe Stock
カナダ
デザインソフトメーカー
PIXTA
日本

の2社をまず利用すれば、
十分だと思います。
「Adobe Stock」は、
デザインソフトウェアを作成していて「Photoshop」「Illustrator」など、
プロが使用するデザイン系ソフトウェアのトップブランド「Adobe」社が 運営しているストックフォトサイトなので、 安全で、信頼性もあり、画像保有数も膨大です。
個人的には1番使いやすくなっています。


「PIXTA」は、
日本企業が運営している日本のストックフォトサイトです。
日本で1番有名なストックフォトの一つで、
安心して使えるのでおすすめです。
サイト機能もしっかりしていて、
使いやすいと思います。



購入方法は、
ストックフォトサイトそれぞれで、
独自の料金体系を用意しているので、
各サイトでご確認ください。
上記のストックフォトサイトは、
日本語で説明されているので、
わかりやすいと思います。


Back