【HTML/CSS】divタグの使い方
こんにちは。駆け出しプログラマーの松下です！HTMLで頻繁に見かけるdivタグとはどんなものかを紹介します。HTMLを学び始めたばかりという方の参考になれば幸いです！divとはdivタグはそれ自身は特に意味を持っていませんが、構造上必要なひとかたまりを示します。例えば、下記のように文字の色を赤にしたいときに、CSSでとを別々に赤色と指定するのは面倒です。HTMLファイル赤い果物 りんご CSS
【HTML】リンクタグについて
Workteria(ワークテリア)では難易度の高いものから低いものまで、スキルや経験に合わせた案件を多数揃えています。会員登録は無料ですので、ぜひ会員登録してご希望の案件を探してみてください！
フリーランス／正社員のエンジニアとして活躍するには、ご自身のスキルや経験に合わせた仕事を選ぶことが大切です。ご希望の案件がみつからない場合はお気軽にお問い合わせください！ユーザ満足度の高いキャリアコンサルタントが在籍していますので、希望条件や悩み事などなんでもご相談ください。ご希望にピッタリの案件をご紹介させていただきます。
こんにちは。駆け出しエンジニアの竹前です。
ここでは、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://workteria.forward-soft.co.jp/blog">お役立ちBlog</a>実行結果
上記の「お役立ちBlog」をクリックすると、お役立ちBlogのTOPページに移動します。
画像にリンクを設定する
画像をリンクにするには、リンクを設定したい画像を<a>～</a>タグで囲み、href属性の値にリンク先のアドレスを指定します。
<a href="https://workteria.forward-soft.co.jp/blog"><img src="001.png"></a>実行結果
上の画像をクリックすると、お役立ちBlogのTOPページに移動します。
画像を表示させる方法は、以下の記事をご覧ください。
リンク先を別タブで開く
リンク先を別タブまたは新しいウィンドウで開くようにするには、target属性の値に「_blank」という値を指定します。
<a target="_blank" href="https://workteria.forward-soft.co.jp/blog">お役立ちBlog(別タブで開きます)</a>実行結果
上記の「お役立ちBlog(別タブで開きます)」をクリックすると、別タブまたは新しいウィンドウでお役立ちBlogのTOPページが開きます。
相対パスを使ったリンクの指定
今までのサンプルコードでは、リンク先は絶対パスで指定していましたが、相対パスでも指定することができます。
<a href="abc/sample.html">サンプルページ</a>ただし、相対パスで指定できるのは、自サイト内部のファイル（同じサーバ内のファイル）を指定する場合です。
リンク先が外部のサイトである場合は絶対パスを使わなければなりません。
相対パスと絶対パスについては、以下の記事をご覧ください。
正社員／フリーランスの方でこのようなお悩みありませんか？
- 自分に合う案件を定期的に紹介してもらいたい
- 週2、リモートワークなど自由な働き方をしてみたい
- 面倒な案件探し・契約周りは任せて仕事に集中したい
そのような方はぜひ、Workteriaサイトをご利用ください！
定期的にご本人に合う高額案件を紹介
リモートワークなど自由な働き方ができる案件多数
専属エージェントが契約や請求をトータルサポート
よく読まれている記事