HTML&CSSでWebサイトを作ってみよう!

リンクのマークアップ

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「a」タグによるリンクをマークアップしておきましょう。
講師:
07:05

字幕

このレッスンではリンクを設定する為にa タグのマークアップを学んでいきます。それでは、レッスンフォルダーのsite フォルダーの中からindex.html をブラウザで見てみましょう。ブラウザで見るとこのようにサイトの完成図が出ますがマウスカーソルが当たってこのように手のカーソル、ポインターのカーソルになる所がa タグによるリンクが設定されている所になっています。実はトップのこのロゴなどもトップページに戻るためのリンクを設定していたりします。そしてグローバルナビゲーション、そしてスクロールをしてこの各コンテンツページへの見出しのリンクそして、フッターにあるフッターのリンクが設定されています。それではフォルダーの中からbegin のフォルダーをSublime Text に落としてファイルを開き、index.html をダブルクリックで展開、開いておきます。そうしましたら、リンクが設定されているエリアとしてh1 のロゴの部分ですね。この大見出しの方をリンクで装飾をしていきますが< a そして既に Sublime 上でa タグが選ばれているようですのでこのまま、Enter を押してしまうとこのようにa タグが1セット入るようになっています。 ハイパーリファレンスのhref 属性もこの様に設定がされていますので後はリンク先を設定すればいいだけです。今回は、トップページに戻るリンクですのでindex.html といれておけば大丈夫です。ただこのままですとa タグが開始してすぐにa タグが閉じてしまっていますのでこちらは切り取ってテキストの後ろの方に戻しておきましょう。そして上書き保存をしてこの html を右クリックからOpen in Browser で開いてみましょう。そうしますと、リンクを示す色に変わっていて下線がついているのはやはりブラウザの初期設定の装飾になっています。では、同様にリンクを設定していきましょう。Sublime Text に戻りまして「お問い合わせ」や「サイトマップ」にもリンクを設定しておきます。a タグを作ってそして今度は# の記号を打ちましょう。これはまだリンク先のファイル名が決まっていないときなどに仮で設定するためのリンクですが、通常はファイル名やディレクトリの構成つまり、フォルダー名などが完全に決まってからコーディングするのがお勧めです。今回は、この仮のリンクを使っていきたいと思います。そうしましたら、忘れないうちに終了タグを切り取ってこのようにお問い合わせを包んでそして、サイトマップも同様ですのでこの仮の方の開始タグをサイトマップの頭に入れて終了タグもコピーしていれておきましょう。 そして、「HOME」 と「企業情報」については既にリンクがありますのでそちらは設定しておきたいと思います。ホームに関してはindex.html なのでh1 と同様のリンク情報を入れてa はこちらで閉じておきます。さて企業情報もこのようにペーストをしてa タグを閉じておくのですが企業情報はcompany/index.html としたいと思っておりますのでcompany フォルダの中のindex.html と先にリンクを設定しておきます。そして、「サービス」などはまだ存在しないリンクですので仮のリンクをコピーしてきてこの様にペーストでa の閉じタグもコピーしてペーストで上手く効率化を図りながら設定していきましょう。今度は、企業情報やサービスの見出しエリアのリンクです。こちらも a タグを作ってここは company ですね。企業情報ですね company の / でフォルダーを表してindex.html で company のページに飛ぶリンクを作って閉じの a タグは small の後ろで閉じるようにしておきます。そして、サービスなどはまだリンクが存在しませんのでこちらも仮のリンクをコピー&ペーストで挿入していきます。 閉じタグの方もこのようにsmall の後ろでa タグを閉じておきます。そして、フッターのリンク情報も設定しておきましょう。HOME は index.html でした。そして、終了タグは切り取ってHOME の後ろに持っていっておきます。そして、企業情報はこの HOME の開始タグをコピーしてフォルダー名の company/ と入れておけば大丈夫ですね。ただ、a タグの閉じ忘れには気を付けましょう。必ず開始タグと終了タグが1セットです。そして、サービスこちらはまだ存在しないページですので仮のリンクを上の方からコピーしてそれぞれ頭の方に挿入をしておきます。そして、終了タグを必ず忘れないように各文字の後ろでペーストをして挿入をしていきます。そうしましたら、上書き保存をしてブラウザにフォーカスして更新。そうしますと、既に表示したことのあるトップページは紫色にリンクが変わっていて後は基本的にはブルーで下線が引かれている部分がリンクという扱いになっています。この装飾はスタイルシートで装飾をしますので今はデフォルトのこの色で構いません。このレッスンでは、a タグによるマークアップを学びました。

HTML&CSSでWebサイトを作ってみよう!

HTMLとCSSについての断片的な知識だけではウェブサイトを構築することはなかなか難しいでしょう。そこでこのコースでは、架空のサイトを実際に構築しながら、シチュエーションに合わせたHTMLとCSSの使い方について学んでいきます。実際のWeb制作の現場でどのようにHTMLとCSSが使われているかを確認しながら、実践的なスキルを習得しましょう。

3時間28分 (31 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年03月19日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。