【HTML/CSS】divタグの使い方
こんにちは。駆け出しプログラマーの松下です！HTMLで頻繁に見かけるdivタグとはどんなものかを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです！divとはdivタグはそれ自身は特に意味を持っていませんが、構造上必要なひとかたまりを示します。例えば、下記のように文字の色を赤にしたいときに、CSSでとを別々に赤色と指定するのは面倒です。HTMLファイル赤い果物 りんご CSS
【HTML】リンクタグについて
こんにちは。駆け出しエンジニアの竹前です。
ここでは、HTMLのリンクタグについて説明します。
HTMLについて勉強している方の参考になれば幸いです。
リンクタグとは
リンクタグとは、HTMLの閲覧中のページから、別のページに遷移させるときに使うタグ(<a>～</a>タグ)のことをいいます。
このタグを使うことによって、文字列や画像にリンクを設定することができます。
<link>タグと<a>タグの違い
HTMLには<link>タグというものがあります。
タグ名から、<a>タグと同じような使い方のように思われますが、実際は異なります。
<link>タグは、CSSファイルなどの他のファイルとHTMLファイルを結びつけるために、head要素内で使用するタグです。
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>このように記述すると、記述したHTMLファイルでsample.cssを読み込みます。
リンクタグの使い方
文字列にリンクを設定する
文字列をリンクにするには、リンクを設定したい文字列を<a>～</a>タグで囲み、リンク先をhref属性の値として指定します。
<a href="https://works.forward-soft.co.jp/blog">お役立ちBlog</a>実行結果
上記の「お役立ちBlog」をクリックすると、お役立ちBlogのTOPページに移動します。
画像にリンクを設定する
画像をリンクにするには、リンクを設定したい画像を<a>～</a>タグで囲み、href属性の値にリンク先のアドレスを指定します。
<a href="https://works.forward-soft.co.jp/blog"><img src="001.png"></a>実行結果
上の画像をクリックすると、お役立ちBlogのTOPページに移動します。
画像を表示させる方法は、以下の記事をご覧ください。
リンク先を別タブで開く
リンク先を別タブまたは新しいウィンドウで開くようにするには、target属性の値に「_blank」という値を指定します。
<a target="_blank" href="https://works.forward-soft.co.jp/blog">お役立ちBlog(別タブで開きます)</a>実行結果
上記の「お役立ちBlog(別タブで開きます)」をクリックすると、別タブまたは新しいウィンドウでお役立ちBlogのTOPページが開きます。
相対パスを使ったリンクの指定
今までのサンプルコードでは、リンク先は絶対パスで指定していましたが、相対パスでも指定することができます。
<a href="abc/sample.html">サンプルページ</a>ただし、相対パスで指定できるのは、自サイト内部のファイル（同じサーバ内のファイル）を指定する場合です。
リンク先が外部のサイトである場合は絶対パスを使わなければなりません。
相対パスと絶対パスについては、以下の記事をご覧ください。
【著者】
駆け出しエンジニアの竹前です。 私自身が勉強したことをもとに、難しい内容はできるだけ簡単になるように読みやすく、分かりやすい記事を心がけています。
よく読まれている記事