第6回『画像をリンクさせ、改行する』

ホームページとブログの教室、第6回は画像タグとリンクタグ、改行を組み合わせて自由に画像を配置することを学びます。

配布資料

画像タグ徹底トレーニング

このように入力すると、画像がそのサイズのまま表示されます。

<img src=”./img/rose1.jpg” alt=”黄色いバラ”>

上記の例は、『img』フォルダの中に『rose1.jpg』が入っている場合です。

コピペで書き替えると簡単

似たようなタグの場合は、タグをコピペして、変更部分だけ書き換えると楽です。

マウスドラッグ等で青色に反転させ『Ctrl+C』でコピー
『Ctrl+V』で貼り付け

画像のサイズを変えてみる

width(ワイズ=幅)とheight(ハイト=高さ)の数字を変えて、サイズを変えてみましょう。

<img src=”./img/rose1.jpg” alt=”バラの画像” width=”150″ height=”150″>

両方とも『150』ピクセルにして、無理やり正方形にもできます。
※縦横比がかわってしまうので、画像は汚くなります。

↓表示例

改行は<br>

<br> というタグを入れることによって、改行されます。

<img src=”./img/rose1.jpg” alt=”バラの画像” width=”150″ height=”150″>

<br>
<img src=”./img/rose2.jpg” alt=”バラの画像” width=”150″ height=”150″><br>
<img src=”./img/rose3.jpg” alt=”バラの画像” width=”150″ height=”150″>

<br>の位置はどこでもよく、メモ帳にどれだけ改行があっても、ブラウザでは無視されます。

画像サイズの確認方法

いろいろありますが、一番簡単なのはカーソルをファイルのところに持っていくと自然に表示されます。

拡大画像を開くリンクを作る

画像タグをリンクタグで囲むことができます。
リンク先を、画像ファイルにすると、元の画像が画面全体に表示されます。

タグの例

<a href=”./img/rose1.jpg” target=”_blank”>
<img src=”./img/rose1.jpg” alt=”バラの画像” width=”150″ height=”150″>
</a>

様々な変更にチャレンジ

画像を増やしたり、サイズを変えたり、改行したり、リンクをさせたり。
さまざまな変更を実際にやってみました。

これができることにより、ブログなどでも自由に画像を貼ることができるようになります。

画像の並びは、ブラウザの幅によっても影響されます。
改行していなくても、ブラウザの幅が狭いと強制的に画像は改行されます。

右寄せ・中央寄せ・左寄せについて
記事を右に回り込ませたり、画像を中央によせたりするのは、画像タグではない部分で設定しますので、もうすこしガマンしてください。

パソコンの基礎知識

以下の用語について説明しました

  • OS:パソコンの基本システム
  • アプリケーションソフト:なぜソフトか、機械がハードだから
  • ファイル:コンピューター内のデータもしくはそのまとまり
  • フォルダ:実際の紙でいうクリアフォルダーのようなもの

まとめ

  • a タグと img タグをつかって、画像とリンクが自在に作れるかどうか
  • br タグによる改行
  • メモ帳での改行は、ブラウザでは無視されることを理解する
タイトルとURLをコピーしました