HTML/CSS2-4 HTMLの基本 画像配置とリンクなど

Posted on

img要素

Webページには画像が表示されているページがたくさんあります。この画像を表示させるにも要素が必要となります。

画像表示のソースコードは<img>要素です。この要素は終了タグがありません。imgはimageの略です。

また、<img>要素は要素内に必要な構成を記述します。

<img src="image.jpg">

このように　imgの後に半角スペースで「src」source（引用元）属性を記入します。src属性の参照元を表示するために　=（半角イコール）と　”…”（ダブルクオーテーション）で参照元を囲み、記入します。属性というのは、要素の役割や性質をもう少し詳しく定義するために加えられる情報です。属性の記述には、属性値（数値やファイル名など）を必ず記述します。また属性と属性値は「=（半角イコール）」でつなぎ、属性値は「”（ダブルクオーテーション）」で囲みます。

image.png
image.png

たとえば上記のような画像があります。右クリックして保存してください。名前がimageになっていなければ、image.pngと変更します。このとき、pngファイルはsample.htmlと同じフォルダ内に保存してください。

Webページに表示させられる画像のファイル形式は3種類で　JPEG形式、PNG形式、GIF形式があります。

画像の形式について
jpg:圧縮率が高い画像形式で、サイズを比較的軽くできるため、ページの読み込み速度を重視する場合に多用します（スマホ、古いバージョンのブラウザにも対応させる場合など）。印刷には仕様する場合はおすすめしません。
png：圧縮率が低い画像形式で、透過画像に対応しています。読み込み速度にかかわらずきれいに表示したい画像や、印刷にも使用する可能性がある場合はこちらを使用します。最新のOSやPCサイトなどをターゲットとする場合、こちらを使用するほうが多いです。
gif：jpgよりもサイズを軽くでき、アイコンやアニメーション、repeatさせる背景画像などはこちらの形式が理想です。ただ、使える色数が少ないため、あまり複雑な画像や写真のような画像には向きません。

それぞれ拡張子は　.jpg　.png　.gif　となります。写真はjpg画像としてアップされていることがほとんどです。透過性を持たせる写真が必要な際などに、png画像を使います。

各画像拡張子ごとに使える色数が変わります。jpg画像とpng画像は1677万色、gif画像は256色となっています。ただし、png画像はjpgと全く同じ画像でもファイル容量が大きくなる場合がありますので、用途を考えて基本は画像はjpg　アイコンはgifまたはpngと覚えておいてください。

<!doctype html>
<html lang="ja">
　<head>
　<meta charset="utf-8">
<!-- エンコードの指定はutf-8 -->
　<title>Web Design Lesson</title>
　</head>
　<body>
　　<nav>
　   <ul>
　    <li>TOP</li>
　    <li>自己紹介</li>
 　   <li>問い合わせ</li>
　   </ul>
　　</nav>


　　<h1>はじめまして！</h1>
　　<img src="image.png">
    <p>はじめまして、〇〇と申します。HTMLを学習しはじめました。</p>

　　<table>
     <tr>
       <td>項目</td>
       <td>詳細</td>
     </tr>
     <tr>
       <td>住所</td>
       <td>〒〇〇〇△△△△　　東京都〇〇区1-2-3</td>
     </tr>
     <tr>
       <td>電話番号</td>
       <td>03-××××‐△△△△</td>
     </tr>
    </table>
　</body>
</html>

いったん保存してWebブラウザで確認してください。

htmlファイルとpngファイルが同じフォルダ内にあれば下記のように表示されます。

sample8

画像の表示には、他にも属性があります。alt属性は代替えテキストを記述する属性です。代替えテキストは通常ブラウザ上には表示されません。一つの要素に複数の属性を記述する場合は、半角スペースで区切って記述します。

<img src="image.png" alt="花の写真png">

これは、花の写真のpngですと画像の説明をalt属性で追記したものです。このほかに画像の表示サイズを示す、width属性（幅の指定）とheight属性（高さの指定）があります。

<img src="image.png" alt="花の写真png" width="150px" height="100px">

先ほど記載したimg要素の部分を上記に書き換えてブラウザで確認してください。画像が小さく表示されます。width属性とheight属性はpx指定だけではなく％指定もできます。この%指定はブラウザ画面の横幅に対しての比率になりますので注意してください。

相対パスと絶対パス

img要素のsrc属性でファイルの名前を指定しましたが、正しくは画像ファイルの場所と名前を記述します。このファイルの場所と名前を「ファイルのパス」といいます。パス（Path）というのは、英語で道筋を示します。HTMLファイルから目的のファイルまでの道筋がファイルパスになります。ファイルパスの指定では、基準となるファイルから見て任意のファイルの場所を指定する相対パスと固定の情報へアクセスする絶対パスがあります。

相対パスの種類

  1. 同じフォルダ内　　ファイルパスは　画像名（ファイル名）のみ
  2. 同じフォルダ内の別フォルダ内　ファイルパスはフォルダ名/（スラッシュ）画像名
  3. 別のフォルダ内（上の階層）　ファイルのパスは../（ドットドットスラッシュ）/画像名
  4. 別のフォルダ内のフォルダ内　ファイルのパスは../フォルダ名/画像名

HTMLのファイルの上の階層のパスの書き方は「../」と覚えておいてください。

Package Diagram (1)

絶対パスとはURLを記載します。外部リンクなどを指定する際使用します。

※同じサイト内のファイル指定は絶対パスではなく、相対パスで記載するようにしましょう。ただし、phpやjspなどプログラムと連携したサイトでは絶対パスを使うことがあります。

リンク要素

Webサイトの本来の目的は他のページとのつながり、リンクです。リンクは<a>要素を使って設定します。「a」はAnchor（アンカー）の略で、リンクの出発点と到達点を指定するタグです。

使い方はリンクにしたい文字を<a>と</a>で囲みます。

次にクリックされたときジャンプするリンク先ページを設定します。リンク先のページのパスをhref属性に記述します。hrefは「Hypertext ReferenceやHyper Reference」の略です。Referenceは参照の意味なので、そのまま略してあるということですね。

img要素のsrc属性と同じような書き方です。　a　と　href　の間は半角スペースで区切ってください。

<a href="sample2.html">自己紹介</a>

例として、自己紹介ページを作成します。まず、sample.htmlをコピーして、sample2.htmlとします。このsample2.htmlを自己紹介のリンク先に指定します。

<!doctype html>
<html lang="ja">
　<head>
　<meta charset="utf-8">
<!-- エンコードの指定はutf-8 -->
　<title>Web Design Lesson</title>
　</head>
　<body>
　　<nav>
　   <ul>
　    <li>TOP</li>
　    <li><a href="sample2.html">自己紹介</a></li>
 　   <li>問い合わせ</li>
　   </ul>
　　</nav>


　　<h1>はじめまして！</h1>
　　<img src="image.png">
    <p>はじめまして、〇〇と申します。HTMLを学習しはじめました。</p>

　　<table>
     <tr>
       <td>項目</td>
       <td>詳細</td>
     </tr>
     <tr>
       <td>住所</td>
       <td>〒〇〇〇△△△△　　東京都〇〇区1-2-3</td>
     </tr>
     <tr>
       <td>電話番号</td>
       <td>03-××××‐△△△△</td>
     </tr>
    </table>
　</body>
</html>

※画像要素にリンクを貼ることもできます。同じようにimg要素をaタグで囲みhref属性を追加します。

リンク要素には「青文字で下線」というブラウザ上でのルールがあるので、リンク要素を追加すると自然とリンクにこの装飾がされます。これはCSSで変更が可能です。

自己紹介をクリックし、sample2.htmlが表示されれば大丈夫です。

その他の要素

<em>強調したい部分</em>

<strong>強調したい部分</strong>

<small>補足情報</small>

<em>要素　emphasis（強調）の略　強調したい部分を開始タグと終了タグで囲みます。

<strong>要素　em要素と同じように強調したい部分に使います。em要素もstrong要素も多用しすぎると文書構造で強調したい部分が薄れてしまう可能性がありますから、段落内で一つくらいの使用をこころがけましょう。

<small>要素　こちらはstrongの逆で文字を小さくし、補足情報を記載するのに使われます。フッターや警告文、ライセンス要件などに使われることが多いです。

<div>要素他

<div>要素は複数の要素を１つのグループにまとめるための要素です。divは「division（分割）」の略で、区切りを意味するブロックレベル要素です。この要素自身が特に意味を持っているわけではなく、他の要素をグループ化（含まれた内容を一つの単位とする）し、文書に構造を付加することで文書の情報的価値を高めます。

id属性や class属性を割り振って構造化したものに対し、CSSでのコーディングやJavaScriptでの実装などを効果的に併用できます。

<span>要素　こちらもdivと同じような要素ですが、主にテキストなどの特定の範囲を囲み、CSSでの装飾などに使われます。

特殊文字の使用方法

Webページ上では、&　や　<　>、”　という文字を表示させたい場合、文字の並び方次第ではプログラムの一部とPCが誤解して、タグとして表示させたり、させなかったりということが起こります。そういった問題が起きないよう、ある文字を特殊文字で表示させます。そのほかにも著作権記号や登録商法記号、商標記号も特殊文字で記載します。

特殊文字一覧（一部）

u7279u6b8au6587u5b57HTML
©&copy;
®&reg;
™&trade;
&&amp;
"&quot;
<&lt;
>&gt;
特殊文字の簡単な表です。

ここでHTMLの基礎は終了です。簡単なことだけ記載しています。より詳しい情報を知りたい場合は、htmlタグ辞典などをキーワード検索し、そちらを参考にされて学習されてください。

HTMLのおさらい
  • 要素は＜＞で囲む
  • 閉じタグがある場合は忘れない
  • 要素を要素で囲む場合もある
  • ブラウザによる装飾もある

 

次回はCSSでのコーディングに入ります。

Scroll Up