HTML

HTMLのlink要素のtype属性とmedia属性の使い方を現役エンジニアが解説【初心者向け】

初心者向けにHTMLのlink要素のtype属性とmedia属性の使い方について解説しています。link要素は外部ファイルをHTML文書に結びつける際に使用されます。type属性とmedia属性が扱う内容と使い方、画面での動作をサンプルで試してみましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

HTMLのlink要素のtype属性とmedia属性の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

今回は、HTMLに関する内容だね！

どういう内容でしょうか？

link要素のtype属性とmedia属性の使い方について詳しく説明していくね！

お願いします！

link要素とは

link要素は外部のファイルやアイコンなどのリソースをHTML文章に結びつけるために使用します。以下のようにスタイルシートの参照に良く用いられます。

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

[PR] Webデザインで副業する方法とは

link要素で指定するtype属性とmedia属性について

アイコンなどを参照する場合はtype属性を指定します。以下はWebページのアイコンを指定している例です。なお、現代のブラウザはほとんど自動的にfavicon.icoを読み込もうとします。よって以下の記述が無くてもfavicon.icoファイルがあればWebページのアイコンとして設定されます。

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

特定の条件下でリソースを読み込む場合、media属性を指定します。例えば以下は印刷時に適用するスタイルシートを参照しています。

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

link要素について、詳しくは以下の記事も参考にしてください。

MDN – <link>：外部リソースへのリンク要素

link要素のtype属性とmedia属性を使ってみよう

今回のサンプルプログラムではlink要素のtype属性やmedia属性の使い方について確認します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="print.css" media="print">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>Sample</title>
</head>
<body>
  <div>こんにちは！</div>
  <hr>
  <input type="button" onclick="window.print()" value="印刷">
</body>
</html>

style.css

div {
  font-size: 3rem;
  color: lightblue;
}

print.css

input {
  display: none;
}

favicon.ico

実行結果は以下のようになります。Webページのアイコンが設定され、スタイルシートが適用されています。

印刷ボタンをクリックすると、印刷用のスタイルシートが適用され、ボタンが非表示になっていることが確認できます。

まとめ

今回の記事ではHTMLでlink要素のtype属性とmedia属性の使い方について学習しました。

監修してくれたメンター

太田和樹（おおたかずき）

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績：画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門（技術評論社）」。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

これだけは知っておきたい！HTML/CSSの基礎【人事担当者のためのIT勉強会レポート】

今回のテーマは、HTML/CSSの基礎です。なお、こちらの内容はTechAcademyのWebデザインオンラインブートキャンプでも扱っています。 ...

イベントレポート

HTMLタグ内でCSSが適用される優先順位を現役デザイナーが解説【初心者向け】

HTMLタグ内でCSSが適用される優先順位について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そ...

HTML

HTMLとCSSだけでポップアップ表示を作成する方法を現役デザイナーが解説【初心者向け】

HTMLとCSSだけでポップアップ表示を作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLで一つのタグにidを複数使う方法を現役エンジニアが解説【初心者向け】

HTMLで一つのタグにidを複数使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そ...

HTML

HTMLのtd要素、th要素とrowspan属性の使い方を現役デザイナーが解説【初心者向け】

HTMLのtd要素、th要素とrowspan属性の使い方について解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方の記事を...

HTML

HTMLで複数の画像を均等に横並びする方法を現役エンジニアが解説【初心者向け】

HTMLで複数の画像を均等に横並びする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 HTML...

HTML

あわせてよく読まれている記事

スマホ対応！CSSでメディアクエリの書き方【初心者向け】現役エンジニアが解説

今回はBootstrapなどを使わずにレスポンシブページを実現する方法であるメディアクエリについて説明します。 Webサイトを作る上でスマホ対応は当たり前になってきています。メディアクエリとはメディアタイプやメディア特性によって表示を変えるレスポンシブデザインで利用する設定です。レスポンシブデザインではスマホやタブレットやPCによって変わるメディアタイプやメディア特性に応じた最適な表示にするデザインを言います。メディアクエリを理解することはレスポンシブデザインへの理解へとつながる基礎的な部分になります。メディアクエリを理解することで、Web制作において様々な端末で最適な表示を可能にできます。これからWebサイトを作る上では必ず必要になる知識なので、ぜひ今のうちに習得しましょう。目次動画で学ぶ！メディアクエリとはメディアクエリとは Web制作で推奨されているメディアタイプメディア特性メディアクエリの書き方複雑なメディアクエリの組み合わせを実現する方法実際に書いてみよう田島悠介今回はメディアクエリを利用する方法を解説しよう。大石ゆかり田島メンター！！メディアクエリというのは何ですか〜？田島悠介スクリーンや印刷などのメディアタイプに加えて、さらに縦横の長さなどによるスタイルの適用範囲を決めることができるものなんだ。大石ゆかりなるほど、いろいろな条件に対応して見え方を変えるという感じでしょうか？よろしくお願いします！動画で学ぶ！メディアクエリとは今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。 [PR] Webデザインで副業する方法とはメディアクエリとは今や、Webページを閲覧する際にレスポンシブデザインであることは当たり前になりつつあります。メディアクエリはCSSを用いて、レスポンシブなWebページを作ることができます。 CSS3になってから登場した新しい表現なのでぜひ習得していきましょう。メディアタイプの種類メディアタイプ対応デバイス all すべてのデバイス braille 点字用ディスプレイ embossed 点字用プリンター handheld モバイルデバイス print プリンター projection プロジェクター screen ディスプレイ speech 音声出力デバイス tty 固定幅フォントで出力するデバイス tv テレビなお、メディアクエリ4からは、screen, print, speech, all を除くすべてのメディアタイプを非推奨に指定されています。 Web制作で推奨されているメディアタイプ Web制作で推奨されているメディアタイプは以下の4つです。 all screen print speech について詳しく解説していきます。 all すべてのメディアタイプに適用されます。コード例 @media all { p { color: green; } } 表示結果解説次のように@media allで宣言して{}内で指定のcssを記載すると適用されます。 allで適用すると結果的にすべてのメディアタイプで同じ処理になります。今回はcolor: white;で色が緑色になります。 screen ディスプレイが存在するメディアタイプに適用されます。 PC、スマホ、タブレットはscreenです。 screenの動作 See the Pen medis by マインクラフトゲームアプリプログラミング学校 (@programjp) on CodePen. 解説 screenのcolor:redという指定で文字が赤色で表示されています。 print 印刷用に適用されます。印刷プレビュー画面で確認できます。 print表示結果解説 screenのコードを印刷プレビューすると、青色になります。 speech 音声読み上げ機能の際に適用されます。今回は、次のコードで「メディアタイプによる、色、処理の変化」音声出力した場合、「、」の部分で空白時間が発生し、自然な語り口になります。 @media speech { p { speak: literal-punctuation; } } メディア特性メディア特性名メディア特性 any-hover マウスを該当要素の上に移動させた場合に処理をします。この移動をホバーと言います。 any-pointer ポインティングデバイスの性能に応じて表示するcssを変更できます。 aspect-ratio ビューポートの幅対高さのアスペクト比に応じて表示するcssを変更できます。 color 機器の表示色数性能に応じて表示するcssを変更できます。 color-gamut 機器の表示色域に応じて表示するcssを変更できます。 color-index 機器の色参照テーブルの項目数に応じて表示するcssを変更できます。 device-aspect-ratio 機器の幅対高さのアスペクト比に応じて表示するcssを変更できますが非推奨です。 device-height 機器のレンダリング面の高さを指定できますが、非推奨です。 device-width 機器のレンダリング面の幅を指定できますが、非推奨です。 display-mode cssのdisplay-modeで指定した内容に応じて表示するcssを変更できます。 forced-colors カラーパレットを制限している場合に応じて表示するcssを変更できます。メディアクエリ5以降の追加機能です。 grid 機器がグリッドとビットマップ画面のどちらを利用するか指定できます。 height ビューポートの高さを指定できます。 hover マウスホバーした際のcssを指定できます。 inverted-colors 色が反転している場合にcssを適用できますが、Safariのみ利用可能です。メディアクエリ5以降の追加機能です。 light-level 明るさに応じて表示するcssを変更できますが、メディアクエリ5以降の追加機能です。 monochrome 機器のモノクロ出力情報に応じて表示するcssを変更できます。 orientation ビューポートの向きに応じて表示するcssを変更できます。 overflow-block ブロック軸方向にあふれたコンテンツの扱いに応じて表示するcssを変更できます。 overflow-inline インライン軸方向にあふれたコンテンツがスクロールできるかに応じて表示するcssを変更できます。 pointer ポインティングデバイスの性能に応じて表示するcssを変更できます。ただし、 any-pointerのほうがより正確に処理できます。 prefers-color-scheme ユーザーが表示させたい明るさに応じて表示するcssを変更できます。メディアクエリ5以降の追加機能です。 prefers-contrast 隣接色のコントラスト量の増減に応じて表示するcssを変更できます。ただ、実験段階のため表示できるブラウザは存在しません。 prefers-reduced-motion ユーザーが表示上で動きを少なくしたい場合に適用できます。前庭運動障害をお持ちの方向けの設定です。メディアクエリ5以降の追加機能です。 prefers-reduced-transparency ユーザーが透明度を下げたいと希望している場合に適用できます。メディアクエリ5以降の追加機能です。 resolution 機器のピクセル解像度に応じて表示するcssを変更できます。 scan 機器のスキャン処理方式に応じて表示するcssを変更できます。 scripting JavaScriptなどのスクリプト利用に応じて表示するcssを変更できます。メディアクエリ5以降の追加機能です。 update コンテンツ表示更新頻度に応じて表示するcssを変更できます。 width ビューポートの幅に応じて表示するcssを変更できます。メディアクエリの書き方メディアクエリの書き方は以下の通りです。 link要素として指定する場合スタイルシートに指定する場合 CSS内で@importする時に記述する CSS内で@mediaを記述する詳しく解説していきます。 link要素として指定する場合 headerのlink要素でメディアクエリを指定する方法を解説します。サンプルコード <link rel="stylesheet" href="./media.css" media="screen and (max-width: 780px)"> 解説 href=”./media.css”では、読み込むファイルのパスを、同じ階層にあるmedia.cssで指定しています。 media=”screen and (max-width: 780px)”では、メディアタイプの指定 and (メディア特性の指定)を行っています。今回は表示デバイスの最大幅が780pxの場合適用されます。つまり実際の表示の変化はmedia.cssの実装が適用されます。 CSS内で@importする時に記述するスタイルシート内に@importを利用してメディアクエリを適用する方法について解説します。サンプルコード @import url('media.css') screen and (max-width: 780px); 解説 @importでインポートすることを宣言しています。 url(‘media.css’)でmedia.cssをインポートしています。 screen and (max-width: 780px)では、メディアタイプの指定 and (メディア特性の指定)を行っています。今回は表示デバイスの最大幅が780pxの場合、media.cssが適用されます。つまり実際の表示の変化はmedia.cssの実装が適用されます。 CSS内で@mediaを記述するスタイルシート内に@mediaを利用してメディアクエリを適用する方法について解説します。サンプルコード @media screen and

CSS

HTMLでラジオボタンとチェックボックスを表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、ラジオボタンとチェックボックスを表示する方法について、初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介ラジオボタンとチェックボックスを表示する方法について詳しく説明していくね！大石ゆかりお願いします！入力フォームの選択ボタン入力フォームでよく見かける選択ボタンに、ラジオボタンとチェックボックスがあります。どちらも<input>タグにtype属性を指定することで簡単につくることができます。 <input>タグについては HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法をご覧ください。ラジオボタン、チェックボックスは以下のタグで表示することが可能です。・ラジオボタン <input type=”radio”> 選択肢のなかから、ひとつだけを選択するボタン（※同一name属性内で、一項目しか選択できない）・チェックボックス <input type=”checkbox”> 選択肢のなかから、複数選択ができるボタン（※同一name属性はひとまとまりのデータとして扱われる）・value属性選択項目をデータとして送信する際に、データの受けとり手に値を知らせます。・name属性要素（ここでは<input type=”●●”>）に名前をつけて、なんの要素（選択ボタン）であるかを指定します。大石ゆかり typeを使うと他にもいろいろ設定できるんですかー？田島悠介他にも送信ボタンであったり、文字を入力できるフォームも簡単に作れるんだよ！大石ゆかりへぇ〜じゃあアンケートページとかでよく使われてそうですね！それでは具体的な実装方法をみていきましょう。ラジオボタンラジオボタンという名前は、昔の自動車に搭載されていたカーラジオが、ひとつの局のボタンを押すと、他の局のボタンが選択できない仕様だったことから来ているそうです。ラジオボタンは選択肢のなかから、ひとつだけを選択する入力ツールになります。 <input type=”radio”>にname属性を”gender”、valueを”male”と”female”に設定して性別選択ボタンをつくりましょう。タグの終わりには、実際にブラウザで表示される項目名(男性・女性)を書きます。選択肢の値(value)が”male”と”female”の、”gender”という名前(name)がついたラジオボタン（<input type=”radio”>）です。 <input type="radio" name="gender" value="male">男性 <input type="radio" name="gender" value="female">女性これでどちらか一方を選択できるボタンができました。上記のHTMLをコピー&ペーストして、もうひとつラジオボタンをつくってみましょう。ここでは、Webページの訪問者からサイトを知った経緯を知りたいと仮定して、選択肢の値(value)にサイトを知るきっかけとなった項目を設定し、”trigger”という名前のついたラジオボタンをつくります。 <input type="radio" name="trigger" value="facebook">facebook <input type="radio" name="trigger" value="twitter">twitter <input type="radio" name="trigger" value="hatebu">はてなマーク <input type="radio" name="trigger" value="syoukai">知人からの紹介今度は、”gender”と”trigger”の2つの選択ツールができました。このとき、name属性を”trigger”に書き換え忘れて”gender”のままにしておくと、”gender”と名付けられたすべての項目「男性、女性、facebook、twitter、はてなブックマーク、知人からの紹介」から、どれか一つの項目を選択することになってしまいます。複数の選択群をつくる際には、必ずカテゴリーごとにしっかりとname属性を分けるように注意しましょう。 [PR] Webデザインで副業する方法とはdisabled属性 disabled属性は、フォーム部品を無効化することができます。この属性で指定することで、フォーム部品の選択や書き換えを行うことができます。用途の目的としては、同じフォーム流用するが、ユーザーの選択肢によってdisabeld属性を使用し一部の選択肢の書き換えを禁止する時に使用します。 disabled属性の実例 <!DOCTYPE html> <html> <head><meta charset="UTF-8"></head> <body>  <input type="radio" name="gender" value="male" disabled/>男性 <input type="radio" name="gender" value="male"/>女性

HTML

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。異なる単位で複雑な計算も簡単に指定できます。レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。目次link要素とはlink要素で指定するtype属性とmedia属性についてlink要素のtype属性とmedia属性を使ってみようまとめ監修してくれたメンターそもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？田島悠介いろいろ方法があるけどcalcファンクションを使えば簡単だよ。大石ゆかり calc？CSSで計算ができるんですか？田島悠介その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。大石ゆかりへぇー。わかりやすいですね。田島悠介そうなんだ。まずはどういった記述の仕方をするか見てみよう。大石ゆかりはい！ calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。 calcファンクションを使うメリット異なる単位で計算することができる計算が明白になる calc()は結果の値ではない異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。 [PR] Webデザインで副業する方法とはcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。構文プロパティ（widthなど）: calc(式) 四則演算が使用できる指定する式では四則演算の演算子（+、-、*、/）が使えます。前後に空白が必要加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。入れ子が可能 calcファンクションは入れ子にできます。入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。 calcファンクションの実装例実際にcalcファンクションを使った実装例を見てみましょう。ルートに基づいたサイズ指定要素を3等分の幅にする左右のセンタリング上下の中央配置ヒーローヘッダーの高さ調整ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。ソースコード「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">

CSS

HTMLでlinkタグとscriptタグを使ってファイルを読み込む方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、linkタグとscriptタグを使ってファイルを読み込む方法について解説します。 linkタグとscriptタグは、リッチなサイトを作りたいときに必要になるタグなので、ぜひ参考にしてください。目次 linkタグとscriptタグ linkタグの使い方 scriptタグ【動画での解説はこちら！】田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 linkタグとscriptタグを使ってファイルを読み込む方法について詳しく説明していくね！大石ゆかりお願いします！ linkタグとscriptタグ Webサイトは、htmlとcssで書かれた多くのページによって構成されています。また、より動きのあるサイトを作るには、それに加えてJavaScriptというプログラミング言語を使ってページを作ります。一つのプログラムファイルにhtml・css・JavaScriptを記述するのは不可能ではありません。しかし、プログラムファイルのコードが長くなり、どこに何が書かれているかがわかりづらくなってしまいます。つまり、プログラムファイルに対するコードの可読性が失われるため、一つのプログラムファイルに記述するのはおすすめできません。さらに、htmlはページの文書構造をつくり、cssはページを装飾し、JavaScriptはページに動きを付け加えるといったそれぞれの異なる役割を持ちます。多くのページでサイトが構成される場合、htmlとcssを分割すれば、cssの特定箇所を修正するだけでサイトページを変更できます。例）サイトのイメージカラーを変えたとき、CSSのカラーを一括すると、サイトの全ページのイメージカラーを変更できるこうした理由からWeb製作の現場では、html・css・JavaScriptのファイルはそれぞれ別ファイルに分けて作ることが一般的です。その別々に編集したファイルを紐付けて、一つのページとしてまとめるためにlinkタグとscriptタグがあります。 linkタグ linkタグは、他のファイルをリンクしてhtmlファイルに読み込ませます。 rel属性（relationの略）でそのファイルがどんな文書であるかを指定します。（※スタイルシート(stylesheet)やファビコン(favicon)など） scriptタグ scriptタグは、JavaScriptを読み込むときに使います。 [PR] Webデザインで副業する方法とはlinkタグの使い方ここからは具体的な使い方について例をみていきます。まず、htmlファイルとcssファイルの2種類を用意します。 htmlファイルには<body>の部分に<h1>タグで「linkタグの使い方を学ぼう」と入力してみます。 cssのファイルには下記のように記述してみましょう。 ※「font-size: 60px;」は<h1>で書かれた文字のサイズが60px、「color: red;」は<h1>で書かれた文字色が赤という意味です。 h1 { font-size: 60px; color: red; } htmlファイルをブラウザで読み込んでみると、<h1>で囲んだ文字が表示されました。 htmlファイルとcssファイルが繋がっていないため、この状態ではまだcssファイルで指定した文字の大きさや色は適用されません。そこでlinkタグを使って、cssで書いた内容をhtmlファイルに繋げましょう。 rel属性でリンクタイプを指定し、type属性によってどのようなテキストであるか、またhref属性でリンク先のURLを指定します。 linkタグは<head>タグ内に記述しましょう。 <link rel="stylesheet" type="text/css" href="style.css"> すると、<link>タグで指定したファイル（”style.css”）が読み込まれ、文字の大きさと色が変わりました！続いて、ファビコンの例も見てみましょう。ファビコンとはブックマーク登録やタブに表示されるときに出てくるアイコンです。実際のWebサイトでは下のように設定されています。スタイルシートやファビコンを別ファイルから読み込む際にはlinkタグを使うということを覚えておきましょう。大石ゆかり CSSは外部ファイルとして読み込んだほうがいいんですか？田島悠介たくさんのページで共通して使う場合は、もちろんHTMLと分けたほうがソースコードも見やすくなるからね。大石ゆかりタグに直接CSSを適用したら、どちらが優先されるんでしたっけ？田島悠介タグに直接適用したCSSの方が優先されるよ。大石ゆかり OK！linkタグ覚えました！ scriptタグ続いてscriptタグです。 Webページには2種類のページがあります。１つ目は、html・cssだけで書かれた文書のようなページ（静的なページといいます）です。 2つ目は、ドロップダウンメニューやスライドショーなどといったユーザーがアクションを起こすと、それに伴って何か変化が起こる動的なページです。動的なページには、JavaScriptなどのプログラム言語が使われており、演算機能やループ処理など様々な機能が利用できます。このJavaScriptを記述する際に利用するタグが、scriptタグです。 scriptタグを使ってhtmlファイル内にJavaScriptを書いてみましょう。 <script type="text/javascript">（JavaScriptのコード）</script> ここでは、JavaScriptで「『JavaScriptでループ処理』という文を1から100までループさせる」というコードを書いてみます。 <script type=”text/javascript”>と</script>の間に書かれている「var i;」から「<BR>”);」までの部分がJavaScriptです。 JavaScriptのループ処理がわからない場合は、JavaScriptでfor文を使ってループ処理する方法をご覧ください。このhtmlファイルを読み込むと、ブラウザ上で<script>タグ内で書いた処理が実行されました。今度は、別ファイルで記述したJavaScriptを<script>タグでリンクさせて、htmlファイルに読み込ませてみましょう。 htmlのファイルとjavascriptのファイルを2つ用意して、実行したいJavaScriptのコードをjavascriptのファイルに記述します。（保存する際には「.js」という拡張子を使いましょう） type属性によってどのような種類のテキストなのかを指定し、src属性によって外部ファイル（ここでは”javascript.js”）を読み込みます。「.js」という拡張子の付いたファイルにコードを書く場合は、開始タグと終了タグの間には何も記述しません。 <script type="text/javascript" src="javascript.js"></script> htmlファイルをブラウザ上で表示させると、src属性で指定した”javascript.js”が読み込まれ、先ほどと同じようにJavaScriptの処理が実行されました。このように別々のファイルで書かれた内容も、<link>タグや<script>タグを使ってファイル同士を自在に紐付けることができます。 <link>タグも<script>タグも属性を付け加えることで、紐付けたいファイルの種類や場所はどこなのかといった情報を指定します。外部ファイルを組み込んでリッチなサイトを作りたいときに必要になってきますので、ぜひ覚えておきましょう。今回はlinkタグとscriptタグを使ってファイルを読み込む方法についてご紹介しました。 HTMLの基礎をさらに学びたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法み合わせてご覧ください。執筆してくれたメンターメンターSSさん文系・未経験でIT企業に就職して、9年目。環境構築から開発・設計・テストまで何でも屋さんをやっていました。テックアカデミーではJavaコースを担当しています。大石ゆかり HTMLは文書構造、CSSはデザイン・装飾。JavaScriptは何でしたっけ？田島悠介 JavaScriptはブラウザ上で動作する、HTMLファイルの中に書けるプログラミング言語で、Webサイトと親和性が高いんだよ。大石ゆかりプログラミング言語って何だか難しそう。田島悠介コツをつかめば簡単だよ。習い事と同じで、教わればあっと言う間に出来るようになるよ。 TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

HTML

jQueryで要素を選択するセレクタの使い方【初心者向け】

JavaScriptのライブラリであるjQueryでセレクタの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。ある要素だけ動きを出したいなど特定の要素に処理を行う際に便利なので、ぜひ理解していきましょう。目次link要素とはlink要素で指定するtype属性とmedia属性についてlink要素のtype属性とmedia属性を使ってみようまとめ監修してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。セレクタとはセレクタとは、jQueryで要素を選択するための文字列のことです。例えば、以下のようなHTMLがあったとします。 (この例ではdivやpやh1が「要素」です) <div id="div1"> <p class="p1">p1</p> <p class="p2">p2</p> <p class="p3">p3</p> </div> <div id="div2"> <h1 class="h1">h1</h1> <h1 class="h2">h2</h1> <h1 class="h3">h3</h1> </div> このHTMLに対して、「p1クラスが設定されている要素を選択」する場合、$(“.p1”)というセレクタを使います。 (厳密には$(“.p1″)のうち”.p1″部分だけがセレクタです) ほかにも様々な選択の仕方がありますので、順に見ていきましょう。大石ゆかり HTMLタグやクラス指定がありますね。田島悠介 jQueryの$()の中にHTMLタグやclass属性の名前を書くと、その要素を取得できるんだよ。大石ゆかり HTMLタグであっても、class属性であっても同じように書いて取得できるんですね！田島悠介そうそう。HTMLタグとid属性とclass属性を中心に、主な指定方法について見てみよう！セレクタを指定する書き方セレクタを指定する書き方にはいくつかの種類がありますが、本稿では以下のセレクタについて解説します。要素セレクタ：HTMLタグで指定クラスセレクタ：class属性で指定 IDセレクタ：id属性で指定グループセレクタ：複数のセレクタを組み合わせて指定子孫セレクタ：階層的に要素を指定属性セレクタ（属性フィルタ）：要素の属性をもとに指定セレクタの書き方を、以下のHTMLの要素を例に説明します。「ここにセレクタを使ったコードを書きます」の部分を書き換えながら確認していきましょう。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="div1"> <p class="pKisu">p1</p> <p class="pGusu">p2</p> <p class="pKisu">p3</p>

JavaScript

JavaScriptでDOM操作で要素を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptのDOM操作で要素を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次link要素とはlink要素で指定するtype属性とmedia属性についてlink要素のtype属性とmedia属性を使ってみようまとめ監修してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptのDOM操作で要素を削除する方法について詳しく説明していくね！大石ゆかりお願いします！ ※DOMとはHTMLを操作する仕組みのことで、木の枝のような階層構造になっています。DOMの操作について、詳しくは解説記事「JavaScriptでDOMを操作する方法【初心者向け】」をご覧ください。要素自身を削除する呼び出した要素自身を削除するときは、removeメソッドを使います。書式削除する要素.remove(); 削除する要素自身から、removeメソッドを呼び出します。 removeメソッドで要素を削除すると、削除した要素内の他の子要素も含めてすべて削除されます。クリックされた時の処理など、イベントを発生させた要素そのものを削除する場合は、受け取ったEventオブジェクトのtargetからremoveメソッドを呼び出せます。他の要素を削除したいのであれば、「document.getElementById」などで取得します。 ※イベントとは、マウスのクリックやページの読み込みが完了したときなどの動作を指します。JavaScriptではイベントが発生したときに実行する関数を指定するために、各要素のonclick属性などに処理する関数を指定できます。onclick属性については解説記事「クリック時の処理！JavaScriptでonclickを使う方法【初心者向け】」をご覧ください。 ※Eventオブジェクトとは、イベントが発生したときの情報が収められているものです。イベントの発生源である要素などが取得できます。JavaScriptの関数にEventオブジェクトを渡すには、HTMLのonclick属性に「event」を引数として渡します。サンプルコードクリックしたボタンそのものと、「パープル」の要素自身を削除するサンプルコードです。ソースコード // 「このボタンを削除」がクリックされた時の処理 function del_this(event) { //イベントの発生源の要素を削除 event.target.remove(); } // 「パープルを削除」がクリックされた時の処理 function del_purple(){ //「パープル」の要素をIDから取得 const elem_purple = document.getElementById('purple'); //elem_purple（idがpurple）の要素自身を削除 elem_purple.remove(); } <p>レッド</p> <p id="purple">パープル</p> <p>グリーン</p> <p>ブルー</p> <button onclick="del_this(event)">このボタンを削除</button> <button onclick="del_purple()">パープルを削除</button> 実行結果 See the Pen js_remove_this by mentor-inoue-y (@mentor-inoue-y) on CodePen. 解説クリックされた要素自身を削除 function del_this(event) { ～ } 「このボタンを削除」ボタンがクリックされたときに呼び出される関数を定義しています。 HTMLの「このボタンを削除」ボタン（button要素）にあるonclick属性に、「del_this(event)」と指定して関数が呼び出されるようにしています。 HTMLのonclick属性でeventを引数で渡すことにより、イベントを発生させた要素の情報を関数に送れます。イベントを処理する関数 del_this(event)でeventを受け取って、クリックされた要素をevent.targetで取得できます。 event.target.remove(); event.targetはイベント（今回はクリック動作）の発生源の要素である「このボタンを削除」ボタンを指していて、removeメソッドにより要素自身を削除できます。取得した要素自身を削除 function del_purple(){ ～ } 「パープルを削除」ボタンがクリックされたら呼び出される関数を定義しています。 HTMLの「パープルを削除」ボタン（button要素）にあるonclick属性に、「del_purple()」と指定して関数が呼び出されるようにしています。 const elem_purple =

JavaScript

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLのlink要素のtype属性とmedia属性の使い方を現役エンジニアが解説【初心者向け】

目次

link要素とは

link要素で指定するtype属性とmedia属性について

link要素のtype属性とmedia属性を使ってみよう

まとめ

監修してくれたメンター

関連するキーワード

あわせてよく読まれている記事

スマホ対応！CSSでメディアクエリの書き方【初心者向け】現役エンジニアが解説

HTMLでラジオボタンとチェックボックスを表示する方法【初心者向け】

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

HTMLでlinkタグとscriptタグを使ってファイルを読み込む方法【初心者向け】

jQueryで要素を選択するセレクタの使い方【初心者向け】

JavaScriptでDOM操作で要素を削除する方法を現役エンジニアが解説【初心者向け】

TechAcademyから
現役エンジニアの方へ
お知らせ

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

目次

link要素とは

link要素で指定するtype属性とmedia属性について

link要素のtype属性とmedia属性を使ってみよう

まとめ

監修してくれたメンター

記事を検索

関連するキーワード

関連する記事

あわせてよく読まれている記事

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ