こんな人に読んで欲しい！
・別のサイトへ移行する「リンクアイコン」の作り方を知りたい人
こんにちは、「なゆた」です！
Webサイトでは、別のサイトへ移動する「リンクアイコン」がよく見られます。
今回は皆さんに、「CSS」での「リンクアイコン」の作り方をお教えします。
《主な使用タグ》
div・・・HTML及びCSSで表示されるもの全てを統括する要素。
a・・・href 属性で指定されたアドレスへハイパーリンクを作成する要素。
img・・・画像を埋め込む要素。
《HTMLファイル》篇
①まず、HTMLファイルを開き、表示するもの全てを統括する＜div＞タグを入れます。そしてその中にclass属性「box」と入力します。
②＜h1＞タグを使ってタイトルを入力します。
③＜p＞タグと＜a＞タグを入力し、＜a＞タグの中にhref 属性を入れ、属性内にクリックした際に移動するサイトのアドレスを入れます。
④念のため、注目できるように画像も入れておきましょう。＜img＞タグを入れて、タグの中にsrc 属性で画像ファイル名、alt 属性で画像の意味を入れます。幅と高さも一応入れます。そして＜/a＞タグ・＜/p＞タグで締めます。
⑤あとは、＜/div＞タグで締めてOKです！さあ、次は《CSSファイル》と連携です！
《CSSファイル》篇
①まずは＜h1＞タグです。中にタイトル文字のサイズ・マージン・パディングを入れます。
②次は＜img＞タグです。中にパディング・ボーダーを入れます。（「solid」は実線を意味します。基本的にボーダーは「solid」タイプです。）
③その次は＜div＞タグ内のbox クラスです。中に以下の属性を入力します。（「float」は回り込み、「text-align」は行揃えを意味します。）
④最後はbox クラス内の「hover」です。中に背景色を入れます。（「hover」とは、クリックせずにアイコンの上にマウスポインターを合わせることです。）
⑤完成です！このアイコンの画像をクリックすれば、すぐに別のサイトへひとっ飛びです！
いかがでしたか？皆さんも以上の方法を参考にして、何回も何回もリンクアイコンを作って、試してみてくださいね！
以上です、ありがとうございました！
コメント