TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSの読み込み速度が遅い原因と対処法を現役エンジニアが解説【初心者向け】
icon
icon
CSS

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

初心者向けにCSSの読み込み速度が遅い原因と対処法について解説しています。最初にChromeのデベロッパーツールのNetworkタブを使った速度の確認方法を説明します。次に読み込みが遅くなる主な原因とそれぞれの対処方法を学びましょう。

テックアカデミーマガジンは受講者数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などで構成されます。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の読み込み速度が遅い原因と対処法について学習しました。

 

1時間でできる無料体験！

監修してくれたメンター

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

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

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

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

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

記事を検索

関連するキーワード

関連する記事

CSSのnormalize.cssの使い方を現役エンジニアが解説【初心者向け】

CSSのnormalize.cssの使い方について解説します。   そもそもCSSについてよく分からないという方は、CSSの書き方について...
CSS

CSSでサイズ可変の正方形の描き方を現役エンジニアが解説【初心者向け】

CSSでサイズ可変の正方形の描き方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSにつ...
CSS

余白を指定したい！CSSのpaddingの使い方【初心者向け】

CSSで書くpaddingについて解説しています。 そもそもpaddingとは何なのかよく分からないという方でも分かるように細かく説明しています。実際に書...
CSS

CSSのtransitionが効かない原因と対処法【初心者向け】

CSSのtransitionが効かない原因について解説します。transitionプロパティを使うと変化の速度を調節することが出来てアニメーションのように表示す...
CSS

CSSスタイルでfloatされる範囲を現役エンジニアが解説【初心者向け】

CSSスタイルのfloatプロパティが適用される範囲について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

CSSでアコーディオンメニューを作成する方法【初心者向け】

CSSでアコーディオンメニューを作成する方法について解説します。 アコーディオンメニューとは、楽器のアコーディオンのように伸縮する蛇腹が、メニューの内容を...
CSS

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

HTMLのページが重い原因を調べて読み込み速度を改善する方法を現役エンジニアが解説【初心者向け】

HTMLのページが重い原因を調べて読み込み速度を改善する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ページが重い原因を調べて読み込み速度を改善する方法について詳しく説明していくね！ 大石ゆかり お願いします！   読み込み速度を調べる方法 読み込み速度はかつては、開発者向けのブラウザとしてお馴染みだったFirefox、そのアドオンの「Firebug」「YSlow」でWebページの読み込み速度が検証されていました。 しかし、これらのアドオンが開発中止になってからは、Googleの「PageSpeed Insights」で調べることが一般的です。 このツールはWebサイトの読み込み速度を点数として、視覚的に結果を表示するためわかりやすいといえるでしょう。   Webサイトが重いとどうなるか 簡潔にいえば、Webサイトが重ければユーザーの離脱を招きます。 理由としては、表示に時間が掛れば掛かるほどストレスを感じるためです。 また、検索サイトの順位付けにおいても悪影響があるため、サイト設計者にとっても重いサイトは改善の必要があります。   [PR] Webデザインで副業する学習方法を動画で公開中原因調査 調査の項目として具体的かつ詳細にも列挙する場合、膨大な数になるため、試しとしてテックアカデミーのトップページを調査します。 下図を参考に入力が可能なユーザーインターフェースに調査対象のURLを入力しましょう。 送信してから、しばらくして速度に対する点数が表示されます。   パソコンページとモバイルページのどちらも確認することが可能です。   上記の画像からでは、難解な項目に感じられるものの、ページが遅くなる原因は下記のようなものです。 この結果では、 画像の容量や個数が肥大化していること ファイルを参照するための通信の発生回数が多いこと HTMLの構造が複雑になっていること などがページの読み込み速度を低下させている原因として挙げられています。   改善効果をチェックしてみよう 前述で上げられていたWebサイトの読み込み速度を低下させる原因を全て取り除き、100点としてになった場合をみていきましょう。 「改善できる項目」が特にないため、ページパフォーマンスの監査の対象となっている項目をみてみましょう。 100点として計測されたWebサイトは、ブラウザがページを読み込んでから1秒未満でページを表示します。 厳しい文法の規則を厳守し、HTMLの構造を簡素にすることや各種ファイルの容量や個数を減らして通信の回数も削減することで、100点を目指すことが可能です。 なお、Googleの「PageSpeed Insights」での検査の項目は、『ハイパフォーマンスWebサイト』が全盛期だった頃の「YSlow」での検査項目と類似しています。 目標として全ファイルの容量も計200KB未満に抑えてから、1秒未満にてページをブラウザに表示しなければならないなどの理由がありましたら挑んでいきましょう。   執筆してくれたメンター 井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。   大石ゆかり HTMLのページが重い原因を調べて読み込み速度を改善する方法がよくわかったので良かったです！ 田島悠介 ゆかりちゃん、今後も分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。
HTML

初心者におすすめ！ワードプレスが使えるレンタルサーバー（カラフルボックス編）[PR]

ワードプレス（WordPress）はSEOにも強く、SNSとの連携も簡単で、初心者でも手軽にWebサイトを構築することができます。 しかし、実際にWebサイトを作るためには、独自ドメインとサーバーを用意する必要があり、WordPressを作成する前に「やっぱり無料ブログでいいかな。。」なんて諦めてしまう方も多いと思います。 今回は、実際に使ってみて「初心者の頃にこのサーバーと出会っていれば！」と感じた、クラウド型レンタルサーバー「カラフルボックス」を紹介したいと思います。 たった3分ほどでWordPressのインストールができる便利機能や、災害やトラブルに強い次世代のバックアップ機能を無料で搭載したおすすめのレンタルサーバーです。 導入の手順や表示速度、他のレンタルサーバーとの比較をしながら丁寧に紹介していきますので、いままでWordPressを触ったことがない初心者の方こそ、この機会にぜひ試してみてください！   目次 カラフルボックスとは　★★ カラフルボックスを使うメリット　★★★★★ 　→月額480円からのお手頃価格 　→“地域別”自動バックアップ（無料） 　→自由にプラン変更 　→無料SSLに対応 　→初心者でも安心のサポート 　→安心のセキュリティ ワードプレスへの導入手順　★★★ ワードプレスの速度を比較　★★★★ プロモーションコード ドメインも購入可能　★★ WordPress移行代行サービス　★★ 重要度を★印で表示   カラフルボックスとは カラフルボックスは、月額480円から利用することができるクラウド型のレンタルサーバーです。簡単にWordPressをインストールする機能も備わっているので、初めてWebサイトを作る人にとっても安心できます。 高機能でかつ充実したサポートがあるため初心者にも扱いやすい設計になっているサーバーです。   [PR] Webデザインで副業する学習方法を動画で公開中カラフルボックスのメリット カラフルボックスの特徴について紹介しています。 月額480円からのお手頃価格 月額480円からスタートできるので、個人でも法人でも手軽にレンタルサーバーを利用することができます。プランの変更も日ごとに行うことができます。 また、30日間のお試し期間もあるので、初めて使う人でも気軽に利用できるでしょう。   “地域別”自動バックアップ（無料） 過去14日間の自動バックアップが標準搭載されていますが、他のレンタルサーバーと違ってバックアップデータを東京と大阪の遠隔地に取得する最新機能が「無料」でついています。 この機能は一般のレンタルサーバーではかなり珍しい機能のようですね。 地震や豪雨といった自然災害が多い日本だと万が一の場合もありますので、同じ場所にバックアップデータをとるより遥かに安全に設計されています。 こういった機能があると、メインのブログや会社で使う場合もおすすめできますね。   自由にプラン変更 カラフルボックスでは、サイトのアクセス状況に応じてプランを変更することができます。 初めは低価格のプランからスタートして、アクセスが集中してきたら都度上位プランに変更するなんてこともできます。逆に本格的に運用しなくなったらプランを下げることもできるので、柔軟に対応できます。   無料SSLに対応 SEO対策やサイトを安全に運用するにおいて欠かせないSSL化についても無料で対応しています。 カラフルボックスでは、無料SSLが自動で設定されるため非常に楽です。   初心者でも安心のサポート メール・電話・ライブチャットと充実したサポートを受けることができます。 メールのみのところも多い中、電話やチャットでも柔軟に素早く対応してもらえるのは初心者にとって心強いです。   安心のセキュリティ imunify360というセキュリティソフトウェアを標準で使用できます。 imunify360は脅威を自動で検出し、ソフトウェアを実行するすべてのサーバーを保護するためのAIを備えた高度なファイアウォール。ブルートフォース攻撃、DoS攻撃、ポートスキャンに対する防御が可能です。 また、自動スキャン機能でマルウェアの感染を防ぎます。   ワードプレスをインストールする方法 ここからは、サーバーの購入から実際にWordPressをインストールしていきます。 まずはカラフルボックスの公式サイトから、ワードプレスを入れたいサーバーを申込みます。   サーバーの購入 公式サイトの右上にある「お申込み」ボタンをクリックします。 レンタルサーバーのプランが一覧で表示されます。 希望のプランにチェックを入れて、「次へ」をクリックしましょう。 お好きなサブドメイン名を入力して、「次へ」をクリックします。 プラン名を確認し、プロモーションコードがあれば入力、内容が問題なければ「お申込み内容の確認」をクリックします。 続いて、お客さま情報と支払い方法を入力します。 支払い方法は、ここでは「クレジットカード」で進めます。 利用規約を確認後「規約に同意します」にチェックし「注文を確定する」をクリックします。 ※必ず利用規約を確認しましょう。 以上でサーバー登録が完了しました。 登録メールアドレスに「サーバーアカウント設定完了通知」というタイトルのメールが届きます。 ユーザー名やパスワードなどアカウント情報が記載されたメールになるので、大切に保管しておきましょう。   コントロールパネル「cPanel」にログイン それでは、cPanelにログインします。 「サーバーアカウント設定完了通知」のメールにある「ログイン（cPanel）」に記載されているメールアドレスとパスワードを入力します。   ワードプレス（WordPress）のインストール カラフルボックスでは、自動インストール機能で簡単にワードプレスをインストールすることができます。 早速自動インストール機能を使ってWordPressをインストールしましょう。 先程ログインしたcPanelの画面下部、Web Applicationsにある「WordPress」をクリックします。 「このアプリケーションをインストール」をクリックします。 詳細設定を行います。（最低限の設定のみ説明しています。） インストールが完了しました。 1：サイトのURL 2：WordPress管理画面のURL どちらも大事なURLですので、ブックマークしておくことをおすすめします。   ワードプレスの速度を比較 カラフルボックスと2社のレンタルサーバーのページ読み込み速度を比較してみたいと思います。 当然サイトの表示速度が速ければユーザーの離脱も減りますし、SEO対策にも繋がるので、とても重要な要素です。   今回は、比較する会社をA社・B社としており、まずはそれぞれのサービスの料金やスペックを見てみましょう！ カラフルボックス A社 B社 月額 880円(36ヶ月下位プラン有) 900円/12ヶ月 880円/36ヶ月 初期費用 無し(単月契約は2,000円) 3,000円 無し 容量 60G SSD 200G SSD 50G SSD サポート メール・電話・チャット メール・電話 メール 自動バックアップ 有（手動） 有（リスト時有料） 有（手動） クラウド型 ◯ × ◯ リージョン選択 ◯ × ◯ Litespeed対応 ◯ × ◯ カラフルボックスは、サイトの運用にかかるコストも少ない中でサポート対応も充実しているのが特徴です。WordPress移行代行サービスもあるので、他のサーバーから乗り換えたい方もスムーズに行えるはずです。   以下、ワードプレスのアクセス速度を比較してみました。 （以下の表参照） 測定時間は、アクセス速度を測定したその時の時間を示しています。 他の各数値に関しては、GTmetrixという分析ツールを使って算出しています。Page Speed Scoreは、Googleによるページ読み込みスコア、YSlow Scoreは、Yahoo!によるページ読み込みスコアになります。 Fully Loaded Timeは、ページの読み込み速度（秒）を記載しています。 測定時間 Page Speed Score YSlow Score Fully Loaded Time カラフルボックス 11:41 A 90% B 81% 1.6 13:00 A 90% B 81% 1.6 17:50 A 90% B 81% 1.5 A社 9:00 B 89% C 71% 1.9 13:00 B 89% C 71% 1.8 18:00 B 89% C 71% 2.0 B社 9:08 A 91% B 81% 1.8 13:07 A 91% B 81% 1.7 15:33 A 91% B 81% 1.9 結果を見て分かる通り、カラフルボックスのスコアはGoogle/Yahooともに平均して高いのとページの読み込み速度が非常に速いです！ Googleも表示速度が遅いサイトに関しては、検索順位にも悪い方向に影響が出るだろうと発表しているので、SEO対策においてもページの読み込み速度はとても重要です。 すでにWebサイトを持っている方は一度チェックしてみると良いかもしれませんね。   以上、カラフルボックスのサーバーについて紹介しました。 ワードプレスを使ってサイトを作ってみたいという方、ワードプレスのサイトは持っているものの表示速度を上げたい、別のサーバーに切り替えたいと考えている方は、ぜひ試してみてください。 プランも容易に変更できるので、状況に応じて柔軟に運用することができるはずです。 カラフルボックスのサービスを見てみる   プロモーションコード 無料から有料への変更時に10%割引のクーポンがあるようです。 マイページにログインし、登録サービスを選択後、「アップグレード/ダウングレード」をクリックします。 ご希望のプランを選択します。 選択すると合計金額、プロモーションコード、お支払方法の確認ができます。 プロモーションコードの欄に下記のクーポンコードを入力して、コードの検証をクリックします。 「DYHVL4E8」 ※10%割引（アカウント毎に1回限り） 10%割引が反映されているのが分かるかと思います。   ドメインも購入可能 カラフルボックスではドメインも購入可能なので、サーバーと同時に購入すれば、更新時の支払いの管理もラクに行うことが出来ます。 ドメインの取得 まずは、マイページにログインしましょう。 続いて、「ドメイン」から「新しいドメインを登録する」をクリックします。 作成するサイトのドメイン名を検索します。 希望のドメイン名を検索すると、そのドメイン名が取得可能かどうか確認することができます。 利用したいドメインの「追加」をクリックすると「購入」に変わるので、購入ボタンをクリックしましょう。 次に各項目を設定します。 1. whois情報公開代行 個人情報を公開したくない場合にチェックを入れましょう。カラフルボックス名義のwhois情報になります。 2. ネームサーバー 初期値のまま設定ください。 3. 入力が完了したら「次へ」をクリックしましょう。 内容の確認と支払い方法を入力すると、ドメインの取得は完了となります。   WordPress移行代行サービス カラフルボックスを使ってみたいけど、すでにWordPressを持っている方もいると思いますが、そんな方にピッタリのサービスがあります。 それが、「WordPress移行代行サービス」です！ WordPress移行代行サービス サーバー移行はWebの知識がない人がやってしまうと、予期せぬエラーで何日もつまずいてしまいます。 特に難しいのがワードプレスでも使う「データベース」の移行作業で、慎重に作業をしてもエラーが出て失敗することも。 最悪の場合、データが消えてしまうこともあるので、移行作業に慣れていな方は、こういったお役立ちサービスを使う方が、かえって時間の短縮になったりします。 通常、移転の専門業者に頼んだりすると、10万近くする場合もありますが、カラフルボックスでは、1サイトにつき12,800円、5営業日以内で作業を代行してくれるので、かなり良心的です。 安心して移行作業を行いたい場合は、ぜひ利用してみてください。   全体のまとめ いかがだったでしょうか。 WordPressの自動インストールの手順から、ドメインの取得、移行代行サービスの紹介までをお伝えしてきました。 はじめて触る方は、「思っていたよりも、ずっと簡単だった！」と感じるはずです。 お手頃な料金設定やサイトスピードも申し分なく、なんといっても最新の自動バックアップ機能の安心感が段違いです。 ブログ初心者からサイト運営のプロまで、非常に満足度の高いサービスになっているのが特徴です。 カラフルボックス公式サイトへ
トピックス

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

レンダリングブロッキングリソースとして扱われる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

簡単に変換できる！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

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

基本的にHTMLだけでは文字を表示するだけで、リッチなデザインが整ったWebデザインを制作することは難しいです。 そんな時に必要になってくるのがCSSです。 HTMLでCSSを読み込むためには、2つの方法があります。 今回は、その方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次読み込み速度が遅いとどうなるか読み込み速度を調べる方法読み込み速度が遅い原因と対処法読み込み速度を改善しようまとめ監修してくれたメンター そもそも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

JavaScriptでCSVファイルを読み込む方法を現役エンジニアが解説【初心者向け】

JavaScriptでファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次読み込み速度が遅いとどうなるか読み込み速度を調べる方法読み込み速度が遅い原因と対処法読み込み速度を改善しようまとめ監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   JavaScriptによるファイルの読み込み Webサイトでは、ファイルをアップロードすることでアプリケーションの機能を利用することがよくあります。 例えばマイページがあるようなサイトで、自身のプロフィール画像を登録するために画像ファイルを登録する時には、ファイルをアップロードすることになります。 本記事では、ファイルの読み込み方法と、読み込んだ後の処理の方法について、ファイルの種類別に解説していきます。   実際にファイルを読み込んでみよう ファイルを読み込んで、JavaScriptで取得するまでの一連の手順を紹介します。   1．input要素をHTMLに記述する ファイルを読み込むには、まずHTMLに要素を追加する必要があります。 追加する要素はinput要素で、type属性に”file”を指定します。 また、あとでJavaScriptで取得できるよう、任意のidをつけておきましょう。 <input id="upload-file" type="file">   ブラウザで確認してみると、ファイルを選択できるボタンが設置されています。 「ファイルを選択」より任意のファイルを選ぶと、ブラウザ内に自動的にファイルが読み込まれます。   2．input要素をJavaScript側で取得する 1で指定したid属性の値によって、input要素を取得します。 idによる要素の取得には、document.getElementByIdを用います。 const input = document.getElementById('upload-file');   3．ファイルの読み込みを検知する ファイルを取得するには、「input要素にファイルが指定された」というイベントを検知する必要があります。 ファイルのアップロードは、changeというイベント名で取得できます。 changeイベントを取得するには、addEventListenerを用いて以下のように書きます。 input.addEventListener('change', (e) => { console.log('ファイルが検知された！'); }); 1行目の後半から始まる関数は、イベントリスナの「コールバック関数」と呼ばれ、指定したイベントが発生したタイミングで実行されます。 コールバック関数の関数の引数として、 e という変数が指定されていますね。 引数 e は、ファイルの情報を取得するための重要な引数です。 eについて、次の項目で詳しく説明します。   4．読み込まれたファイルを取得する 3では、「ファイルが読み込まれた」という状態を検知しましたが、まだファイルの中身は取得できていません。 アップロードされたファイルの情報を得るには、イベントリスナのコールバック関数の引数を利用します。 input.addEventListener('change', (e) => { console.log(e.target.files[0]); }); コールバック関数の引数（ここではe）には、発生したイベントに関する情報が入っています。 そのなかで、e.target.filesは、アップロードされたファイルが配列になっています。 アップロードされたファイルが1つならば、e.target.files[0]でそのファイルを取得できます。 ※複数ファイルのアップロードについては本記事の最後に紹介します。   一連の処理を行ってみよう それでは、解説した1〜4の処理を実際に行ってみましょう。 完成形のコードは以下の通りです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input id="upload-file" type="file"> <script> //JavaScriptの記述
JavaScript

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

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

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSの読み込み速度が遅い原因と対処法を現役エンジニアが解説【初心者向け】