はじめてのHTML&CSS入門

リンクを設定する(a)

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLの特徴である、リンクを設定する方法を学びましょう。
講師:
08:29

字幕

このレッスンでは、link タグを学びます。それでは、チャプター 02レッスン 08 のファイルを開きます。現在、画面上では ...final... のファイルを開いています。final のファイルを見ると「国内旅行」という所の文字が押せるようになっています。押してみますと、「国内旅行」というページに移動します。リンク先も japan というフォルダのindex というファイルを参照しています。そして、「HOME に戻る」というボタンをクリックするとjapan というフォルダ名が消えてindex というファイル名になっています。それでは ... begin のファイルをSublime Text で開いて早速、編集をしていきましょう。begin のファイルを開きますとある程度、見出しなどでマークアップされたファイルになっていますが「国内旅行」という部分にはまだリンクの設定はされていません。それではリンクを設定するタグを打ち込みます。<a そして、いったんそして、このままだとリンクがどこまでか分らないですので必ず、リンクの終点で終点の a としておきましょう。これで a タグのマークアップは出来たのですが、まだ、参照先ですね、飛び先が設定されていません。 ですので、飛び先を記述する必要があります。それでは、開始の a タグの内側にカーソルを入れて半角スペースそして hrefそして =そして " を2つ打ちます。Sublime Text では " を1回打つと、自動的に2つ目の " も入ってくれますので、必ず画面を見て" が1組あればそのまま続けていただいて構いません。それでは href の中は飛び先です。ここでフォルダの中を確認してみましょう。フォルダの中では、現在開いているファイルが index.html です。そして、隣にある japan フォルダ。japan フォルダの中にももう1個 index.html が入っています。index.html とは、各フォルダ... ディレクトリとも呼びます。「ディレクトリの最初の表紙」という意味がありますのでディレクトリの最初のファイルはindex.html と書くとサーバーとも連携がしやすく、便利です。なので、ファイル名は一緒ですがディレクトリが違いますのでこれは別のファイルです。index.html の隣のjapan フォルダの中のindex.html に飛ばします。それでは、ここに記述する内容はjapanフォルダは / で階層を示すことができます。 そして index.html と記入をして上書き保存をします。Command+SWindows は Ctrl+S です。この様に、ファイル名を記述し終えたらブラウザで確認してみましょう。まず、右クリックからOpen in Browserそして、begin ファイルの内容が表示されましたら、この様に、「国内旅行」の文字が色が変わっているのが分かります。つまり、この色が変わっている所はリンクが設定されているということです。そして、クリックをしてみると無事に japan の index に飛ぶことができました。ですが、まだ「HOME に戻る」という所にリンクが設定されていません。このファイルを編集しましょう。フォルダを開きjapan のフォルダの中にindex.html が入っています。このファイルを Sublime Text で開いてみましょう。ファイルの開き方はアプリケーションアイコンにドラッグ&ドロップする他「このアプリケーションで開く」といった操作でも、開くことが可能です。それでは、このファイルの「HOME に戻る」という部分にリンクを設定します。同様に a というタグでリンクを設定するのですがhref これはhyper reference です。 reference が「参照」という意味ですね。そして = ""そして を閉じて飛び先なのですがこの japan の中のファイルから1個上の階層に戻るという書き方は../ という書き方になります。そして index.html とファイル名を記述してあげます。そして、リンクがどこまでかというと「戻る」という所までですので、</aそして しっかりタグを閉じてあげましょう。こちらも上書き保存をして、そして、ブラウザで確認してみましょう。Command+Rもしくは Ctrl+R でブラウザを更新しますと「HOME に戻る」という所に色が付きました。こちらをクリックすると無事にトップページに戻ることができました。もう1つ、リンクを設定してみましょう。Sublime Text を開いてこの japan のファイルは一旦、閉じます。そして Google と書いてある場所を見つけます。ここは Google のサイトに飛ばすような外部のリンクを設定したいと思います。今までと同じ様にリンクは a で設定しますのでまず a 、そして飛び先を設定する hyper referencehref を記述し="" を打って を閉じます。 そして、早めにリンクの終了のタグも書いておきましょう。では、リンクの飛び先をどのように調べるかというとブラウザを開きます。ブラウザ上で Google のサイトを検索してみましょう。Google は検索バーにGoogle と打ち込みそして、一番上に出てきたGoogle をクリックそして、リンクのバーのアドレスをCommand+CWindows では Ctrl+C でコピーをしてSublime Text に戻ります。戻りましたら、このhyper reference の中身にCommand+VWindows では Ctrl+V でペーストをしてリンク先をペーストします。そして、上書き保存Command+Sもしくは Ctrl+S で保存をしたらこのファイルをブラウザで開きましょう。右クリックからOpen in Browser としてファイルを開きましたらこの「便利なリンク集」のGoogle をクリックしてみましょう。無事に Google のサイトにリンクが飛びました。これは URL を設定する「絶対リンク」という指定方法になります。このレッスンではリンクの設定方法について学びました。

はじめてのHTML&CSS入門

Webデザインの基本はHTMLとCSSにあると言っても過言ではありません。ブラウザにそのページの論理構造を正しく伝えるためのHTMLと、そのページをいかに見せるかを設定するCSSの二本柱をきちんと理解する必要があります。このコースでは前半でHTMLとCSSの基本を学んだのち、後半ではCSSの実際の応用の仕方や各種ツールの使い方などについて学びます。

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

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

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

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