HTML実践学習5 メインイメージ

ITリテラシー学習
ITリテラシー学習

Webサイトに表示するメインイメージのテキストの入力の仕方について実際に練習しながら説明します。

img要素

img要素は画像を表示させる要素です。主にsrc属性と組み合わせてパスを指定します。srcとはsourceの略になります。またalt属性を使用することで画像が表示されない場合に表示させるテキストを記述できます。img要素には閉じタグは不要です。

画像を表示させましょう

(1)下記の画像を右クリックから「別名で画像を保存」を選択してダウンロードしてください。ファイル名はtop.jpgとしてください。

(2)フォルダの整理を行いましょう。「portofolio」という名称でフォルダを新規制作して、index.htmlをフォルダの中に入れてください。さらにportofolioフォルダの中に「asset」フォルダを制作し、assetフォルダの中に「img」フォルダを作ってください。最後にimgフォルダの中にtop.jpgを入れてください。下記のような構造になっていれば問題ありません。

#windowsの場合

(3)index.htmlを開いてheader要素の下に<div>要素を記述しましょう。また今まで記述していた3つのdiv要素のグループ(green_areaからblue_areaまで)は不要なため削除してください。

 <!DOCTYPE html>
 <html>
 
 <head>
 <title>Web Design, Web Director, Marketer | Menter</title>
 <meta name="description" content="Menterのポートフォリオサイトです。">
 <meta name="keywords" content="WEBサイト,WEB,制作,デザイン,ディレクション,デジタルマーケティング">
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>

<body>

<header>
<h1>Menter</h1>
<p>Web Design, Web Director, Marketer</p>

<nav>
<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>

</header>

<div>
</div>

<footer>
<p>&copy; Menter</p>
</footer>

</body>

</html>

(4)画像のパスの指定をします。<img src=”asset/img/top.jpg” alt=”メインイメージ”>をdiv要素の中に記述してください。パスは「/」で区切ることでディレクトリ(フォルダの階層)を指定できます。「asset/img/top.jpg」と記述することで、上記の(2)でまとめたフォルダとファイル(assetフォルダの中 → imgフォルダの中 → top.jpg)を指定しています。パスの詳細は違う講座で別途ご説明しますが、ここでは「/」を使用してディレクトリを指定する、と覚えてください。

 <!DOCTYPE html>
 <html>
 
 <head>
 <title>Web Design, Web Director, Marketer | Menter</title>
 <meta name="description" content="Menterのポートフォリオサイトです。">
 <meta name="keywords" content="WEBサイト,WEB,制作,デザイン,ディレクション,デジタルマーケティング">
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>

<body>

<header>
<h1>Menter</h1>
<p>Web Design, Web Director, Marketer</p>

<nav>
<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>

</header>

<div>
<img src="asset/img/top.jpg" alt="メインイメージ">
</div>

<footer>
<p>&copy; Menter</p>
</footer>

</body>

</html>

このような表示になればOKです。今はまだ横幅を指定していないため、画像が大きすぎてはみ出している状態となっています。

width属性

要素の横幅を指定する属性です。下記のように、index.htmlの画像に対して横幅を指定(width=”960px”)してみましょう。

 <!DOCTYPE html>
 <html>
 
 <head>
 <title>Web Design, Web Director, Marketer | Menter</title>
 <meta name="description" content="Menterのポートフォリオサイトです。">
 <meta name="keywords" content="WEBサイト,WEB,制作,デザイン,ディレクション,デジタルマーケティング">
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>

<body>

<header>
<h1>Menter</h1>
<p>Web Design, Web Director, Marketer</p>

<nav>
<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>

</header>

<div>
<img src="asset/img/top.jpg" alt="メインイメージ" width="960px">
</div>

<footer>
<p>&copy; Menter</p>
</footer>

</body>

</html>

このように画像の横幅が960pxに設定されました。

*HTMLを作成~編集する際にはHTML作成に対応したメモ帳をダウンロードする必要があります。
以下サービスなど参考いただき、ご自身のPC環境へインストールしてください。

#推奨ツール1. Sublime Text
https://www.sublimetext.com/3
#推奨ツール2. Tera Pad

https://tera-net.com/library/tpad.html

POINT

画像はimg要素で表示させることができます。またimg要素はsrc属性やalt属性と組み合わせることができます。

menter_logo

[転職希望者限定]
『MENTER PERSONAL』
3ヶ月間 0円キャンペーン!!

「MENTER PERSONAL (メンターパーソナル)」は、ITスキルを身につけることでこれまで未経験であった職種への転職、副業、独立、スキルアップを支援するサービスです。
転職希望者に限り3ヶ月間サービスを0円でご利用頂けるキャンペーンを実施中!

*教材/リモート面談/転職支援サービスを提供
*キャンペーン適用条件1:WHITE㈱の転職支援サービス利用
*キャンペーン適用条件2:期間内に指定カリキュラムの受講
*適用条件に満たない場合はサービス提供中断させて頂く場合がございます(料金請求することはありませんのでご安心ください)

店舗販売員、飲食業などオフィスワーク未経験から転職も。
サービス詳細や転職成功者のストーリーを‍見る
*お問い合わせ時に「ブログを見た」と備考欄に入力ください。

menter_logo

[法人向け]
文系DX人材育成なら『MENTER』

「うちの会社はITリテラシーが低い...」
「DXを行うには人材育成から始めなくては...」
「自動化やAI理解できる社員が増えたらな...」

デジタルに強い人材育成を行うオンライン学習サービス『MENTER』が、そんなお悩みを解決します!

・マンガで楽しくインターネットについて学習
・ショートカットキーからAIの設計まで
・大手企業の導入事例/成功事例あり
・DX人材育成について相談/事例集請求/無料トライアル/ITリテラシー無料診断可能

MENTER紹介ページを‍見る
お問い合わせは ‍こちら

ITスキルアップ相談室

コメント

タイトルとURLをコピーしました