ホームページとブログの教室、第6回は画像タグとリンクタグ、改行を組み合わせて自由に画像を配置することを学びます。
配布資料
画像タグ徹底トレーニング
このように入力すると、画像がそのサイズのまま表示されます。
上記の例は、『img』フォルダの中に『rose1.jpg』が入っている場合です。
コピペで書き替えると簡単
似たようなタグの場合は、タグをコピペして、変更部分だけ書き換えると楽です。
マウスドラッグ等で青色に反転させ『Ctrl＋C』でコピー
『Ctrl＋V』で貼り付け
画像のサイズを変えてみる
width（ワイズ＝幅）とheight（ハイト＝高さ）の数字を変えて、サイズを変えてみましょう。
両方とも『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>の位置はどこでもよく、メモ帳にどれだけ改行があっても、ブラウザでは無視されます。
画像サイズの確認方法
いろいろありますが、一番簡単なのはカーソルをファイルのところに持っていくと自然に表示されます。
拡大画像を開くリンクを作る
画像タグをリンクタグで囲むことができます。
リンク先を、画像ファイルにすると、元の画像が画面全体に表示されます。
タグの例
<img src=”./img/rose1.jpg” alt=”バラの画像” width=”150″ height=”150″>
</a>
様々な変更にチャレンジ
画像を増やしたり、サイズを変えたり、改行したり、リンクをさせたり。
さまざまな変更を実際にやってみました。
これができることにより、ブログなどでも自由に画像を貼ることができるようになります。
画像の並びは、ブラウザの幅によっても影響されます。
改行していなくても、ブラウザの幅が狭いと強制的に画像は改行されます。
記事を右に回り込ませたり、画像を中央によせたりするのは、画像タグではない部分で設定しますので、もうすこしガマンしてください。
パソコンの基礎知識
以下の用語について説明しました
- ＯＳ：パソコンの基本システム
- アプリケーションソフト：なぜソフトか、機械がハードだから
- ファイル：コンピューター内のデータもしくはそのまとまり
- フォルダ：実際の紙でいうクリアフォルダーのようなもの
まとめ
- a タグと img タグをつかって、画像とリンクが自在に作れるかどうか
- br タグによる改行
- メモ帳での改行は、ブラウザでは無視されることを理解する
