バナーとはウェブページの広告画像にアンカーリンクを設定するボタンです。クリックすることで紹介したいコンテンツページや別のサイトへ画面遷移します。視覚的な画像で訴求することでユーザーへの興味を持たせる意味合いが強い要素です。lesson13ではテキストにリンクを指定する方法を説明しましたが、今回は画像にアンカーリンクを設定する「バナー」についてお伝えしたいと思います。
こんにちは！あーるくんです。ヾ ^_^♪
Adobe提携校でWEBクリエイター講師を２年ほどしていました。しっかりと学べるように記事を書いていくので閲覧よろしくお願い致します。
もくじwebデザイン独学【無料】ホームページのバナー画像にリンクを指定する方法
バナーって、ウェブサイトでよく見かけるよね！
私もデザイン習ってみたいわ〜＾＾
バナー（banner）作成について
バナーの画像作成は主にAdobe製品の Photoshop（フォトショップ）やIllustrator（イラストレーター）で作成されていますが、最近ではスマートフォンアプリが充実しているのでスマホアプリで作成することも可能です。
バナーをSAMPLEで作ってみました。
※ クリックすると「ホームページの作り方が学べる｜目次」ページを開くようにしています。
WEB制作などの現場ではAdobe製品を利用している事が多いので、WEBデザイナーを目指す方はAdobe製品の使い方を学ぶことをおすすめします！
Adobe製品を学べるスクールの紹介
【1週間無料体験あり】TechAcademyのオンラインで学べるWEBスクールです。
→ → Webデザインコース 【無料体験あり】TechAcademy → Webデザインコース
画像にリンクを貼る方法
前回は画像の呼び出し方を説明しましたが、imgタグの記述にaタグをサンドイッチのように挟むだけです。
| <a href="リンク先"><img src="画像のファイルパス" alt="代替テキスト（画像の説明）"></a> |
このように記述することでクリックすると「指定のリンク先へ」画面遷移するようになります。
新しいWindowで開く記述例
| <a target="_blank" href="リンク先"><img src="画像のファイルパス" alt="代替テキスト（画像の説明）"></a> |
新しいウインドウで開く設定は target（ターゲット）属性のblank（ブランク）を追記すると可能です。
HTMLファイルにバナーリンクを設定しよう！
それでは実際にhtmlファイルで確認してみましょう。先程のSAMPLEバナーとHTMLファイルの素材を用意しました。
lesson16の練習用ファイル DL※ 圧縮したファイルがダウンロードできたらzipファイルをダブルクリックで解凍しましょう。
ダウンロードしたHTMLファイルはVisual Studio Codeで確認してください。Lesson6で紹介しています。
解凍方法が分からない方はこちら
Visual Studio Codeの紹介
まとめ
バナー画像にアンカーリンクを設定する方法は、これまでの応用知識で記述することができました。HTMLで作るウェブサイトは意味が理解できると、それほど難しいプログラム言語ではありません。ホームページが作成できるように頑張りましょう！