HTML・CSS：linkタグとは・ページ読み込みのスピードアップや正式URLの指定・アイコンの設定・MIMEタイプなど

<link>タグとは
<link>タグの書き方
<link>の属性
<link>タグのmedia属性（レスポンシブデザイン対応）
type=”MIMEタイプ”
1. 具体的な値

<link>タグとは

また<link>タグはCSSとの関連付けだけではなく、検索エンジンに正規のページであることを伝える機能だったり（https://とhttp://の２つがあったら、https://の方が正しいよ～と指定をする）、media属性などレスポンシブデザインに関わる部分も書いたりできます。

<link>タグの書き方

<head>
<link
 rel="リンク先との関係"
 href="ファイルのありか"
 media="メディアクエリ指定" type="リンク先コンテンツの種類"/>
</head>

<head>タグ内の、</head>の直前です。もちろん必要のない属性は書く必要が無いので、CSSとの関連付けだけであればこんな感じになります。↓

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

href=””の中の指定の仕方は絶対パスと相対パスの考え方を解説していますので、分からないぞという方はそちらの記事を参照してください。

<link>の属性

rel=”関係”
href=”URL”
media=”メディア”
media=”メディアクエリー”
type=”MIMEタイプ”

rel=”関係”

rel=””の””の中では、今編集しているそのページと、この<link>タグで指定するデータとの関係性を指定します。主に使うのはstylesheetで、cssのファイルとの関連付けが多いですが、他にも指定できるものにはこのようなものがあります。↓

`rel` の値	説明・使い方
`alternate`	現在の文書の別な表現。スマホサイトの存在を検索エンジンに伝えたり、英語対応のページなど別に同様のページが用意されている時に使用。※現在はレスポンシブデザインに対応するのが主流なのでこの値はほぼ使わないかも <link rel=”alternate” media=”only screen and (max-width: 640px)” href=”モバイルページのURL” /> <link rel=”alternate” hreflang=”外国語ページのURL” />
`author`	現在の文書や記事の著者の情報を載せる。（ヘッダーの情報とはいえソースは全部公開されるのでネット上にメルアドが公開されるリスクがあるのを記憶の片隅に置いておいてください。） <link rel=”author” href=”adressdamiidayo@email.com”>
`bookmark`	ブックマークのリンクを定義する。↓こうすることでブックマークのタイトルとURLを指定できる <title>ページのブックマークのタイトル</title> `<link rel="bookmark" href="https://`url.om`">`
`canonical`	現在のページの正式なURLを指定する。http～とhttps～の同じ内容の２ページがあったとしてもhttps～の方が正規のページだよ～と指定することによってSEO的に評価が分散するのを防ぐ効果があります。 <link rel=”canonical” href=”https://url.com”>
`dns-prefetch`	DNS の事前取得を行うために使用。google analyticsやgoogleadsenceなど外部のURLからリソースを取得する場合情報を事前に取得するのでページ読み込みのスピードが上がる可能性がある。対応していないブラウザはスルーしてくれるので書いておいて損はないかも。 `<link rel="dns-prefetch" href="https://example.com">`
`external`	参照先のページが、現在のページを持つ同じサイトの一部ではないこと（外部サイトへのリンクであること）を示す <link rel=”`external`” href=”`https://example.com`“>
`help`	リンク先のページが、今現在のページのヘルプにあたるページであることを示す <link rel=”help” href=”`https://example.com`“>
`icon`	Webページを開いた際タブに表示されるアイコン（ファビコン）を設定する詳しい内容はこちら
`license`	現在のページのメインコンテンツが指定した参照先のページで説明されている著作権によってカバーされていることを示す。 <link rel=”`license`” href=”`https://example.com`“>
`manifest`	現在のページのウェブアプリマニフェストを指定。ウェブアプリマニフェストとは、プログレッシブウェブアプリ (PWA) と呼ばれる一連のウェブ技術の一部のことで、ネット環境が無くても動作するアプリだったりする。 `<link rel="manifest" href="manifestname.json" />`
`me`	現在の文書がリンク先のコンテンツを所有する人物を表すことを示す
`modulepreload`	`href=`“”で指定した先の情報が先行して読み込むべきモジュールスクリプトであることを示す。モジュールスクリプトとは再利用可能なプログラムの塊のことで、他のプログラムから呼び出して使うことが出来るスクリプト。ここで指定したモジュールスクリプトはモジュールマップに登録される。このモジュールスクリプトと、モジュールスクリプトに関連するファイルをすべてlinkタグで指定する必要がある。 <link rel=”modulepreload” href=”modulescriptrei.js”> <link rel=”modulepreload” href=”kokodemodulescripttukatteru1.js”> <link rel=”modulepreload” href=”kokodemodulescripttukatteru2.js”>
`next`	現在のページが複数にまたがるページの一部で、href=””で指定したページが次のページであることを示す。例えば３ページあったとしたら1ページ目の時（２ページ目を指定）と２ページ目の時（３ページ目を指定）に使用。 <link rel=”next” href=”次のページのURL”>
`pingback`	現在の文書へのピンバックを処理するピンバックサーバーのアドレスを指定する。ピンバックとは、記事を書くのに参考にしたサイトに対して知らせを送る的なことで、相互リンクのお申込みみたいなことに当たります。 <link rel=”`pingback`” href=”ピンバックを送りたいところのURL”>
`preconnect`	ユーザーエージェントが対象となるリソースのオリジンへの接続を先読みするのでブラウザの外部ファイル（jQueryとか）の読み込みを効率化できる。オリジンとは、Webページや画像などの所在を表すURLのうち、http://かhttps://かの違いや、Webサーバのドメイン名、ポート番号の組み合わせのこと。出来るだけ<head>タグ内の上の方に書くようにする。 <link rel=”preconnect” href=”https://google-analytics.com”>など、href=””には先読みしたいドメインを指定する。１つのページに３つ以上設定すると重くなるらしい…？PageSpeed Insights (web.dev)で診断すると良いかも。
`prefetch`	見ている人が次に見そうなものの情報を先取りして、表示させる際のスピードを上げることが出来る。読み込めるデータはaudio、document、embed、fetch、font、image、object、script、style、track、worker、video。この場合はimage.jpgを先読みしている。 `<link rel="prefetch" href="https://example.com/sozai-image.jpg">`
`preload`	`[as](as)` 属性で指定された潜在的な距離 (および対応する距離に関連する優先度) に従って、ユーザーエージェントが現在のリソースの先読みをしてキャッシュさせておく。hrefには先読みさせたいリソースのパスを指定、asにはリソースの種類を指定する。asで使用できるものはaudio、document、embed、fetch、font、image、object、script、style、track、worker、video `<link rel="preload" href="style.css" as="style" />`
`prerender`	指定したページのCSSを読み込んでJSを実行する。別タブで見えないページを表示させているようなイメージ。そのためページ読み込み中のjsのアニメーションなどは設定していても、いざページを表示させたときに終わっている可能性などもある。 `<link rel="prerender" href="https://example.com/page.html">`
`prev`	現在のページが複数にまたがるページの一部で、href=””で指定したページが前のページであることを示す。例えば３ページあったとしたら2ページ目の時（１ページ目を指定）と３ページ目の時（２ページ目を指定）に使用。 <link rel=”`prev`” href=”次のページのURL”>
`search`	現在の文書とその関連ページを検索するのに使用できるリソースへのリンクを提供。
`stylesheet`	スタイルシートをインポートする。そのページに関連するCSSファイルはすべて関連付けしておく必要あり。これが最も使う頻度が高い。href=””にはCSSファイルのありかを指定する。 <link rel=”stylesheet” href=”css/style.css” />

rel=“icon”で設定できるもの

Webページを開いた時に表示されるアイコン（ファビコンと呼ばれる）のことです。↓

このアイコンはブックマークしたときに一覧で表示されるアイコンになるので、ぱっと見でもわかるようなデザインを設定しておきましょう。
各設定の仕方、記述の仕方はこの通りです↓

pngやgifを使用する場合	type属性に`image/png`や`image/gif`の指定が必要 `<link rel="icon" type="image/png" href="画像フォルダ名など/画像名.pngもしくはgif">`
サイズごとに指定する場合	`<link rel="icon" type="image/png" href="画像フォルダ名など/画像名" sizes="16x16">` ・16px×16px：各ブラウザのタブ、Safariの履歴・32px×32px：ブックマークのアイコン・48px×48px：Windowsのスタート画面のピン留めなどに使われるもの WordPressなら512×512の１つだけあればOKです。外観→テーマカスタマイズ→サイトアイコンで設定
iOS,Safariのホーム画面のアイコン Mac Safariのお気に入りのアイコン	<link rel=”apple-touch-icon-precomposed” href=”`画像フォルダ名など/画像名`“> 180×180pxのpng画像を作成することでリサイズしてくれる
Android Chromeのブラウザタブホーム画面のアイコン	<link rel=”icon” type=”image/png” href=”/android-chrome-256×256.png”>

また、ファビコンに設定するのに便利な形式があって、それがicoと呼ばれています。
そのほかIllustratorを導入しているのであればSVG形式で画像を保存するとパスを保ったままデータが保存されるので、どんなサイズになってもきれいに表示されるのでお勧めです。

href=”URL”

href=”URL”には、関連付けさせたいデータやファイルのありかを指定します。指定の方法は絶対パスや相対パスがあるのですが、細かいことはこちらで解説しているので分からないぞという方はそちらを見てください。

media=”メディア”

media=””の部分で、メディアの種類の指定や＠メディアクエリを指定することが出来ます。

メディアの種類

メディアの種類（メディア種別は機器の全般的な分類を記述します）についてはこのようなものがあります。

all（すべての機器に適合）
print（ページのある資料や、画面に印刷プレビューモードで表示されている文書向けのもの）
screen（画面向けのもの）
speech（合成音声向けのもの）

print

printは、Webページの印刷の際にどのように見えるかの設定をすることが可能です。右クリックでさ～て印刷だ～なんて思っていたらサイドバーとかも全部含めて印刷される状態だったり…というのを防ぐためにあります。その場合はあらかじめ印刷時用のCSSを用意しておいて、<link>タグで読み込みましょう。↓

<link rel="stylesheet" type="text/css" media="print" href="print.css">

<link>タグのmedia属性（レスポンシブデザイン対応）

レスポンシブデザインに対応させるために<link>タグ内でmedia属性を使う方法もあります。（結局処理の中身を書くのはCSSファイルなんですけどね）↓

    <link
      rel="stylesheet"
      href="css/responsive.css"
      media="screen and (max-width: 767px)"
    />

screen and()の（）の中で画面の大きさを指定します。なぜ767なのかとか含めた内容はこちらに詳しく書いていますのでレスポンシブデザインが気になる方はこちらの記事を参考にしてください。↓

type=”MIMEタイプ”

type=”MIMEタイプ”の部分は、リンク先のコンテンツの種類を定義するための属性です。
この属性の値はtext/html（htmlですよ～）やtext/css（ＣＳＳですよ～）などがMIMEタイプになります。

MIMEタイプとは？
ファイルの分類/ファイルの種類の形式で送られるデータの種類のこと
通信するときにサーバーとPC間でやり取りがあるのですが、そこに必要であろう画像やらなんやらと共に渡されるのがこのMIMEタイプです。

これをすることによって、転送するドキュメントの種類をブラウザに正確に伝えることが出来ます。正確に伝えられるということは検索ロボットにもその情報が何なのかをより正確に伝えられるということなので、ＳＥＯ対策的にも良いと思われます（実際のところはどうなのか分からんがこういうところでしっかり作っておくと強いのは確か）

具体的な値

MIMEの値は↓このようにたくさんあります。冒頭でもお伝えしたtext/htmlやtext/css、image/gifなんてものもあります。

事前に伝えておきたい点をまとめておきます↓

コーデック→音声圧縮変換方式のこと
アーカイブ→複数のファイルをただひとつにまとめること
圧縮→複数のデータを若干破損させ容量を減らしながらまとめること（画像形式のjpegを例にするなら画素数を減らす）

拡張子	文書の種類	MIME タイプ
`.aac`	AAC 音声 Advanced Audio Codingの略。主にiPhoneといったアップル製品で使用されているコーデック	`audio/aac`
`.abw`	AbiWordアビーワード文書 The AbiWord Teamが開発したワープロソフト（Wordのようなもの）	`application/x-abiword`
`.arc`	(複数のファイルが埋め込まれたアーカイブファイル) アーカイブ文書	`application/x-freearc`
`.avi`	AVI: Audio Video Interleave 動画ファイル	`video/x-msvideo`
`.azw`	Amazon Kindle eBook 形式	`application/vnd.amazon.ebook`
`.bin`	任意の種類のバイナリーデータ昔のゲームやソフトウェアのプログラムデータなど	`application/octet-stream`
`.bmp`	Windows OS/2 ビットマップ画像	`image/bmp`
`.bz`	BZip アーカイブ Bzip Compressed Format アーカイブ形式。UNIX系のOSで昔よく使われていた	`application/x-bzip`
`.bz2`	BZip2 アーカイブ Bzip Compressed Format 圧縮形式。UNIX系のOSで昔よく使われていた	`application/x-bzip2`
`.csh`	C-Shell スクリプトシェルで書かれたプログラムに付ける拡張子	`application/x-csh`
`.css`	カスケーディングスタイルシート (CSS)	`text/css`
`.csv`	カンマ区切り値 (CSV) 年賀状の住所録などデータの移行に使うデータに使いがち	`text/csv`
`.doc`	Microsoft Word ソフトウェアのWordの拡張子で古いバージョンの方（97-2003文書）	`application/msword`
`.docx`	Microsoft Word (OpenXML) ソフトウェアのWordの拡張子	`application/vnd.openxmlformats-` `officedocument.wordprocessingml.document`
`.eot`	MS 埋め込み OpenType フォントフォントの形式（IEとかで使用されている）	`application/vnd.ms-fontobject`
`.epub`	電子出版 (EPUB) Open eBook XMLファイル形式（電子書籍を購入するとこのような形式で表示されることもある）	`application/epub+zip`
`.gz`	GZip 圧縮アーカイブ Unix系のOSで使用されていた	`application/gzip`
`.gif`	グラフィック交換形式 (GIF)	`image/gif`
`.htm .html`	ハイパーテキストマークアップ言語 (HTML)	`text/html`
`.ico`	アイコン形式ファビコンで使用される	`image/vnd.microsoft.icon`
`.ics`	iCalendar 形式カレンダーアプリで大体使用されている	`text/calendar`
`.jar`	Java Archive (JAR) java（プログラミング言語の１つ）で使用されるファイルを１つに圧縮したもの。圧縮した状態で使用できるため容量の削減に良い。	`application/java-archive`
`.jpeg` `.jpg`	JPEG 画像キレイな写真、風景写真などに使われる。拡大すると画質が悪くなる。	`image/jpeg`
`.js`	JavaScript形式（HPに動きを付けるために使うプログラミング言語）	`text/javascript`
`.json`	JSON 形式 JavaScript Object Notation。JavaScriptの記述を使ったデータ。	`application/json`
`.jsonld`	JSON-LD 形式 Visual Studio（開発用ソフト）で作成したファイルの形式	`application/ld+json`
`.mid` `.midi`	Musical Instrument Digital Interface (MIDI) MIDIファイル。デジタルで作成された音楽の形式。ボカロの曲とか…。	`audio/midi` `audio/x-midi`
`.mjs`	JavaScript モジュール	`text/javascript`
`.mp3`	MP3 音声ファイル	`audio/mpeg`
`.mpeg`	MPEG 動画ファイル	`video/mpeg`
`.mpkg`	Apple Installer Package Mac製品で使用されている圧縮ファイル形式	`application/vnd.apple.installer+xml`
`.odp`	OpenDocuemnt プレゼンテーション文書 PowerPointで使用	`application/vnd.oasis.opendocument.presentation`
`.ods`	OpenDocuemnt 表計算文書 Excelで使用	`application/vnd.oasis.opendocument.spreadsheet`
`.odt`	OpenDocument テキスト文書 Wordで使用	`application/vnd.oasis.opendocument.text`
`.oga`	OGG 音声音声データ。メディアプレイヤーなどで再生可能。 Xiph.Org Foundationで作成された音声ファイル。	`audio/ogg`
`.ogv`	OGG 動画 Xiph.Org Foundationで作成された動画ファイル。	`video/ogg`
`.ogx`	OGG Xiph.Org Foundationで作成された音声・動画ファイル	`application/ogg`
`.opus`	Opus 音声非可逆音声圧縮フォーマット	`audio/opus`
`.otf`	OpenType フォント macでもWindowsでも使える、EPS形式などで作成されたフォント	`font/otf`
`.png`	Portable Network Graphics 背景が透過されている画像	`image/png`
`.pdf`	Adobe Portable Document Format (PDF) PDFファイルの拡張子	`application/pdf`
`.php`	Hypertext Preprocessor (Personal Home Page) プログラミング言語（php）のファイル	`application/x-httpd-php`
`.ppt`	Microsoft PowerPoint PowerPointというプレゼン用資料作成ソフトのファイル	`application/vnd.ms-powerpoint`
`.pptx`	Microsoft PowerPoint (OpenXML) PowerPointというプレゼン用資料作成ソフトのファイル	`application/vnd.openxmlformats-` `officedocument.presentationml.presentation`
`.rar`	RAR アーカイブアーカイブの形式のひとつ。zipよりも高品質な圧縮を提供する。ただし有料のソフトでしかこの形式にできない。	`application/vnd.rar`
`.rtf`	リッチテキスト形式 (RTF) 文書ファイルの形式の１つ。古いバージョンのWordなどで使用されていた。	`application/rtf`
`.sh`	Bourne shell スクリプトプログラミング言語シェルを使ったファイル	`application/x-sh`
`.svg`	Scalable Vector Graphics (SVG) ベクター形式の画像ファイル。HTMLでの加工も可能	`image/svg+xml`
`.swf`	Small web format (SWF) または Adobe Flash 文書 Adobe Flashで作成されたファイル	`application/x-shockwave-flash`
`.tar`	Tape Archive (TAR) アーカイブの１つ。Linaxやmacで使用できるtarコマンドで作成可能。	`application/x-tar`
`.tif .tiff`	Tagged Image File Format (TIFF) Adobeによって開発された画像データフォーマット。 FAXでも使用されていた	`image/tiff`
`.ts`	MPEG transport stream オーディオ・ビデオ形式のデータによく使う。テレビの放送の送信形式にも使用されている	`video/mp2t`
`.ttf`	TrueType フォントアウトラインフォントの１つ。アップルが開発。	`font/ttf`
`.txt`	テキストファイル (一般に ASCII or ISO 8859-n) Windowsにデフォルトで入っているソフト「メモ帳」などで使用	`text/plain`
`.vsd`	Microsoft Visio フローチャートと図面作成のソフトウェアMicrosoft Visioで使用	`application/vnd.visio`
`.wav`	Waveform 音声形式音声形式でよく使用する	`audio/wav`
`.weba`	WEBM 音声 Googleが提供する音声ファイル形式	`audio/webm`
`.webm`	WEBM 動画 Googleが提供する動画ファイル形式	`video/webm`
`.webp`	WEBPうぇっぴー画像 Googleが提供する画像ファイル形式	`image/webp`
`.woff`	Web Open Font Format (WOFF) 圧縮されたフォントデータ。軽くて表示が早いためネットで表示されるフォントとして好まれる	`font/woff`
`.woff2`	Web Open Font Format (WOFF) 圧縮されたフォントデータ。軽くて表示が早いためネットで表示されるフォントとして好まれる。woffとは互換性のないパート２状態。woffと圧縮方法が異なる。	`font/woff2`
`.xhtml`	XHTML。HTMLを拡張したもので、hmtlとxmlを混ぜたもの。	`application/xhtml+xml`
`.xls`	Microsoft Excel ソフトウェアExcelのファイル	`application/vnd.ms-excel`
`.xlsx`	Microsoft Excel (OpenXML) ソフトウェアExcelのファイル	`application/vnd.openxmlformats-` `officedocument.spreadsheetml.sheet`
`.xml`	`XML` データのやり取りや設定ファイルを作成する際によく使用される。HTMLの親戚のようなもの。	`application/xml`: 一般のユーザーから読めない `text/xml`: 一般のユーザーから読める
`.xul`	XUL XML形式で記述されたFirefoxの拡張機能につけた拡張子。	`application/vnd.mozilla.xul+xml`
`.zip`	ZIP アーカイブよくあるいろんなファイルを圧縮したファイル	`application/zip`
`.3gp`	3GPP 音声/動画コンテナー低画質の動画に適した形式。特別なソフトが無くてもPC上で誰でも見ることが出来る。スマホなど小型の画面で見るのに適している。読み込みスピードが速い。	`video/3gpp` 動画を含まない場合は `audio/3gpp`
`.3g2`	3GPP2 音声/動画コンテナー昔携帯で使われていた動画形式。だが今はmp4が主流で、この形式を扱えるソフトも減っている。	`video/3gpp2` 動画を含まない場合は `audio/3gpp2`
`.7z`	7-zipセブンジップアーカイブ圧縮形式の１つ。zipに比べ高圧縮のファイルが作成できる	`application/x-7z-compressed`