TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS レンダリングブロッキングリソースとして扱われるCSSを現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
CSS

レンダリングブロッキングリソースとして扱われるCSSを現役エンジニアが解説【初心者向け】

初心者向けにレンダリングブロッキングリソースとして扱われるCSSについて解説しています。Webサイトが表示されるまでの処理の流れと、ページの表示速度を改善する方法を説明します。対処前と後での速度を比較してみましょう。

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

レンダリングブロッキングリソースとして扱われるCSSについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

レンダリングブロッキングリソースとして扱われるCSSについて詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

レンダリングブロックリソースとは

WebページはHTMLとCSSやJavaScriptで構成されます。ブラウザにWebページが表示するまでの流れは以下のようになっています。

  • HTMLを読み込む
  • headセクションに書かれてあるCSSやJavaScriptなどの外部ファイルを読み込む
  • bodyセクションに書かれてあるHTMLを順番に解釈しながら画面に描画していく。

Webページを読み込んで画面に描画することを「レンダリング」と呼びます。CSSはWebページの見た目に影響するためheadセクションに読み込む記述を書いておいて、bodyセクションがレンダリングされる前に読み込んでおけるようにします。すなわちCSSの読み込みが終わらないとレンダリングが開始できない、ということになります。

このようなレンダリングを待たせる（ブロックする）要因となる外部ファイルなどを「レンダリングブロックリソース」と呼びます。

headセクションに書いてあるCSSの他、容量の大きい画像ファイルなどもレンダリングをブロックするリソースになります。一般的にWebページの読み込みが３秒以内に終わらないとユーザーはWebページから去ってしまうと言われています。レンダリングブロックリソースを減らすことはWebページの閲覧数を増やす上で非常に重要な要素となっています。

 

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

ページの表示速度を診断してみよう

ページの表示速度はブラウザChromeのデベロッパーツールで確認できます。デベロッパーツールのNetworkタブを開きながらページを読み込んでみましょう。どのリソースにどのぐらい読み込み時間がかかっているのか、詳細に確認できます。

 

ページの表示速度改善方法について

ページの表示速度を改善するには以下のような手法があります。

  • JavaScriptファイルの読み込みはbodyセクションの最後にする
  • 不要なCSSは読み込まない
  • 外部ライブラリであれば、圧縮（min）形式のファイルを使用する
  • CDN（Content Delivery Network）を使う

CDNとはライブラリをインターネット上で引用できるよう公開しているサービスです。この他の手法などについて、詳しくは以下の記事も参考にしてください

MDN – プログレッシブ読み込み

 

速度改善の前後を比較しよう

今回のサンプルプログラムでは圧縮していないCSSと、圧縮形式のCSSとの読み込み速度を比較します。ソースコードはBootstrap4のサイトの雛形ソースコードを参考にしています。

Bootstrap4 – はじめに

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="./bootstrap.min.css">
  <title>Hello, world!</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p><span class="badge badge-primary">重要</span> 新着メッセージです！</p>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="./bootstrap.js"></script>
</body>
</html>

実行結果は以下のとおりです。圧縮形式のbootstrap.min.cssは読み込みに平均7msかかりました。

次に圧縮していない形式のbootstrap.cssに変えて試してみましょう。実行結果は以下のとおりです。平均10msと、約1.5倍程度の時間がかかるようになりました。

デベロッパーツールを使うとレンダリングブロックリソースを特定することができます。改善する手法も様々ですのでぜひWebページの読み込み速度改善にチャレンジしてみましょう。

 

まとめ

今回の記事ではレンダリングブロッキングリソースとして扱われるCSSについて学習しました。

 

監修してくれたメンター

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

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

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

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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

記事を検索

関連するキーワード

関連する記事

CSSで斜線を引く方法を現役デザイナーが解説【初心者向け】

CSSで斜線を引く方法について解説します。これが使えるようになると、画像にグラデーションを入れれるなど表現の幅が増やせます。ぜひ参考にしてみてください。 ...
CSS

CSSのletter-spacingの使い方【初心者向け】

CSSのletter-spacingの使い方について解説します。 そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読む...
CSS

CSSで複数行のdtとddを横並びにする方法【初心者向け】

CSSで複数行のdtとddを横並びにする方法について解説します。 dt要素とdd要素を改行させないcompact属性ががHTML5から廃止されたので、CS...
CSS

Webページごとに異なるCSSを適用する方法を現役デザイナーが解説【初心者向け】

Webページごとに異なるCSSを適用する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

実際に書く！CSSで背景画像を透過させる方法【初心者向け】

CSSで背景画像を透過させる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも...
CSS

CSSでリンクの下線を消す方法を現役エンジニアが解説【初心者向け】

本記事では、CSSでリンクの下線を消す方法についてご紹介します。 デザインに凝るために下線を消したい aタグを使ってボタンを作りたい とお...
CSS

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

CSSの読み込み速度が遅い原因と対処法を現役エンジニアが解説【初心者向け】

CSSの読み込み速度が遅い原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 CSSの読み込み速度が遅い原因と対処法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 読み込み速度が遅いとどうなるか 読み込み速度を調べる方法 読み込み速度が遅い原因と対処法 読み込み速度を改善しよう まとめ   読み込み速度が遅いとどうなるか WebページはHTMLやCSS、JavaScriptなどで構成されます。CSSはWebページの見た目に影響するため、読み込みが終わってからWebページが描画されます。読み込み速度が遅いということは、Webページが表示されるまでの時間が長くなるということです。 一般的にWebページが表示されるまで3秒以上かかるとユーザーがWebページを見ずに去る確率が高くなると言われており、読み込み速度はWebページにとって重要な要素の1つです。   [PR] Webデザインで副業する方法とは読み込み速度を調べる方法 読み込み速度を調べるにはブラウザChromeのデベロッパーツールのNetworkタブを使用します。Networkタブを開いたままWebページをリロードすると、ページの読み込み速度を確認することが出来ます。   読み込み速度が遅い原因と対処法 読み込み速度が遅い場合、いくつかの原因が考えられます。   不要なCSSファイルの読込 CSSファイルはheadセクションで読み込みを行います。読み込みが完了するまでWebページの描画（レンダリング）が行われないため、レンダリングブロックリソースと呼ばれています。複数のライブラリなどを使用している場合、不要なCSSファイルを読み込んでいないか、再確認しましょう。 また圧縮形式のCSSファイルの使用、CDN（Content Delivery Network。インターネット上でライブラリを共用する仕組み）の利用も検討しましょう。レンダリングブロックリソースについては以下の記事も参考にしてください。 Web Fundamentals – レンダリングブロックCSS   JavaScriptファイルの読込位置 JavaScriptファイルはbodyタグの最後で読み込むようにします。headセクションで読み込むと、Webページのレンダリング速度に影響するため注意しましょう。   重い動画や画像ファイルの使用 現在のスマートフォンのカメラの性能はとても向上しており写真のファイルサイズも大きくなっています。スマートフォンで撮影した写真をそのままWebページに組み込むと表示に支障をきたすレベルのファイルサイズです。とくにWebサイトの背景や見出しのイメージには重い動画や画像ファイルは使用しないようにしましょう。 画像ファイルはファイルサイズを小さくするか、減色処理を行うようにします。大きくても500kByteは超えないぐらいのサイズが理想的です。   読み込み速度を改善しよう 先程の例を再度確認すると、CSSの読み込みに非常に時間がかかっていることが分かります。 不要なCSSを整理した結果が以下となります。 CSSの読み込み速度が早くなったことでWebページ全体の読み込み速度も改善されたことが確認できます。   まとめ 今回の記事ではCSSの読み込み速度が遅い原因と対処法について学習しました。   監修してくれたメンター 太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門（技術評論社）」。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
CSS

基礎から学ぶ！HTMLにCSSを適用（読み込み）させる方法【初心者向け】

基本的にHTMLだけでは文字を表示するだけで、リッチなデザインが整ったWebデザインを制作することは難しいです。 そんな時に必要になってくるのがCSSです。 HTMLでCSSを読み込むためには、2つの方法があります。 今回は、その方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次レンダリングブロックリソースとはページの表示速度を診断してみようページの表示速度改善方法について速度改善の前後を比較しようまとめ監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLにCSSを適用（読み込み）させる方法について詳しく説明していくね！ 大石ゆかり お願いします！   CSSの読み込み方（適用方法） HTMLでCSSを読み込むためには、次の2つの方法があります。 外部CSSファイルをHTMLから読み込む方法 HTMLファイル内に直接CSSを記述する方法   1.外部CSSファイルを読み込む方法 外部CSSファイルを読み込む方法は、Webデザインの現場で一般的に使用されている方法です。 事前に拡張子が「.css」のファイルを用意し、HTMLに以下のタグを記述します。 <link rel="stylesheet" href="sample.css"> HTMLファイルに上記のコードを1行追加することで、sample.cssという名称のファイルに記述されたCSS定義をHTMLに適用することができます。   また、この1行をHTMLファイルのどこに記述するかという点についてですが、場所はHTMLファイルの<head>タグ内に記述します。 以下のようにHTMLファイルに記述しましょう。 HTML <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="sample.css"> <title>HelloTechAcademy</title> </head> <body> <p>ここにHTMLの文章などが入ります</p> </body> </html> ここで、CSSファイル読み込み処理のhrefの値は、HTMLファイルとCSSファイルの配置場所によって変化するので気を付けましょう。 上記サンプルの場合は、HTMLファイルとCSSファイルは同じディレクトリに配置する必要があります。   また、HTMLファイルと同じディレクトリにcssというフォルダがあり、その中にsample.cssというファイルが配置されている場合、CSSファイル読み込み処理は以下のように記述します。 <link rel="stylesheet" href="css/sample.css">   2.HTMLファイル内に直接CSSを記述する方法 HTMLファイル内に直接CSSを記述する方法は、一般的にはほとんど使う機会の無い方法ですが、このような適用のさせ方もあります。 まず、以下のようにCSS定義を<style>タグの中に記述します。 <style type="text/css"> p { color : red; } </style>   用意した<style>タグは、HTMLファイルの<head>内に以下のように記述します。 HTML <html> <head> <meta charset="UTF-8"> <style type="text/css">p { color
HTML

簡単に変換できる！PHPでCSVファイルを読み込む方法【初心者向け】現役エンジニアが解説

PHPでCSVファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 fgetcsv関数を使ってCSVファイルを読み込めば、表計算ソフトなどからPHPにデータを取り込めます。 たとえば、Excelで作った商品リストをCSVファイルで保存し、PHPで取り込めばショッピングサイトのデータとして活用できますし、Googleスプレッドシートで作成したタスクリストをCSVにしてPHPで読み込めばタスクの共有ができるアプリケーションが作成できます。 このように、他のアプリで作ったCSVファイルのデータ活用するために覚えておきたい知識なので、参考にしてみてください。   目次レンダリングブロックリソースとはページの表示速度を診断してみようページの表示速度改善方法について速度改善の前後を比較しようまとめ監修してくれたメンター   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回はCSVファイルをPHPで読み込む方法をやっていくよ。 大石ゆかり 田島メンター！その前にちょっといいですか？ 「CSV」って何ですか？ 田島悠介 じゃあ、CSVとは何かを教えるね。 ゆかりちゃんは表計算ソフト、例えば「Excel」とか「Google スプレッドシート」は使ったことあるかな？ 大石ゆかり それならありますよ。大学時代にレポート作成でExcelを使ってましたし、仕事ではGoogle スプレッドシートを使っています。 田島悠介 もし、ゆかりちゃんが入力したデータをPHPのプログラムで読み込ませたいと思ったらどうしたらいいかな？ 大石ゆかり データを保存したファイルをPHPで読み込めばいいんじゃないですか？ PHPってファイルの読み込みもできましたよね？ 田島悠介 たしかに、PHPではファイルの読み込みができるんだけど、ExcelやGoogle スプレッドシートの専用ファイルはそのままでは読み込むのが難しいんだ。 PHPのファイル読み込みは、標準では文字だけで構成されたテキストファイルで作成されていることが前提だからね。 大石ゆかり そうなんですね・・・。じゃあ、表計算ソフトで保存するときPHPでも読み込めるテキストファイルの形式で保存したらいいんですか？ 田島悠介 その通り！さすがゆかりちゃん、理解が早い。 そのPHPにも対応しているテキストファイルの形式の1つがCSVファイルというわけだね。 大石ゆかり なるほどぉ。 今Google スプレッドシートでCSVの形式にエクスポートしてみました。 カンマ付きのシンプルな文字だけになるんですね。   Googleスプレッドシートの画面   名前,年齢,血液型 太郎,21,O ジョン,23,A ニキータ,32,AB 次郎,22,B CSVファイルの中身 田島悠介 そうだね。CSVファイルはカンマかタブ文字で区切られるんだ。 ちなみにCSVファイルはほとんどのアプリが対応しているから、PHPなどのプログラムからの読み込みだけでなく、アプリ同士でデータをやり取りしたいときにもよく使われるよ。 ただ、データの中身の文字だけしか保存されないから、罫線や文字色などの情報はなくなるけどね。 大石ゆかり CSVについてはよく分かりました！ 今回はそのCSVファイルをPHPで読み込む方法を教えてもらえるんですね！ 田島悠介 そういうことだね。 CSVは、読み込みと出力のそれぞれ書き方が違うから、今回は「読み込み」の方法について説明するね！ 大石ゆかり お願いしまーす！！   CSVファイルを読み込む関数「fgetcsv」 PHPでは、CSVファイルを読み込んで配列の形にしてくれる「fgetcsv関数」という関数があります。 fgetcsv関数を使うためには、まず対象のCSVファイルを開いておく必要があります。   ファイルを開く「fopen」 CSVファイルを開くには、fopen関数を使います。 $file_handler = fopen("読み込むCSVファイルのパス", "r"); fopen関数の戻り値で、読み込んだファイルを管理している名前（ファイルハンドル）を取得します。 fopen関数の2つ目のパラメータはファイルにアクセスする形式、つまり開いたファイルの書き込みを可能にするかどうかなどのファイルをアクセスする状態を設定します。 “r“は読み取り専用、つまり書き込みしない状態でファイルを開きます。 ※もし、対象ファイルが存在しなかったりファイルのアクセス権がない場合には、fopenは失敗しwarningを発行してFALSEを戻り値として返します。   CSVファイルを1行ずつ配列で読み込む「fgetcsv」 ファイルハンドルが取得できたら、fgetcsv関数でCSVファイルを1行ずつ読み込みます。 $data = fgetcsv($file_handler);   読み込まれた1行分のデータを項目（データ列）ごとに配列として戻り値で取得します。 たとえば下記のようなCSVファイルなら、1回目にfgetcsv関数を呼び出したときは、1行目のデータである「名前」「年齢」「血液型」の文字列が配列に代入されます。 名前,年齢,血液型 太郎,21,O ・ ・ ・   実際に書いてみよう では実際にプログラムを書いてみましょう。 事前に、以下のように書いた「test.csv」ファイルを作成しておきます。 名前,年齢,血液型 太郎,21,O ジョン,23,A ニキータ,32,AB 次郎,22,B   それでは、プログラムを書いてみましょう。 <?php // 読み取り専用でtest.csvを開きます。 $f = fopen("./test.csv", "r"); // test.csvの行を1行ずつ読み込みます。 while($data = fgetcsv($f)){ // 読み込んだ結果を表示します。 var_dump($data); } // test.csvを閉じます。 fclose($f); ?> 簡単にソースコードの説明をします。 最初に読み取り専用でtest.csvファイルを開き、while文で1行ずつファイルを読み込みます。 読み込んだ結果の配列を、var_dump関数でCSVファイル1行分のデータを表示しています。   以下、実行結果です。 1行ずつ読み込まれて、配列の形になっているのがわかります。   まとめ CSVファイルを読み込むときは、まずfopen関数でファイルを開きます。 そして、fgetcsv関数を使って1行ずつ配列にデータを読み込みます。   タブ文字で区切られたファイル 大石ゆかり 田島メンター、教えてもらった方法でデータをPHPで読み込もうとしたんですがうまくいきません・・・ 田島悠介 それは、データの区切り文字が違うからだよ。 CSVはカンマ区切りだけど、別の種類でタブ区切りのファイル形式が使われることがあるんだ。 大石ゆかり そうなんですね。よく見るとファイルの拡張子が.tsvになっていました。 田島悠介 そうだね。タブ区切りのファイルはtxtやtsvといった拡張子が使われるね。 タブ区切りのファイルを読み取るにはさっきと同じfgetcsv関数が使えるけど、パラメータを指定する必要があるよ。 大石ゆかり タブ区切りのファイルでも読み込めるんですね。 PHPで読み込む方法を教えてください！ fgetcsv関数でタブ区切りのファイルを読み込む fgetcsv関数でタブ区切りのファイルを読み込むには、3つ目のパラメータseparatorで区切り文字を指定します。 $data = fgetcsv($f, 0, "t") 今回はタブ区切りのファイルを読み込みたいので、区切りとしてタブ文字「t」を指定します。 ※2つ目のパラメータはlengthで、分割しない1行の最大文字数（改行文字なども含む）を指定します。0を指定するか省略すると、最大行長は制限されません。 (PHP 5.1.0以降)   まとめ タブ区切りのファイルをfgetcsv関数で読み込むときは、3つ目のパラメータでタブ文字 “t” を指定します。   [PR] Webデザインで副業する方法とは空行がある場合 大石ゆかり CSVファイルを読み込んだら、値が空の配列が混じっていました。 田島悠介 それは読み込んだCSVに空の行が入っていたからなんだ。 1行ずつ繰り返すループの中で、空行かどうか判定する式を追加するだけで解決できるよ。 CSVファイルの読み込み時に空行の判定をする CSVファイルに空の行が含まれている場合、PHPの条件式で判定を行うコードを追加すれば、余分な空っぽの値が配列に入るのを防げます。 配列の1行分の要素すべてが空かどうか、配列の要素を文字列としてつなげて判定します。 1行分の配列の要素を文字列として結合するのに、implode関数を使います。   空行判定のコード例 配列に値があるかどうかで空行の判定をしています。 <?php // 読み取り専用でtest.csvを開きます。 $f = fopen("test.csv", "r"); // test.csvの行を1行ずつ読み込みます。 while($data = fgetcsv($f)){ // 1行分の要素すべてを文字列として結合しても空ではない、つまり空行でなければ出力します。 if(implode($data) != null){
PHP

スマホ対応！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

今さら聞けない！CSSとは【初心者向け】現役Webデザイナーが解説

CSSとは何かについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   「CSSが分からないけど今さら聞けないよな…」 「CSSってなんで必要なんだろう…」 「どうやってCSSを書いたらいいんだろう…」   上記のような疑問や悩みを感じている方は、最後まで読んでいただければ「CSSとは何か」を理解できますのでぜひ参考にしてみてください。 目次レンダリングブロックリソースとはページの表示速度を診断してみようページの表示速度改善方法について速度改善の前後を比較しようまとめ監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！！CSSは何を行うものなんですか～？ 田島悠介 CSSの役割はサイトの「見た目」を作ることだよ。 音声による読み上げや印刷時に関する設定もできるけれど、一番多く使われる役割はWebページのデザインやレイアウトなど「見た目」に関する指定だね。 大石ゆかり 見た目というと文字や画像の大きさ、色などですか？ 田島悠介 そうだね。 実際のサイトで、CSSが適用されている場合とそうでない場合の違いを見てみよう。   CSSとは CSSとは「Cascading Style Sheets」 の頭文字をとったものであり、スタイルシートとも呼ばれます。   HTMLは見出しやヘッダー情報などWebページの文書構造を形作るための言語です。 対してCSS言語は、HTMLで作られた文書構造にデザインを加えて見栄えを整える役割を担っています。   WebページはHTMLとCSSが組み合わさって作られているのです。     実際に、ブラウザでWebページを表示してみましょう。 （ここでは、例としてテックアカデミーのWebサイトを開いています） 上記のページはHTMLとCSSとの両方を使って作られています。 画像が入っていたりリンク部分をボタンのように装飾したり、見栄えが良くなるようデザインされていますよね。     試しに上記のページからCSSを除き、HTMLの文書構造のみを表示させてみましょう。 かなり簡素なページになりましたね。   たまにWebページの読み込みがうまくいかない場合など、このような画面が表示されたことがある人もいるのではないでしょうか。   キレイに整ったデザインのWebページを表示するためには、HTMLにCSSを加える必要があるのが分かりますね。   田島悠介 CSSを適用していない場合のサイトを見るとどうかな？ 大石ゆかり 見出しと文字がただ順番に書かれただけになって、画像の位置や大きさもなんだか変わっちゃいましたね。 田島悠介 これらのレイアウトやデザインを指定しているのがCSSになるんだ。 今見ているのは、HTMLだけで構成された状態の文書だね。 大石ゆかり 見やすいページを作るのに、CSSはとても大事なんですね。   CSSファイルの作り方 CSSファイルの作り方の手順をご紹介しましょう。 ファイル名に拡張子の「.css」をつけることで、CSSファイルとしてコンピュータが認識してくれます。   拡張子とは 拡張子とは、ファイルの種類を分かりやすく判別するために使われる文字列です。 みなさんも普段使うWordやExcelなども以下のような拡張子で表示されます。 Word：.docx Excel：.xlsx 文書：.pdf 画像ファイル：.jpeg   CSSファイル作成の手順 CSSファイルの作成は以下の手順で行います。 新規フォルダを作成 作成したフォルダ名の最後に「.css」と書く 練習でCSSファイルを作成する場合は「test.css」や「style.css」など、分かりやすい名前を付けてあげましょう。   実際に以下の画像のように「.css」のファイルを作成してみます。 上記のように簡単にCSSファイルが作成できますので、実際に手を動かしてみて作成してみましょう。   [PR] Webデザインで副業する方法とはCSSを実際に書く方法 先ほど作成した「style.css」ファイルを使って、実際にCSSを書いてみましょう。   まずは、HTMLファイルを用意します。 CSSをHTMLファイルに読み込ませるために、<head>と</head>で囲まれた部分に <link rel="stylesheet" href="style.css"> といった一文を以下の画像のように入れます。 <link rel="stylesheet" href="style.css">を書くことで、HTMLに「style.css」ファイルがリンクされ、CSSの指定をHTMLでも読み込んでくれるようになります。     では実際に、以下のような緑色の背景に白色で「TechAcademy」という文字を表示させるCSSの指定を書いてみましょう。   編集は以下の手順で行います。 HTMLファイルを編集 CSSファイルを編集 では、順番に見ていきましょう。   HTMLファイルの編集 まずはHTMLファイルの編集です。 <body>と</body>で囲まれた部分に表示させたい文章を書いていきましょう。   コードを書く際、CSSを適用させる場所を分かりやすくするため、緑色の背景を表示させるための「main」という枠と、文字を表示させる「text」という枠を用意します。 完成されたページで見ると、以下のように分けています。   用意した枠にそれぞれ「クラス名」を設定してあげます。 クラス名とは「class=”○○”」というように表記されたCSSを適用させるためのタグのことです。     今回はbodyタグ内に、「main」と「text」のクラス名をそれぞれ以下のように記述します。 （HTMLの記述に自信がない方は「HTMLとは」という記事も合わせてお読みください。） 以上でHTMLの編集は終了です。   CSSファイルの編集 続いて、CSSファイルの編集です。   HTMLの編集で全体を囲む「main」クラスと、文字を表示させる「text」クラスを用意しましたね。 それぞれのクラスに幅や配色などのデザインを「style.css」に指定していきましょう。   今回は背景と文字のデザインを以下のように指定しましょう。 背景色：緑 高さ：200px 幅：100％ テキストの位置：センター フォントサイズ：36px テキストの色：白 上記の内容を「style.css」に以下のように記述していきます。 CSSファイル内では、クラス名の名前の前に「.」を付けて表現するのが決まりですので覚えておきましょう。     上記のようにCSSを指定すると以下のようなページが表示されます。   はじめはCSSの記述と完成イメージがうまく結びつかず、思うようにレイアウトやデザインが出来ない場合も多々あるでしょう。 しかし、繰り返し練習していくと慣れていきますので何度も試しながら学習していきましょう。   執筆してくれたメンター ノマ リカ 印刷会社の校閲部門に半年、DTPオペレータとして4年間経験を積んだ後、Web制作会社にて8年間デザイナーとして従事。 現在は住宅メーカーに勤務しながら社内のSE及びWeb担当として従事しています。   田島悠介 CSSに関する基本的な構造だよ。 大石ゆかり 「main」の部分、「text」の部分それぞれに色や大きさの指定をしているんですね。 田島悠介 この「.main」「.text」のようなスタイルを適用させる範囲の指定を「セレクタ」というんだ。 まずはこれを覚えておこう。 大石ゆかり 頭に入れておきます。 ありがとうございました！   CSSを実際に書いてみたい場合は、CSSの書き方の記事も合わせてお読みください。 また「HTMLとは」という記事も読んでおくと、よりHTMLの理解も深まりますのでおすすめですよ。   CSSを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい CSSを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
CSS

入門から応用まで！HTMLの学習に役立つリファレンスサイト10選

HTMLで作りたい機能があるのに方法がわからない時、大きな味方になってくれるのが、リファレンスサイトです。 今回はそんなHTMLのリファレンスサイトを10サイト紹介します。HTMLでの作業に確実に役立つサイトばかりなので、ぜひ参考にしてみてください。 目次レンダリングブロックリソースとはページの表示速度を診断してみようページの表示速度改善方法について速度改善の前後を比較しようまとめ監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   HTMLにおけるおすすめのリファレンスサイト 本記事では、下記のおすすめのHTMLリファレンスサイトにおける特徴を解説します。 HTMLクイックリファレンス 逆引きHTMLリファレンス TAGindex HTMLタグボード MDN HTMLリファレンス サルワカ とほほのWWW入門 HTMLリファレンス HTML5 & CSS3 リファレンス HTMLリファレンス（２） HTMLで使えるタグを網羅しているWebサイトから、目的に応じて検索できるWebサイトまで実にさまざまな種類があります。 利用シーンや、ご自分の目的に合わせて、活用するWebサイトを適宜見つけていきましょう。   HTMLクイックリファレンス HTMLを書いていて何度もお世話になるサイトです。 HTMLのリファレンスの他にも、CSSやJavaScriptなどの、Webデザインで使用される言語のリファレンスも載っています。 サイト作成における全般で役立つので、困ったらこのサイトを見に来ると良いでしょう。 HTMLクイックリファレンス   逆引きHTMLリファレンス Webデザイン初心者向けのリファレンスサイトです。 リファレンスサイトと聞くと、言葉が難しく中級者向けのイメージがありますが、このサイトはそうではなく、初心者向けに分かりやすく書いてあります。 他のリファレンスサイトがとっつきにくいと感じた方にオススメです。 逆引きHTMLリファレンス   TAGindex 基本的なリファレンスの他にカラーチャートなど、色に関わるリファレンスも多いのが特徴です。 さらには、色の組み合わせチェックも行うことができるので、デザインに困ったときにも使用したいリファレンスサイトです。 図やソースコードと共に実際の表示を確認しながら学習できるので、知らないタグが出てきてもイメージしやすいでしょう。 TAGindex   HTMLタグボード 初級者から中級者まで広く使えるリファレンスサイトです。 初心者向けのホームページ作成講座や、Webデザインの基礎、さらには収益化の方法など、HTMLを学ぶ上で知っておいた方が良い情報が詰まっています。 自分でオリジナルサイトを作ってみたいという人は参考になるはずです。 HTMLタグボード   MDN HTMLリファレンス HTMLの隅から隅まで情報が載っているリファレンスサイトです。見やすいデザインもオススメです。 各タグごとに仕様やブラウザでの実装状況を確認できるので、IEなど様々なブラウザを相手にする作業を行う場合に役立つでしょう。 MDN HTMLリファレンス サルワカ HTMLやCSSの解説を、とてもわかりやすいUIと共に紹介しているWebサイトです。 他サイトと比較しても特にCSSに関する記事が豊富なので、HTMLと併せてCSSも学習したい初心者の方に最適でしょう。 サルワカ   とほほのWWW入門 HTMLタグについて、1つひとつ丁寧に解説しているWebサイトです。 HTML以外にも、JavaScriptやCSS、その他のプログラミング言語など、Webサイト制作全般に関する非常に多くの情報が載っています。 とほほのWWW入門   HTMLリファレンス mainなどの要素の他に属性情報も多く載っています。 また、階層毎に分かれた見やすいページデザインになっているのも特徴です。 HTMLリファレンス   HTML5 & CSS3 リファレンス HTMLにおける基礎情報の他、CSS3に関する膨大な量のデータを有するWebサイトです。 セレクタの使い方に留まらず、HTMLの歴史や文書構造を丁寧に解説しています。 現代のWeb制作の知識だけでなく、過去の知識も吸収したい方向けにおすすめです。 HTML5 & CSS3 リファレンス   HTMLリファレンス すべてのリファレンスは載っていませんが、よく使用されるタグが載っているリファレンスサイトです。 リファレンスですが情報として見やすく、あまり混乱したくない初心者の方におすすめのリファレンスサイトです。 単純に知識をつけるという意味でも役立てられるはずです。 HTMLリファレンス   まとめ 以上、HTMLでの作業に役立つリファレンスサイトをまとめました。 HTMLクイックリファレンス 逆引きHTMLリファレンス TAGindex HTMLタグボード MDN HTMLリファレンス サルワカ とほほのWWW入門 HTMLリファレンス HTML5 & CSS3 リファレンス HTMLリファレンス（２） リファレンスサイトを把握することで、今後のHTML学習に役立てられます。 上記でご紹介したWebサイトをぜひチェックしていただき、ご自分に合ったリファレンスサイトを活用していきましょう。 今回の記事は以上です。   [PR] Webデザインで副業する方法とはHTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
HTML

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS レンダリングブロッキングリソースとして扱われるCSSを現役エンジニアが解説【初心者向け】