40代高卒者が製造業からIT転職する【WEB制作編5】

programming
学習コースキャンペーンバナー

こんにちは、フローです。

今回もHTMLやCSSについて学んでいきましょう〜。

前回の記事はこちらです。

40代高卒者が製造業からIT転職する【WEB制作編4】

style sheetとは

前回は下記のような例を書きました。

<link rel="stylesheet" href="style.css">

ここで出てくる、”rel”や”href”ってなに？

と思った人ように書いていきたいと思います。

細かいことが気になる私。

なので、細かい事は気にしないって人は飛ばして下さい笑

rel

リンク元のリソースとリンク先のリソースの関係を指定するための属性です。

例えば、

リンク先が別のWebページである場合は、

“rel”属性に”noopener noreferrer”という値を指定することができます。

これは、別のページに移動した後も、元のページを開いたままにするための指示です。

また、別のWebページであることを示すために、

“rel”属性に”external”という値を指定することもできます。

他にも、

“rel”属性には、アイコンファイルを指定するための”icon”、

スタイルシートを指定するための”stylesheet”、

先行するリンク先であることを示すための”prev”、

後続するリンク先であることを示すための”next”など、様々な値があります。

“rel”属性は、

リンク先のリソースが何であるかを明確に示すために使用されます。

Webブラウザや検索エンジンは、この属性の値を使用して、

リンク先のリソースを正しく解釈することができます。

また、Web開発者は、”rel”属性を使用して、Webページをより使いやすく、

SEOに優れたものにすることができます。

relの例

外部リンクの場合
<a href="https://www.example.com/" rel="noopener noreferrer">Example</a>

“rel”属性に”noopener noreferrer”を指定することが推奨されています。

“noopener”は、別のページに移動した後も、元のページを開いたままにするための指示であり、

“noreferrer”は、リンク元のURLをリンク先に伝えない指示です。

スタイルシートの場合
<link rel="stylesheet" href="style.css">

スタイルシートを読み込む場合、

“rel”属性に”stylesheet”を指定します。

先行するWebページの場合
<link rel="prev" href="page1.html">
<link rel="next" href="page3.html">

複数のWebページで構成されるシリーズの場合、

“rel”属性に”prev”と”next”を指定することができます。

“prev”は、前のページであることを示し、

“next”は、次のページであることを示します。

Webサイトのアイコンの場合
<link rel="icon" href="favicon.ico">

Webサイトのアイコンを設定する場合、

“rel”属性に”icon”を指定します。

“href”属性には、アイコンファイルの場所を指定します。

この例では、”favicon.ico”というファイルがアイコンファイルとして使用されます。

hrefとは

リンク先のリソースの場所を指定するための属性です。

例えば、

Webページから画像ファイルやスタイルシートファイル、

別のWebページへのリンクなど、様々なリソースにアクセスする場合に使用されます。

この属性には、

リソースのURL（Uniform Resource Locator）やパスを指定します。

リソースの場所を正確に指定することは、

Webページの表示や動作にとって非常に重要です。

リンク先が存在しない場合、もしくはリンク先のURLやパスが誤っている場合、

エラーが発生し、リソースにアクセスすることができません。

“href”属性は、

<a>要素や<link>要素、<area>要素など、様々な要素で使用されます。

Webブラウザは、この属性の値に従って、リンク先のリソースを解釈し、表示することができます。

また、JavaScriptやCSSなど、

他の要素でも”href”属性を使用することがあります。

例えば、

CSSの場合、”href”属性にCSSファイルのURLを指定することで、

スタイルシートを読み込むことができます。JavaScriptの場合、”href”属性にJavaScriptファイルのURLを指定することで、

JavaScriptコードを読み込むことができます。

hrefの例

<a>要素
<a href="https://www.example.com/">Example</a>

この例では、リンク先のURLを指定しています。

<area>要素
<img src="example.jpg" alt="Example Image" usemap="#example">
<map name="example">
<area shape="rect" coords="0,0,50,50" href="https://www.example.com/">
</map>

この例では、画像にリンクを設定するために<area>要素を使用しています。

“href”属性には、リンク先のURLを指定しています。

JavaScript
<script src="script.js"></script>

JavaScriptファイルの場所を”script.js”と指定しています。

“script.js”には、Webページで使用するJavaScriptコードが含まれています。

まとめ

色々と書いて来ましたが、

『へ〜』くらいで覚えていればいいです笑

他にもいっぱいありますし、やっていくうちに覚えていきます。

焦らず、ゆっくりで。

次回は、CSSのことを書こうと思います！