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

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

配布資料

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

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

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

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

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

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

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

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

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

↓表示例

改行は＜br＞

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

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

画像サイズの確認方法

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

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

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

タグの例

様々な変更にチャレンジ

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

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

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

パソコンの基礎知識

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

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

まとめ

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