|ツイートシェアはてなポケット少女CSSはプログラミング言語なの?少年CSSの構造や書き方を知りたいこんな疑問、要望に応えるべく、CSSの基本知識から解説する記事です。CSSのコードを見て、「プログラミング言語なのかな」と思っている人もいるのではないでしょうか。結論から言えば、CSSはプログラミング言語ではなくスタイルシート言語です。そもそも、CSSを利用するメリットはなんなのか、と疑問に思っている人もいると思います。そこで今回は、CSSについて次の順番でお話ししていきます。CSSとは?CSSの構造CSSを利用するメリットCSSの書き方、使い方Web制作に興味はあるけどCSSはわからない、というあなた向けの記事ですので、ぜひご覧ください。記事のもくじCSSとは?→スタイルシート言語そもそもスタイルシートとはCSSが必要な理由プログラミング言語との違いスタイルシート言語CSSの構造CSSの基本「ルールセット」セレクタには複数の種類があるスタイルシート言語CSSを利用するメリット文書構造を保てるメンテナンス性が向上するメディアごとにスタイルを指定できるスタイルシート言語CSSの書き方・使い方HTMLにCSSを適用する方法は2種類OS標準のテキストエディタでCSSを書いてみようまとめ:CSSはプログラミング言語ではなくスタイルシート言語CSSとは?→スタイルシート言語はじめに、CSSの基本知識を解説しますが、第一にCSSはプログラミング言語ではなく、スタイルシート言語であることを覚えておきましょう。CSSとは何なのか、ということがわかるようにまとめましたので、一つずつ見ていきましょう。Sheetsの略称であり、スタイルシート言語です。Webページのスタイルを指定するために利用される言語です。スタイルシートとは何でしょうか。スタイルシートは、構造化された文書などの表示形式を制御するための仕組みを表します。CSSは構造化された文書(HTML)の表示形式(スタイル)を指定する言語なのです。ちなみに、CSSの「カスケーディング」は、ある要素のプロパティに対する宣言が複数ある際に、宣言の強さの関係を定めて、複数ある中の1つの宣言だけを有効にする仕組みです。HTMLに適用する場合、同じ要素に対して複数のスタイルを指定する場合がありますが、そのなかでも1つだけを適用する仕組みをCSSは持っています。カスケーディングはCSSを扱う上で非常に大切な考え方ですので、覚えておきましょう。CSSが必要な理由CSSが必要な理由として「文書構造を保つため」ということが挙げられます。CSSは表示形式を制御する、とお話ししましたが、フォントの色を変えたり、フォントサイズを変えたりする程度であれば、HTMLだけでも実現できます。HTMLだけで実現できるのであれば、CSSを使う必要はないのではないか、と思う人もいるのではないでしょうか。HTMLは本来Webページの情報構造を定義するための言語であるため、フォントの色を変えるといった表示形式の制御は、本来の使い方ではありません。本来の使い方と異なる使い方をすると文書の情報構造が乱れてしまい、検索エンジンに理解されない文書構造になってしまう可能性があるのです。ほかにも、CSSを利用することで得られるメリットもありますが、CSSが必要な理由としては「文書構造を保つため」と覚えておきましょう。プログラミング言語との違いはじめにCSSはプログラミング言語ではないと解説しましたが、プログラミング言語と何が違うのでしょうか。プログラミング言語とは、「動作処理が行われるもの」であり、CSSでは動作処理を行えません。プログラミング言語では計算処理を行えますが、CSSはHTMLを装飾するだけです。習得難易度でいっても、動作処理が行えるプログラミング言語のほうが難しく、CSSはプログラミング言語ほど難しくはありません。スタイルシート言語CSSの構造スタイルシート言語であるCSSは、構造に決まりがあります。CSSの構造を理解すれば、Webページを自由に装飾することができるようになるのです。ここでは、基本となるルールセットの解説とあわせて、セレクタについて紹介します。CSSの基本「ルールセット」CSSの基本構造は「ルールセット」と呼ばれ、次の要素で構成されています。セレクタ、宣言、プロパティ、プロパティ値の4つがルールセットの構成要素です。一つのルールセットは「{}」で囲まれます。それぞれの構成要素について、一つずつ見ていきましょう。基本的にセレクタにはHTML要素名が入ります。該当するHTMLタグに対して、スタイルを適用します。スタイルを適用する対象を選択(Select)する者(er)なのです。セレクタにはHTML要素名以外にも、さまざまな種類のセレクタが利用できますが、詳しくは後ほど解説します。画像の例では、「font-size:20px;」のプロパティとプロパティ値が宣言となります。具体的にどのようなスタイルを適用するのかを記載するものであり、1つのルールセットの中に複数の宣言を記載可能です。指定されたセレクタにどのようなスタイルを適用するのかを指定します。画像の例では、「文字の大きさ」を表す「font-size」プロパティを利用しています。プロパティに対して、スタイルの値を指定します。画像の例では、「20px」を指定しているため、文字の大きさが20pxになります。プロパティ値は、「:(コロン)」ではじまり「;(セミコロン)」で終わることを覚えておきましょう。セレクタには複数の種類があるセレクタにはHTML要素名を指定することが多いものですが、そのほかにも指定することが可能です。さまざまな種類のセレクタを表にまとめました。(なし)これだけだと分かりづらいかもしれませんが、実際に書いて試してみると理解しやすいでしょう。具体的な使い方については、別の記事でも解説していますので、そちらをご参照ください。CSSの記号の意味「#」「>」「$」など〜使い方とあわせて完全網羅〜2023-04-20スタイルシート言語CSSを利用するメリットWebサイトのスタイルを指定する際に、CSSを利用すると複数のメリットが得られます。ここでは、CSSを利用する3つのメリットについてお話しします。文書構造を保てるCSSが必要な理由でもお話ししたとおり、CSSでスタイルを制御することで、HTMLの文書構造を保てます。CSSが必要な理由であるとともに、利用するメリットといえるでしょう。HTMLでスタイルを制御してしまうと、文書内容にそぐわないHTMLタグを利用してしまい、検索エンジンなどに文書構造を理解してもらえなくなる可能性が考えられます。検索エンジンで上位表示されないと、せっかくWebサイトを作成しても誰にも見てもらえないため、非常に重要な要素です。メンテナンス性が向上するCSSはHTMLファイルと別に保存できます。そのため、1つのCSSファイルを複数のHTMLファイルで参照することで、一括してスタイルを適用できるのです。HTMLでスタイルを指定する場合は、複数のHTMLファイルに同じ内容を何度も記載しなければなりません。修正する場合には、存在するHTMLファイル分の修正が必要となります。CSSファイルにスタイルをまとめて記載し、複数のHTMLファイルから参照すれば、CSSファイルを修正するだけで、すべてのHTMLファイルに適用されるため、メンテナンス性が向上します。メディアごとにスタイルを指定できるCSSを利用することで、メディアごとに適用するスタイルを指定することができます。現在では、スマホやタブレットの利用が非常に増えてきたため、Webページを表示する画面サイズに大きなばらつきがあります。画面サイズごとに適したレイアウトや文字サイズを適用するべきです。前までは、PC用のCSS、スマホ用のCSSと分けて作成していました。現在では画面サイズに応じてシームレスにレイアウトを変更する「レスポンシブデザイン」が主流です。レスポンシブデザインは1つのCSSファイルで実現させることができ、CSSを利用する大きなメリットといえます。具体的にCSSの書き方や使い方を知りたい、という方もいるのではないでしょうか。ここでは、CSSの書き方や使い方について解説します。HTMLにCSSを適用する方法は2種類CSSはHTMLとセットで利用するものであり、HTMLに対して適用しますが、適用方法は2種類あります。「HTMLファイルに直接CSSを記載する方法」と「CSSファイルをHTMLファイルから読み込む方法」の2種類です。type=”text/css”>~</style>」と記載し、styleタグの間にルールセットを記述していきます。href=”CSSファイル名”>」と記載して、HTMLファイルからCSSファイルを読み込みます。特別な理由がない限り、CSSファイルをHTMLから読み込む方法を利用しましょう。CSSファイルを外出しすることで、メンテナンス性が格段に向上します。OS標準のテキストエディタでCSSを書いてみようCSSはOS標準のテキストエディタで記述できます。Windowsであれば「メモ帳」、Macであれば「テキストエディット」で記述可能です。CSS単体では意味がないため、HTMLとあわせて実際に以下のサンプルコードを使って書いてみましょう。green;}HTMLファイルを「index.html」、CSSファイルを「sample-css.css」という名前で、同じフォルダに保存してください。「index.html」をブラウザで表示すると、h2タグの内容が赤色で表示され、リンクにマウスカーソルを合わせるとフォントサイズ20pxで、緑色になります。サンプルコードをあなたなりに修正して、CSSの動きを確認してみてはいかがでしょうか。まとめ:CSSはプログラミング言語ではなくスタイルシート言語CSSは動作処理が行えないため、プログラミング言語ではなく、スタイルシート言語です。HTMLに対して、文字色や文字サイズを変更したりと表示形式(スタイル)を適用します。CSSはHTML文書の構造を保つために必要であり、メンテナンス性の向上など、複数のメリットがあります。HTMLとセットで利用するものですが、その役割は大きく異なることを覚えておきましょう。基本となるルールセットを覚えておけば、さまざまなスタイルを適用することができます。実際に書いて試してみながら、CSSを覚えてみてはいかがでしょうか。英語でプログラミングが学べるKredoオンラインキャンププログラミング×英語を身につけてグローバルに活躍しませんか?当メディアを運営しているKredoでは、プログラミング×英語が学べるオンラインスクール「Kredoオンラインキャンプ」を運営中です。フリーランスへのキャリアチェンジを実現しています。ネットワークスペシャリスト・情報セキュリティスペシャリストなどの資格も取得。その後、IT・Web専門ライターとして、プログラミング、ネットワーク、セキュリティ、AIなどの解説記事を中心に執筆している。「専門知識を初心者でも理解できるようにわかりやすく書く」ことを心がけている。