TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSの外部スタイルシートがHTMLで読み込めないときに考えられる原因を現役デザイナーが解説【初心者向け】
icon
icon
CSS

CSSの外部スタイルシートがHTMLで読み込めないときに考えられる原因を現役デザイナーが解説【初心者向け】

初心者向けにCSSの外部スタイルシートがHTMLで読み込めないときに考えられる原因について解説しています。現在、スタイルシートは外部から読み込むのが一般的となっています。HTMLで外部CSSを読み込む際の基本の書き方、読み込めない場合の原因と対処法について学びましょう。

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

ここでは、外部にスタイルシートを作成する方法と、外部スタイルシートが適用されない場合の対処法を紹介します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

外部スタイルシートがHTMLで読み込めないときに考えられる原因について詳しく説明していくね！

大石ゆかり

お願いします！

 

CSSの外部スタイルシートとは

CSSを適用する場合には、HTMLファイル内に書く方法と、CSSファイルを別に作成して、HTMLファイルからCSSファイルを読み込む方法があります。

この別に作成したCSSファイルのことを外部スタイルシート(外部CSS)といいます。外部スタイルシートを使用すれば、複数のページのデザインを1つのCSSで管理することができ、効率的にWebサイトを作成したり、更新したりすることができるので、Webサイトを作成する場合には外部スタイルシートを用いることが一般的です。

 

外部スタイルシートの書き方

外部スタイルシートの作成方法は、HTMLファイルと同様、テキストエディタを使用して、〇〇〇.cssというファイル名で保存します。CSSファイルには、セレクタ{プロパティ: 値;}という形式で、HTMLのレイアウトや色、サイズなどの設定をしていきます。

次に、作成した外部CSSをHTMLから読み込ませます。HTMLの<head>内に下記のコードを追加します。

<link rel="stylesheet" href="読み込ませるCSSファイルのパス">

ここで重要なのが、「読み込ませるCSSファイルのパス」です。ファイルのパスとは、ファイルの位置を示すもので、絶対パスや相対パスなどがありますが、ファイルの住所のようなものです。

住所を間違えると郵便物が届かないのと同じで、ファイルのパスを間違えると、ファイルを読み込むことができません。

例えば、index.htmlに、同じ階層にあるstyle.cssファイルを読み込ませる場合は以下のようになります。

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

例：

ファイルのパスについて詳しくは絶対パスと相対パスの違いをご覧ください。

 

[PR] Webデザインで副業する学習方法を動画で公開中

外部スタイルシートがHTMLで読み込めないときに考えられる原因

うまくCSSが適用されていない場合、いくつかの原因が考えられます。

  1. HTMLに書いたCSSのファイルのパスを間違えている
  2. CSSを読み込むタグを間違えている(スペルミスや全角スペースの混入など)
  3. 実はCSSファイルは読み込めているが、CSSの記述に誤りがある(またはCSSファイルが保存できていない)

などの原因が考えられます。

原因を探る場合には、

  1. まず、ディベロッパーツールでWebページを確認(GoogleChromeならブラウザ内を右クリック→検証で表示できます)
  2. ディベロッパーツールの「Console」をクリックすると、エラーの内容と場所が表示される

一番よくあるケースは、「CSSファイルのパスを間違えている」です。CSSファイルのパスを間違えている場合には、Consoleに下記のように表示されます。

 

GET ******/style.css net::ERR_FILE_NOT_FOUND
↓
style.cssファイルは見つかりませんでした。

(ファイルのパス通りの場所に、ファイルがありません)

index.html:5
↓
index.htmlの5行目が原因です。

 

例：CSSのファイルパスを間違えた場合のエラー(ディベロッパーツール)

CSSファイルのパスや、HTMLのタグに間違いがない場合には、ディベロッパーツールにはエラーとして表示されませんので、CSSファイルは読み込めているが、CSSの記述に誤りがあり適用されていない、を疑います。CSSの記述が正しいか、セレクタが正しいかを確認します。

今回は、外部CSSの読み込み方、外部CSSがうまく読み込めない場合の原因を探す方法について紹介しました。

 

監修してくれたメンター

メンター 橋本真理

フリーのweb/グラフィックデザイナー

会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。TechAcademyではWebデザインコース・WordPressコースを担当しています。

ラジオとバナナが好き。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

CSSのoverflowを使ってはみ出た表示の指定をする方法【初心者向け】現役Webデザイナーが解説

今回は、CSSのoverflowではみ出た表示の指定をする方法を説明します。 文章が長くなり、外枠からはみ出てしまう時、手動で改行などしなくてもCSSで調...
CSS

文字に影をつけたい！CSSのtext-shadowの使い方【初心者向け】現役Webデザイナーが解説

CSSで書くtext-shadowの使い方について解説しています。 テキスト(文字)に影をつけて、より目立たせたりおしゃれに見せたいという方はぜひ使い方を...
CSS

CSSのwebkit-line-clampを使って指定した行数に制限する方法を現役エンジニアが解説【初心者向け

CSSのwebkit-line-clampを使って指定した行数に制限する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して...
CSS

CSSのinline-blockの改行による隙間を消す方法【初心者向け】

CSSのinline-blockの改行による隙間を消す方法について解説します。 ソースコード上で改行があるとインライン要素やインラインブロック要素に空白が...
CSS

使いながら解説！効率良くコーディングできるSassとは【初心者向け】

CSSを簡単に書くための言語Sassについて解説しています。 Sassを理解するためにはまずCSSの知識の理解が必要となりますので、CSSの理解が進んでい...
CSS

CSSのspecificityでスタイルの詳細度を計算する方法を現役エンジニアが解説【初心者向け】

CSSのspecificityでスタイルの詳細度を計算する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解...
CSS

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

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

基本的にHTMLだけでは文字を表示するだけで、リッチなデザインが整ったWebデザインを制作することは難しいです。 そんな時に必要になってくるのがCSSです。 HTMLでCSSを読み込むためには、2つの方法があります。 今回は、その方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次CSSの外部スタイルシートとは外部スタイルシートの書き方外部スタイルシートが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ファイルのデータ活用するために覚えておきたい知識なので、参考にしてみてください。   目次CSSの外部スタイルシートとは外部スタイルシートの書き方外部スタイルシートがHTMLで読み込めないときに考えられる原因監修してくれたメンター   そもそも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

実務から日常まで使える！ロジカルシンキングとは

近年注目を集める思考法にロジカルシンキングというものがあります。コンサル業界では当たり前の思考法ですが、最近では事業会社がロジカルシンキングについての研修やコンサルを依頼することも増えているようです。 ではロジカルシンキングとは一体何でしょう？知らない人はこれを学ぶことで 商談に説得力が増す プレゼンや企画が通りやすくなる 他の人の話の矛盾点や間違いに気付く といったことができるようになります。ぜひこの機会にロジカルシンキングを取得しましょう。   ロジカルシンキングとは 物事をロジカル、つまり論理的に考える思考法が、ロジカルシンキングです。 課題や問題が起きたときに、その原因をシンプルに分解して整理する 整理した原因を分析して、理解する それぞれの原因への解決策について、仮説を立てる 立てた仮説をもとに検証を行い、結論を導いていく 思考の流れとしては、このようなイメージです。簡単に言うと、『物事をシンプルに整理して、論理的に解決策を考えていく』ような思考法です。 似たような言葉に『ラテラルシンキング』というものもあります。これはロジカルシンキングとは異なり、固定観念をなくして発想を広げていくという考え方です。クリエイティブな思考方法で、斬新なアイデアを考える際に使われるものです。   ビジネスにおけるロジカルシンキング 業務の中で課題と向き合う場面は多いと思います。その課題に対して行き当たりばったりの解決策を実行しても、コストや時間が掛かるだけで、評価もされません。課題が見つかったら、ロジカルシンキングを用いて打開策を考えることで、よりスムーズに解決に導くことができます。 課題を正確に分析できていて、かつ実行した解決策も成果につながっていれば、当然上司や周囲からの評価も高くなります。また発言・発案が論理的で分かりやすければ納得性も高くなり、提案の採用率なども上がるでしょう。   [PR] Webデザインで副業する学習方法を動画で公開中ロジカルシンキングの活用例   【具体例①】発注書の発注数にミスが発覚した ◆悪い解決例 ミスが起きないように注意して仕事をする。 ◆ロジカルシンキングを用いた解決例 発注書のミスがなぜ起きたか、原因を特定する。 ⇒発注書作成時、電話対応と企画書作成とのマルチタスクになっており、注意力が散漫になりがちだった。 ⇒作成後のダブルチェックを行っていなかった。 解決策について仮説を立てる。 ⇒マルチタスクの状態を作らない。特に発注書作成は数字の確認が必要なので、他の業務が終わってから作成に移る。 ⇒作成後は必ずダブルチェックを行い、実施後はチェックシートに記入する。   【具体例②】お客様先に訪問する時間を間違えた ◆悪い解決例 間違えないように、毎朝必ずスケジュールをチェックする。 ◆ロジカルシンキングを用いた解決例 なぜ時間を間違えたのか、原因を特定する。 ⇒スケジュール帳の訪問時間が、14時ではなく16時と書かれていた。 ⇒スケジュール記入時に、別の作業などを行っていた可能性が高い。 解決策について仮設を立てる。 ⇒訪問があるときは、前日にお客様に確認の電話・メールを入れる。「明日●●時から宜しくお願い致します」など。 ⇒スケジュール記入時は別の作業をせず、間違えないように記入だけを行う。   ロジカルシンキングを鍛えるトレーニング方法 ロジカルシンキングは誰でもすぐにできるものではなく、トレーニングをして身に付けていくものです。ではどうすれば身に付くのでしょうか。ポイントは大きく2つです。   ロジカルシンキングについて理解する まずはロジカルシンキングという思考法を知ることが大切です。どんな思考をすべきかを知っておかなければ、実行にも移せません。再掲になりますが、 課題や問題が起きたときに、その原因をシンプルに分解して整理する 整理した原因を分析して、理解する それぞれの原因への解決策について、仮説を立てる 立てた仮説をもとに検証を行い、結論を導いていく この考え方をまずは常に頭に置いておいておくようにしましょう。   小さなことからロジカルに考える癖をつける 仕事だけでなく、日常の中で起きる課題・問題もロジカルに考える癖をつけてみましょう。 例えば「牛乳を買い忘れた。次からは気を付けよう」ではなく、「牛乳を買い忘れたのは、買うものを書き出していなかったからだ。次からはメモできるアプリを活用して、買い忘れを無くそう」というように。 日常の小さなことからロジカルに考えることで、仕事にも活かせるようになります。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
ビジネスマナー

クリティカルシンキングとは？実務で使える思考を手に入れるトレーニングも紹介

みなさんは「クリティカルシンキング」という言葉を聞いたことはありますか？重要な経営判断をする際にあえて否定的な視点から見て、それらのリスクを回避・対策するための施策を考えるために使われるフレームワークです。 これを正しく理解することで、より本質的に物事の判断が可能になります。今回はクリティカルシンキングを、具体例を交え解説していきます。   クリティカルシンキングとは クリティカルシンキングとは、物事を考える時に「なぜだろう」「本当にそれは正しいのだろうか」と問いかけながら考える思考のこと。その考え方から批判的思考とも呼ばれています。物事を鵜吞みにせず批判的に考えることで、客観的に判断できる思考法のため、教育やビジネスの分野で用いられています。 また、よく似た言葉に「ロジカルシンキング」という思考法が存在します。ロジカルシンキングは、物事を筋道立てて考えることで課題と問題を論理的に解決に導く思考法。つまり、クリティカルシンキングは「本当にそう？」などと物事が本当に正しいのか検証しながら考える思考法で、ロジカルシンキングは「AだからB」という風に順序良く論理的に考える思考法です。 両者の思考法の違いを利用して、2つを組み合わせて使うと良いでしょう。   ビジネスにおけるクリティカルシンキング ビジネスにおいては、考え方や価値観の違う人と仕事をしなければなりません。そのため、特定の考え方に流されず、客観的に物事を判断することが重要です。この点においてクリティカルシンキングが役立ちます。 例えば、会社の上司がある考えを提案したとしましょう。上司の考えを鵜吞みにせず、本当にその考え方は正しいのかどうか疑いながら客観的に考えます。「なぜ？」「どういうこと？」と考えていくことで、上司の考え方に加えて根拠を基にした問題解決策が導き出せるのです。   [PR] Webデザインで副業する学習方法を動画で公開中クリティカルシンキングの活用例 クリティカルシンキングは具体的な課題に対して、「仮説」と「疑問」を立てて考えます。では、クリティカルシンキングの例を紹介します。 【課題】 子供向けのゲームが流行っているので、ゲーム機で勉強ができるソフトがあれば売れるはずだ。 【仮説】 子供の間でゲームが流行っている 子供向けの勉強のできるゲームソフトがあれば売れる 【疑問】 本当に子供の間でゲームが流行っているのか？ 勉強のできるゲームソフトとはどういうものか？ 例えゲームでも、子供は勉強をするようになるのか？ 【課題】 若者の離職率が高いのは、やる気がない若者が多いからだ。 【仮説】 若者の離職率が高い 若者はやる気がないから、すぐ仕事を辞める 【疑問】 本当に若者の離職率は高いのか？ やる気のない若者が本当に多いのか？ 若者のやる気をなくさせているのは会社ではないのか？   クリティカルシンキングを鍛えるトレーニング方法 クリティカルシンキングは鍛えることで身に着けられる思考法です。ただし、すでに自分の考え方がクセづいてしまっている場合もあるので、繰り返しトレーニングしましょう。 普段から誰かの意見に対して「なぜ？」「どうして？」と考えるクセをつける必要があります。相手の意見を批判し、根拠となる情報を探してみましょう。繰り返し考えている間に、次第とクリティカルシンキングが身についてきます。   まとめ 今回は、クリティカルシンキングについて活用例とトレーニング方法を紹介しました。クリティカルシンキングはロジカルシンキングと組み合わせることで、より論理的に物事を考えられるようになります。 例えばビジネスシーンにおいては、誰かの意見を鵜吞みにせず自ら疑問を投げかけるクセをつけることで根拠ある結論が導き出せます。また、クリティカルシンキングはトレーニングも可能です。日頃から「なぜ？」「どうして？」と意見を疑い、核心をついた結論を導き出せるようになりましょう。   また、当メディアを運営している（株）キラメックスでは、オンラインのプログラミングスクールTechAcademyではエンジニア転職保証コースを提供しています。 プログラミング未経験の方でも12週間で東京のIT企業へエンジニアとして転職を目指せるコースです。 現役エンジニアとキャリアカウンセラーによる学習と転職のサポートを受けることができます。   プログラミングを独学で学習していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安 ・目標への学習プランがわからず、迷子になりそう テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
ビジネスマナー

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

JavaScriptでファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次CSSの外部スタイルシートとは外部スタイルシートの書き方外部スタイルシートがHTMLで読み込めないときに考えられる原因監修してくれたメンター そもそも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

CSSで使えるパスの種類を現役エンジニアが解説【初心者向け】

CSSで使えるパスの種類について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 CSSで使えるパスの種類について詳しく説明していくね！ 大石ゆかり お願いします！ 目次 CSSにおけるパスとは 絶対パス／相対パスとは ルートパス(ルート相対パス)とは それぞれのパスの活用場面   CSSにおけるパスとは CSSファイルにスタイルを記述していく中で、外部ファイルを読み込みたいケースがあります。例えば以下です。 画像ファイル（背景画像など） フォントファイル それらをCSSファイルに読み込んで使う場合、読み込みたいファイルへのパスを指定して読み込みます。パスとは対象ファイルの場所へ繋がるように書くもののことをいいます。 パスの書き方には種類があります。以下でご紹介していきます。   [PR] Webデザインで副業する学習方法を動画で公開中絶対パス／相対パスとは 絶対パス 絶対パスとは、読み込むファイルのhttps or httpから始まる全てのURLを記載したものをいいます。 例） .box { background-image: url('https://sample.jp/img/path.jpg'); } 相対パス 相対パスとは、記述するファイルを基準に、読み込むファイルへの場所を記載したものをいいます。例えば、以下のファイル構造になっており、style.cssからimgディレクトリ の中のpath.jpgを読み込むとします。 - css - style.css - img - path.jpg その場合は以下の書き方になります。 .box { background-image: url('../img/path.jpg'); } 「../」は一個上の階層に上がって・・・という意味です。style.cssを基準に一個上の階層に上がって、imgディレクトリ の中のpath.jpgという書き方となります。   ルートパス(ルート相対パス)とは ルートパス(ルート相対パス) ルートパスとは、URLドメイン部分を除く、「/」から始まる読み込むファイルへの場所を記載したものをいいます。簡単に言うと、絶対パスのドメインなしバージョンという形です。   例） .box { background-image: url('/img/path.jpg'); }   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。
CSS

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSの外部スタイルシートがHTMLで読み込めないときに考えられる原因を現役デザイナーが解説【初心者向け】