HTMLのlink要素でリンクする外部リソースを指定する

    • このページをはてなブックマークに追加

    公開日:2016年08月24日 最終更新日:2019年10月15日

    HTMLのlink要素は、文書同士の関係を表したり、CSSなどの外部ファイルを参照する重要な要素です。本コラムでは、link要素の基本の使い方の他、「rel属性」を用いてブラウザータイトルの横に表示するアイコン(ファビコン)の設定方法について説明します。

    1. link要素の基本書式

    link要素は、HTML文書の<head>~</head>タグの間に記述します。link要素の内容はブラウザー上に表示されませんが、サイト全体の文書の構造を検索エンジンが把握するのに利用される他、CSSへのリンクを張ってページのレイアウトやデザインに利用されるタグです。「rel属性」と「href属性」などを使い関連リソースを指定します。

    ●link要素の基本書式

    <head>
    <title>link要素の記述</title>
    <link rel="キーワード" href="関連文書へのURL">
    </head>
    

    2. link要素の属性

    2.1. rel属性

    rel属性」には、当該文書からみた他の文書との関係をキーワードとして設定します。キーワードは大文字・小文字の区別はしませんが半角英数で記述して下さい。

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

    ※rel属性とhref属性は必須です。

    rel属性のキーワード:

    キーワード 内容
    alternate

    リンク先の文書が当該文書の代替の文書であるということを表しています。内容は同じであるが、英語版やスマホ向けのサイトに指定すると検索エンジンから正常な文書の構成であると認識してもらえます。

    stylesheet

    リンクしている外部スタイルシートを表します。
    スタイルシートの使い方については「CSSの書き方の基本」を参照下さい。

    contents

    目次として提供されるページを表します。

    index

    ウェブページの索引の文書を指します。

    next

    当該文書の次のページを指します。

    prev

    当該文書の前のページを指します。

    ▲ページトップへ戻る

    2.2. href属性

    href属性」には、当該文書に関連する文書(リソース)のアドレスを設定します。

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

    2.3. type属性

    type属性」には、リンクされた文書のMIMEタイプを設定します。「MIMEタイプ」とは、サーバーとブラウザー間でデーターのやりとりをする際、ファイルを識別するコード体系です。MINEは、"Multipurpose Internet Mail Extension"の略です。

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

    MINEタイプ:
    ・テキストファイル:text/plain
    ・HTMLファイル:text/html
    ・JavaScript:text/javascript
    ・CSS:text/css
    ・GIF画像:image/gif
    ・JPEG画像:image/jpeg
    ・PNG画像:image/png
    ・CGIスクリプト:application/x-httpd-cgi
    ・PDFファイル:application/pdf

    ▲ページトップへ戻る

    2.4. hreflang属性

    hreflang属性」には、リンクされた文書の言語コードを設定します。rel属性を"alternate"に設定して当該文書の翻訳版を表すことができます。また、title属性を使う文書との関連が分かりやすくなります。

    <head>
    <title>企業情報</title>
    <link lang="en" title="Company Information in English"
    	type="text/html"
    	rel="alternate"
    	hreflang="en"
    	href="../information/english.html">
    </head>
    

    ▲ページトップへ戻る

    3. rel属性を使ってタイトルにアイコン(ファビコン)を表示する

    link要素の「rel属性」でブラウザーのタイトル横に、サイト固有のアイコンを作成してみましょう。
    通常「favicon.ico」という名前のアイコンファイルを、ウェブサーバーの一番上の階層(ホーム)に置くことで、サイト全体にアイコンを表示することができます。「favicon(ファビコン)」とは、"favorite icon"(お気に入りのアイコン)の略です。ブラウザーにより表示のされ方は少づつ異なりますが、ブラウザータイトルの横や、お気に入りに登録した時のブックマークアイコンとして表示されます。
    ページごとにアイコンを変更したい場合は、link要素のrel属性にiconキーワードを設定します。

    ●link.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>企業情報</title>
    <link rel="icon" href="img/smile32.gif" type="image/gif">
    </head>
    <body>
    <h1>企業情報</h1>
    <p>(株)○△◇</p>
    <p>住所:東京都○○町</p>
    </body>
    </html>
    

    ●ファビコンの設定

    <link rel="icon" href="img/smile.ico" type="image/x-icon">

    ※IEはgifやjpgなどの画像ファイルは対応していないため、ファイルをwindowsのico形式に変換して指定する必要があります。

    「link.html」ファイルと同じフォルダーにimgフォルダを作成し、その中に画像ファイル「smile32.gif、またはsmile.ico(IE用)」を保存して下さい。HTMLファイルに文字コードの"utf-8"を設定してますので、ファイルの保存形式も"Utf-8"にして保存します。

    link2

    link.htmlファイルを開くと、ブラウザータイトル横とブックマークのタイトル横にlink要素で設定したアイコンが表示されます。

    ▲ページトップへ戻る

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【HTML】Webデザイナー|デザイン提案などのアートディレクション業務

    年収 :300万円〜700万円

    受託の開発・制作から自社開発まで幅広い案件を持ちます。 制作の視点から「こうしたら効果が上がるの...

    株式会社クオリアシステムズ

    正社員

    【Javascript】WEBデザイナー|広告/カタログの企画・デザイン・制作

    年収 :250万円〜400万円

    広告、カタログ、Web等の企画・デザイン・制作をご担当いただきます

    ワイズマトリックス株式会社

    正社員

    【Javascript】WEBデザイナー|自社Webサイトの企画・制作・運営

    年収 :400万円〜500万円

    自社Webサイトの企画・制作・運営などをご担当いただきます。 <具体的な業務> ・自社コーポレート...

    株式会社ボルテージ

    フリーランス

    【Webデザイナー/コーダー】AdobeExperienceManager(AEM)を用いたWebサイト構築

    大手企業の採用HPから有名アニメの公式HP等のデザイン/ディレクションを行うクリエイティブ企業にて、W...