
スキルアップ
2021.01.27
給料が高い仕事の特徴や年収を調査。高収入を目指す方法も紹介
「給料が高い仕事に就きたい」「今の給料に不満がある」など、給料についての願望や悩みは、多かれ少なかれ、持っている方も多いのではないかと思います。この記事では、給料が高い仕事の業界や特徴、年収を上げるための具体的な取り組み […]
ITコラム
2017.01.20
メタデータ・コンテンツの要素の1つであるlink要素は、外部CSSを組み込んだり、プリント用にCSSやPDFを切り替えたり、他言語版やモバイル版のHTMLがあればそちらにリンクさせたり、ショートカットアイコンを表示させたり、など様々なことができてWebサイトを作る際に欠かせない要素です。
このような重要な要素であるlink要素について、数回に分けて少し詳しく見ていきたいと思います。
今回は、link要素に関連のあるMIMEタイプとlink要素の属性についてまとめます。
HTML 【メタデータ】1 ~ メタデータ・コンテンツの概要とbase要素
HTML 【メタデータ】2 ~ link要素(1)MIMEタイプ一覧と属性一覧( 本ページ )
HTML 【メタデータ】2 ~ link要素(2)CSSファイルの読み込み
HTML 【メタデータ】2 ~ link要素(3)media属性
HTML 【メタデータ】2 ~ link要素(4)@importと@media
HTML 【メタデータ】2 ~ link要素(5)rel属性
HTML 【メタデータ】3 ~ style要素
HTML 【メタデータ】4 ~ meta要素
link要素の内容に入る前に、MIMEタイプについて紹介します。
<link rel=”stylesheet” href=”column.css” type=”text/css” />のようなリンクの指定をした場合など、「 text/css 」のような書き方を目にしたことがあると思います。
上記の書き方(タイプ名 /(スラッシュ)サブタイプ名)をMIMEタイプといいます。
主なMIMEタイプは、以下の通りです。
MIMEタイプ | 拡張子 | ファイルの概要 |
---|---|---|
application/msexcel | .xls | マイクロソフト Excel |
application/mspowerpoint | .ppt | マイクロソフト PowerPoint |
application/msword | .doc | マイクロソフト Word |
application/pdf | PDFファイル | |
application/rss+xml | (.rdf または .xml) | RSSファイル |
application/atom+xml | (.xml) | Atomファイル |
application/x-httpd-cgi | .cgi | CGIスクリプト |
application/x-httpd-php | .php | PHPスクリプト |
application/x-shockwave-flash | .swf | フラッシュファイル |
application/x-java-vm | .class | JAVAアプレット |
application/zip | .zip | ZIPファイル(圧縮ファイル) |
audio/mpeg | .mp3 | MP3(音声ファイル) |
audio/aac | .m4a | AAC(音声ファイル) |
audio/ogg | .ogg | Ogg(音声ファイル) |
audio/midi | .mid .midi | MIDI(音声ファイル) |
audio/vnd.rn-realaudio | .ra | RealAudio(音声ファイル) |
audio/wav | .wav | WAVE(音声ファイル) |
image/gif | .gif | GIF画像ファイル |
image/jpeg | .jpg .jpeg | JPEG画像 |
image/png | .png | PNG画像 |
image/svg+xml | .svg .svgz | SVG 形式画像 |
text/css | .css | スタイルシート |
text/html | .html .htm | HTMLファイル |
text/javascript | .js | Javascriptファイル |
text/plain | .txt | テキストファイル |
text/xml | .xml .xsl | XMLファイル |
video/mpeg | .mpeg .mpg | MPEG(動画ファイル) |
video/avi | .avi | AVI(動画ファイル) |
video/mp4 | .mp4 | MP4(動画ファイル) |
video/webm | .webm | WebM(動画ファイル) |
video/ogg | .ogv | Ogg(動画ファイル) |
video/quicktime | .qt .mov | Quick Time(動画ファイル) |
link要素で使用する属性は、次の通り6個あります。これらを組み合わせてリンクの指定をします。
要素 | link |
属性 | rel属性、href属性、hreflang属性、type属性、sizes属性、media属性 |
注意点 | ●たいてい<head>内に書きます。 ●終了タグはありません。 ●rel属性とhref属性は必須です。 ●外部ファイルの種類はrel属性で、外部ファイルの場所(URL)はhref属性で指定します。 |
各属性とその値については、下の表の通りです。
属性 | 概要 | 値 | |
---|---|---|---|
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)など | |
media | 外部ファイルが対象とするメディア(出力機)を示す | all | すべての機器 |
screen | パソコンのディスプレイ | ||
tv | テレビ画面 | ||
handheld | 携帯電話などの端末 | ||
プリンタ | |||
projection | プロジェクタ | ||
tty | 文字幅が固定された機器(テレタイプなど) | ||
speech (以前のaural) |
音声出力機 | ||
braille | 点字ディスプレイなど | ||
embossed | 点字プリンタ | ||
aural | 音声出力機器 | ||
hreflang | 外部ファイルの言語コードを示す | ja (日本語)、en (英語)、es (スペイン語)、fr (フランス語)、ko (韓国語)、zh (中国語) など | |
sizes | 「rel=”icon”」の場合のアイコンのサイズを示す | 数字で「sizes=”16×16″」 または「sizes=”any”」 アイコンの普通サイズは16×16 他の数字を使う場合、先頭に0を付けないこと |
|
title | 外部ファイルのタイトルを示す | グローバル属性の title と違って、これを書かなくても、親要素のtitleは継承されない | |
外部CSSのグループ化を示す | リンクがCSSの場合、titleをつけるとCSSのグループ化ができ読込み優先度が変わる また「rel=”alternate stylesheet”」とすることで、代替えCSSのグループ名になる |
スキルアップ
2021.01.27
「給料が高い仕事に就きたい」「今の給料に不満がある」など、給料についての願望や悩みは、多かれ少なかれ、持っている方も多いのではないかと思います。この記事では、給料が高い仕事の業界や特徴、年収を上げるための具体的な取り組み […]
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
INTERNOUS,inc. All rights reserved.