今すぐ登録して、24,900件以上登録されている、業界エキスパート指導のコースを受講しましょう。
リンクのマークアップ
このレッスンではリンクを設定する為に a タグのマークアップを学んでいきます。 それでは、レッスンフォルダーの site フォルダーの中から index.html を ブラウザで見てみましょう。 ブラウザで見るとこのように サイトの完成図が出ますが マウスカーソルが当たって このように手のカーソル、 ポインターのカーソルになる所が a タグによるリンクが 設定されている所になっています。 実はトップのこのロゴなども トップページに戻るための リンクを設定していたりします。 そしてグローバルナビゲーション、 そしてスクロールをして この各コンテンツページへの 見出しのリンク そして、フッターにあるフッターのリンクが 設定されています。 それではフォルダーの中から begin のフォルダーを Sublime Text に落として ファイルを開き、index.html を ダブルクリックで展開、 開いておきます。 そうしましたら、 リンクが設定されているエリアとして h1 のロゴの部分ですね。 この大見出しの方をリンクで 装飾をしていきますが < a そして既に Sublime 上で a タグが選ばれているようですので このまま、Enter を押してしまうと このように a タグが１セット入るようになっています。 ハイパーリファレンスの href 属性も この様に設定がされていますので 後はリンク先を設定すればいいだけです。 今回は、トップページに戻るリンクですので index.html といれておけば 大丈夫です。 ただこのままですと a タグが開始してすぐに a タグが閉じてしまっていますので こちらは切り取って テキストの後ろの方に戻しておきましょう。 そして上書き保存をして この html を右クリックから Open in Browser で 開いてみましょう。 そうしますと、リンクを示す色に変わっていて 下線がついているのは やはりブラウザの初期設定の 装飾になっています。 では、同様にリンクを設定していきましょう。 Sublime Text に戻りまして 「お問い合わせ」や「サイトマップ」にも リンクを設定しておきます。 a タグを作って そして今度は # の記号を打ちましょう。 これはまだリンク先のファイル名が 決まっていないときなどに…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。