[42-1] link で外部CSSファイルの読み込み、グループ化をしよう

今回から、メタデータ・コンテンツの1つ、<link>要素です。
<link>要素は、外部ファイルとのリンクを指定する要素です。

<link>はいろんなことができる重要な要素です。
外部CSSを組み込んだり、プリント用にCSSやPDFを切り替えたり、他言語版とかモバイル版のHTMLがあればそっちにリンクさせたり、ショートカットアイコンを表示させたり…。
これを使わないでサイトは完成しない…ってほど大事な<link>です。

使用する要素 <link>
使用する属性 rel属性、href属性、hreflang属性、type属性、sizes属性、media属性

<link>はたいてい<head>内に書きます。<base>と同様に終了タグは無し。
<base>と違って複数OK。読み込ませるファイルの数だけ書くことができます。

<link>の使い方はいろいろあって、1つの記事だけだと長過ぎてムリなので数回に分けます。

今日は「外部CSSファイルの読み込み」と「グループ化」を。
rel属性で「rel=”stylesheet”」と指定して「外部CSSファイルを」読み込み、「title属性」を使って読み込んだCSSファイルをグループ化してみましょう。

<link>で使用する属性について

<link>で使用する属性は、上の表のとおり6個。これらを組み合わせて指定をして行きます。
「<link>の属性とその値」については↓下部の一覧表をまとめました。参考にしてください。

このうち rel属性、href属性は必須です。
外部ファイルの種類は「rel属性」で、外部ファイルの場所(URL)は「href属性」で指定します。

rel=”stylesheet” を使って「外部CSSファイル」を読み込む

<link>要素で最も良く使うのはこれでしょう。外部CSSをHTMLに読み込ませます。
サンプルを見てみましょう。

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

赤の部分は「rel属性」。「rel属性」は、外部ファイルのこのHTMLにとっての「関係」を示します。
「rel」は「relation」の略。「関係」という意味です。
値は「stylesheet」で、このHTMLのCSS(スタイルシート)であることを示します。

「rel属性」の「この他の値」については↓下部の一覧表をご覧ください

緑の部分は「type属性」の指定です。「type属性」は読み込むファイルの種類を「MIMEタイプ」で書きます。「MIMEタイプ」については「ちょっとメモ:MIMEタイプ」を見てください。
MIMEタイプを間違えたらブラウザに無視されます。必ず正しいMIMEタイプを書きましょう。

パープルの部分は「href属性」で、読み込むファイルのURLを書きます。絶対相対どちらでもOK。
(ただ相対パスの場合、前回の<base>要素で href属性でURLを指定してたら、そこからのパスになりますので要注意ですね!)

外部CSSが複数ある場合、<link>要素1つにファイル1個なので、<link>要素を複数連ねて書きます。
CSSは「カスケード処理」をしますので、後から読み込ませたCSSが前のCSSを上書きします。

このCSSの性質については「グラフィックデザイナーのためのCSSレイアウト TIPS:CSS記述の優先度」をご覧ください。

「外部CSSファイル」はどうやって書くの?

外部CSSファイルの書き方については、過去に紹介していました。
[12-1] CSSを外部ファイルにしようを参考にしてください。

「title属性」を使うと、CSSがグループ化され優先度も変わる

外部CSSを読み込むときの<link>要素に「title属性」を使うとCSSをグループ化し、グループごとの優先度に変わります
そして、非優先のCSSをビジタがチョイスする事が出来ます。

実際にスタイルシートの切り替えを見るために、サンプルを作ってみました。
→link要素でCSSを読み込む場合のtitle属性によるCSSグループ化
(honttoni42-1.html)
(別ウィンドウで開きます)

サンプルでは、こんなかんじで、外部CSSを<link>要素で読み込んでいます。

<head>
<link rel="stylesheet" type="text/css" href="css/sample42default.css">
<link rel="stylesheet" type="text/css" href="css/sample421a.css" title="test1">
<link rel="stylesheet" type="text/css" href="css/sample421b.css" title="test2">
<link rel="stylesheet" type="text/css" href="css/sample421c.css" title="test2">
</head>
  • 2行目の「sample42default.css」は「title属性」無し。これは「固定スタイルシート」といい、文句無しに最優先で読み込まれます。
  • 3〜5行目のCSSは「title属性」あり。
    3行目のCSSは「title="test1"」、4、5行目は「title="test2"」と、タイトル名がちがいます。
    これでブラウザは、CSSのグループとして認識します。先に記述されたグループ(ここでは test1)のものを「優先スタイルシート」として適用します。

この例の場合、初回のHTMLの読み込みでは「sample42default.css」と「sample421a.css」だけが読み込まれ、あと2行(sample421b.css と sample421c.css)は読み込まれません。
ユーザがプラウザのメニューから「スタイルシート選択」で「test2」を選ぶことによって、test1 から test2 に上書きされ、sample421b.css と sample421c.css が読み込まれます。

サンプルはこちら。
→link要素でCSSを読み込む場合のtitle属性によるCSSグループ化
(honttoni42-1.html)
(別ウィンドウで開きます)

<link>要素の属性とその値の一覧表

「<link>要素の属性一覧表」を作ってみました。
今回は「rel, href, type, title」属性を使いましたよ。
他にもたくさん属性がありますが、ざっと一覧表に整理してみました。

属性名 属性の概要
rel HTMLと外部ファイルの
関係(relation)を示す
↓ キーワード ↓ キーワードの概要
stylesheet スタイルシート
(alternateとの併用で代替スタイルシートを示す)
alternate 代替え文書
(hreflang属性との併用で翻訳版を、media属性との併用で別メディア版を示す)
icon ショートカットアイコン
search 検索ページ
help ヘルプ
prev 前へ
next 次へ
prefetch リンクを事前に読み込む
license 著作権
author 作者
href 外部ファイルのURLを示す 外部ファイルのURL(相対、絶対どちらでも)
type 外部ファイルのMIMEタイプ text/css(CSS) text/html(HTML)
application/pdf(PDF)など
その他は「ちょっとメモ:MIMEタイプ」参照
media 外部ファイルが対象とする
メディア(出力機)を示す
↓ メディアタイプ ↓ メディアタイプの概要
all すべての機器
screen パソコンのディスプレイ
tv テレビ画面
handheld 携帯電話などの端末
print プリンタ
projection プロジェクタ
tty 文字幅が固定された機器
(テレタイプなど)
speech
(以前のaural)
音声出力機
braille 点字ディスプレイなど
embossed 点字プリンタ
aural 音声出力機器
hreflang 外部ファイルの言語コード ja (日本語), en (英語), es (スペイン語),
fr (フランス語), ko (韓国語), zh (中国語) など
その他は「ISO 639:言語名コード一覧」参照
sizes 「rel="icon"」の場合の
アイコンのサイズを示す
数字で「sizes="16x16"」
または「sizes="any"」
アイコンの普通サイズは16x16。
他の数字を使う場合、先頭に0を付けないこと。
title 外部ファイルのタイトル グローバル属性の title と違って、これを
書かなくても、親要素のtitleは継承されない。
外部CSSのグループ化 リンクがCSSの場合、titleをつけるとCSSの
グループ化ができ読込み優先度が変わる。
また「rel="alternate stylesheet"」とする
ことで、代替えCSSのグループ名になる。

次回予告

次回は<link>の「media属性」を使って、外部CSSをパソコン画面用と印刷用に切り替えてみましょう。また、HTMLをPDFに切り替える方法もやってみましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.