CSSはどこに書けばいいのか?【初心者向け】CSS(スタイルシート)はどこに書けばいいの?そんな疑問を解決できる初心者向けの記事です。CSSの記述場所は3種類あります。styleタグ、インライン、外部ファイルの3つですので、それぞれ書き方を解説します。[テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。CSSの基本的な書き方は決まっていますが、CSSの記述場所にはいくつかあります。そこで今回は、CSSを書く場所について初心者向けに解説します。本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。田島悠介ここではCSSをどこで書くかということについて説明するよ。大石ゆかり田島メンター!!CSSを書く場所というのはどのように決まっているんでしょうか~?田島悠介styleタグに書く方法・インラインに書く方法・外部ファイルに書く方法と3通りあるんだ。それぞれの書き方を見てみよう。大石ゆかりはい!CSSを書く3つの場所CSSを書く場所は、ズバリ、以下の3つです。それぞれに応じて、書く場所も変わってきます。styleタグに書くインラインに書く外部ファイルに書くそれでは、下記のHTMLファイルをもとに、ひとつずつ見ていきましょう。charset=“UFT-8”><title>CSS</title></head><body><h1>CSS入門</h1><p>はじめてのCSS</p></body></html>これをデスクトップに「a.html」の名前で保存し、ブラウザで読み込んだものが次の画面です。ここにCSSを使ってスタイルを施していきます。今回はこの例で、それぞれの記述方法を見てみよう。大石ゆかりh1の見出しと、pの段落がひとつずつある状態ですね。田島悠介この文書の文字の色や大きさを指定していくよ。styleタグに書く方法からだね。そこで指定していくことで、<body>にスタイルを適応させます。「h1」タグの文字を赤にしたい場合は、次のように書きます。}</style></head><body><h1>CSS入門</h1><p>はじめてのCSS</p></body></html>すると、このようにブラウザでは見栄えが反映されました。HTML/CSSで挫折しない学習方法を動画で公開中インラインに書く次にインラインに書く方法です。インラインに書くときは、タグに直接、属性としてスタイルを指定します。”>はじめてのCSS</p></body></html>ブラウザではこのように更新されます。外部ファイルに書く最後に、外部ファイルに書く方法です。これは、HTMLファイルに書き込むのではなく、違うファイルにCSSを書き、リンクで読み込むというものです。最近公開されているWebサイトではこの書き方が一般的になっています。新規でファイルを作成してください。フォントサイズを大きくしたい場合、次のように書きます。h1{font-size:40px;}そしてファイルに拡張子「.css」を入れた名前を付けて保存します。(ここでは「style.css」としました)ここで注意点ですが、保存するときは、さきほどのHTMLファイルと同じ階層に保存するようにしましょう。次に、このCSSファイルを、先ほどのHTMLファイルの<style>内に紐付けます。このとき使うのを「link」タグといい、特定のファイルを紐付けることができる性質を持ちます。href=“style.css”>relは読み込むファイル、hrefは、relで読み込むファイルがどこにあるものかを指定します。これで、「style.css」のスタイルシートを読み込むという意味になります。”>はじめてのCSS</p></body></html>これを保存し、ブラウザで読み込みなおすと、別ファイルで書いたスタイルが適応されるはずです。指定通り、文字が大きくなりました。今回の記事は以上です。自分でも手を動かしながらCSSを書いてみましょう。CSSについてさらに詳しく知りたい場合は、CSSを記述する際の優先順位の記事もあるので合わせてご覧ください。田島悠介それぞれの適用方法はこんな感じだね。大石ゆかりこの中だと、外部ファイルが一番編集しやすいように感じますね。基本的にCSSは外部ファイルから適用させる方法が多く使われているよ。この手順で練習してみよう。大石ゆかり分かりました。ありがとうございます!また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。CSSを基礎から学ぶことができます。関連する記事CSSでbackground-imageが表示されないときの対処法を現役デザイナーが解説【初心者向け】【初心者CSSでbackground-imageが表示されないときの対処法について解説します。CSSについてそもそもよく分からないという方は、CSSの書き方につ...CSSCSSのletter-spacingの使い方【初心者向け】CSSのletter-spacingの使い方について解説します。CSSの基礎がわからない場合は、CSSの書き方の記事を先にお読みください。)の使い方について解説しています。レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利で...CSSCSSでtransform:rotateを使って要素を回転させる方法を現役エンジニアが解説【初心者向け】CSSでtransform:rotateを使って要素を回転させる方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向...CSS表現を豊かに!CSSでborder-radiusを使って角丸を作る方法【初心者向け】border-radiusを使って角丸を作る方法について解説しています。今回はCSSでnth-of-typeを使って特殊な「擬似クラス」を使う方法を紹介します。先頭から何番目だけ色を変えるといった特定の要素にスタイルを適用す...CSSあわせてよく読まれている記事CSSのスタイルの優先順位とは【初心者向け】CSSの記述場所には、styleタグに書く、タグのインラインに直接書く、外部ファイルを作って読み込むという3つの書き方があります。その上で、今回は、スタイルの優先順位について解説します。本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。今回は、CSSで記述されたものの優先順位について勉強するよ。記述した場所が後になるほど優先順位は高くなるんだ。同じ場所にスタイルを指定して、どちらが適用されるか実際に見てみよう。はじめに答えを言ってしまうと、スタイルは、一番最後に書いたものが最優先で適応されます。いうことかと言うと、コードの始めのほうで先にスタイルを指定していたとしても、重複したタグへの指定の場合は、一番最後に書かれたスタイルが適応されるのです。ブラウザはHTMLやスタイルシートのデータを上から順に一行ずつ読み込んでいくので、下にいけばいくほど、読み込む情報が最新になるからです。色は先に指定されたピンクではなく、最後に指定されたブルーによって上書きされます。今回のテーマは、HTML/CSSの基礎です。こちらの内容はTechAcademyのWebデザインオンラインブートキャンプでも扱っています。Language)について学びました。HTMLはあくまでも文書ですので、文書を書くことが前提になっています。その上で、画像やリンクも追加できます。ファイルの拡張子は「.html」です。耳にする「マークアップ」とは文字列をHTMLタグで囲むことによって正しい文書構造を作ることです。実際にHTMLを書くと、このような構造になっています。headは見出し、bodyは本文です。開始タグと終了タグがあるので、<p>〜</p>のように閉じることを忘れないようにする必要があります。勉強会では、基本的なHTMLタグとして下記のタグが紹介されました。実際に書き始める前の注意点についても紹介されています。HTMLを書く際は全角文字がNGなので、コードは必ず半角英数字で書く必要があります。全角スペースもエラーの原因となるため、見分けれるようにエディタを設定することも多いです。その後、勉強会では参加者が実際にプロフィールページをHTMLで作成しました。テキストエディタを使って、まずは自分のプロフィールを打ち込んでいきます。続いて、HTMLを書き加える形でコーディングしていきました。HTMLは書籍や書類、手紙などのように実際の形は無いよね。見出しとかタイトルとかを指定してあげなければならないんだよ。サイトに訪問してくれた人にはわかって貰えるだろうけど、検索エンジンにはわかってもらえないよね。検索エンジンはタグによって、ページのタイトルとかを判断しているんだ。!検索エンジンに知ってもらうためだったりもするんですね~。Sheets)の基礎も学びました。CSSは、見栄えを記述するための言語です。HTMLだけでも装飾することはできますが、HTMLだけを使うと手間がかかるのでCSSを使うと便利になります。拡張子は「.css」です。CSSには、「セレクタ」「プロパティ」「値」の3つがあります。h1タグの文字を「フォントサイズを20px」にする場合はこのように記述します。この際、h1がセレクタ、font-sizeがプロパティ、20pxが値となります。最後に、CSSの書き方として「CSSを別ファイルにした場合」と「HTMLに直接書く場合」の2つが紹介されました。HTMLに直接書く場合は、styleタグを使ってこのように記述します。このコードも参考にして自分でHTML/CSSを書いてみてください。今回の勉強会レポートは以上です。勉強会に興味のある人事担当者の方は、まずはFacebookグループにご参加ください。タグに直接定義するような内側にあるほうが、優先度が高いんだよ。CSSだと見た目を大きく変えられるので、HTMLより興味があります。デザインも適した箇所に設定したほうがいいのでHTMLの基礎も大事なんだよ。[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTML/CSSの基礎から学ぶことができます。本記事では、これからWebデザインを勉強したいという初心者向けに「CSSとは何か」について解説します。HTMLとはの記事もあるので合わせてお読みください。本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。CSSの役割はサイトの「スタイル」を決定することだよ。音声による読み上げや印刷時に関する設定もあるけれど、一番多いのはデザインやレイアウトなどの「見た目」に関する指定だね。実際のサイトで、CSSが適用されている場合とそうでない場合の違いを見てみよう。頭文字をとったものであり、スタイルシートとも呼ばれます。HTMLが、見出しやヘッダ情報などWebページの文書構造を形作るための言語であるのに対し、CSS言語は文書構造にデザインを施し、見栄えを整える役割を担っています。実際に、ブラウザでWebページを表示してみましょう。さきほど述べたように、このページはHTMLとCSSとが合わさって形作られています。試しにここからCSSを除き、文書構造のみを表示させてみましょう。Webページの読み込みがうまくいかない場合など、このような画面が表示されたことがある人もいるのではないでしょうか。これにCSSがきちんと適応されると、さきほどのようなきれいなデザインのWebページが表示されるのです。見出しと文字がただ順番に書かれただけになって、画像の位置や大きさもなんだか変わっちゃいましたね。これらのレイアウトやデザインを指定しているのがCSSになるんだ。今見ているのは、HTMLだけで構成された状態の文書だね。見やすいページを作るのに、CSSはとても大事なんですね。最後に、CSSファイルの作り方をご紹介しましょう。ファイル名に拡張子の「.css」をつけることで、CSSファイルとしてコンピュータが認識してくれます。CSSの基本的な説明は以上です。以下、html形式のファイルを用意します。いった一文を入れます。することで、「style.css」というファイルを読み込んで書いたCSSファイルを適用してくれます。下のような緑色の背景に白色の文字を表示させる方法を書いてみます。htmlファイルを用意しましょう。上で説明したように、cssの適用を<head></head>内に記述し、<body></body>内に表示させる文言を書いていきます。続いて、CSSファイルの編集です。「main」と「text」という名前のクラスを用意したので、CSSで幅や配色などを指定していきます。それぞれ箱分けするとこのような形になっています。最初はこれがイメージできず、自分のしたいレイアウトに出来ないことが多々ありますが、やっていく中で慣れていくはずです。CSSに関する基本的な構造だよ。“main”の部分、”text”の部分それぞれに色や大きさの指定をしているんですね。この”.main”,”.text”のようなスタイルを適用させる範囲の指定を「セレクタ」というんだ。