【今すぐ無料で試す】ゼロから始める定額・学び放題のプログラミング学習サービス「侍テラコヤ」

【初心者向け】CSSとは?読み方は?CSSの記述方法・記述場所・ルールも分かりやすく解説

HTMLとCSSを知っている人

CSSはHTMLにスタイル機能を提供し、表示を制御するための言語です。

 

HTMLには表示を制御する機能がなく、フォントを変えたり、複雑なレイアウトを組んだりすることができません。

 

CSSを利用することでHTMLの表示を制御して見た目を整形することができます。

 

これからCSSを記述してみたいと思っても、まずはCSSの記述方法・記述場所・ルールが分からないといけません。

 

そこでこの記事では初心者の方でも分かりやすいようにCSSの記述方法・記述場所・ルールを分かりやすく解説していきたいと思います。

 

気になる方は是非最後まで読んで頂ければと思います。

 




 

CSSとは?

 

 

HTMLとCSSを知っている人

CSSは Cascading Style Sheet (カスケーディング・スタイルシート)の略です。

 

CSSを利用することでWebページの見栄えを細かく設定することができます。

 

例えば、文字に色をつけたり、背景に色をつけたり、フォントを変更したりすることができます。

 

CSSを別管理するメリット
  • HTMLファイルの容量を少なくできる
  • CSSの修正が楽になる
  • Webページの表示速度がはやくなる

 

CSSはCascading Style Sheetsの略でウェブページのスタイルを指定するための言語です。

 

読み方は「カスケーディング・スタイル・シート」です。

 

ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。

 

HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合はスタイルシート言語の1つであるCSSが一般的に利用されています。

 

CSSは、HTMLと組み合わせて使用する言語です。

 

HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。

 

例えば、ウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイル、プリンタなどの機器で印刷・出力される際の出力スタイル、 音声で読み上げられる際の再生スタイルなど、 ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。

 




 

HTML&CSS事典を欲しい方必見(kindle unlimitedだと無料で読めます)

 

HTMLとCSSを知っている人

本書はHTMLの要素(タグ)とCSSのプロパティを解説したリファレンスです。

 

開きやすく手元に置きやすいB6判で、タグやプロパティの内容をサッと調べることができます。

 

タグやプロパティの解説だけでなく、基礎知識編ではHTMLやCSSの仕様、記述方法に加え、文字参照、URLといったWeb制作者として不可欠な知識も解説しています。

 

また、読者特典として、本書で使用しているサンプルコードをダウンロードできます。

 

 

HTML&CSSを学びたい方必見

 

HTMLとCSSを知っている人

本書は、HTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ書籍です。

 

現在主流なWebページのデザインスタイル、「スタンダードレイアウト」「グリッドレイアウト」「シングルページレイアウト」を適用した3つのサイトを作りながら、各スタイルの特徴や使い分け、コーディングテクニックを学びます。

 

実際のWeb 制作の現場と同様に、サイトのデザインを基にして骨格を見極め、枠組みから中身までひと通りコーディングするというフローをなぞることで、HTML5/CSS3の実用的なコーディングスキルやテクニックを無理なく身につけることができます。

 

 




 

CSSの記述方法・ルール

 

HTMLとCSSを知っている人

次にCSSの記述方法・ルールをみていきましょう。

 

CSSはHTMLのタグの「何を」「どうするのか」を記述しています。

 

h1 {
 color: orange;
 font-size: 36px;
}

 

CSSソースコードの各部分の名称
  • セレクタ:h1
  • プロパティ名:color、font-size
  • プロパティ値:orange、36px

 

まずはどの要素に対してデザインを適用させるのかを最初に示しています。

 

この部分をセレクタと言います。

 

次に要素に対する具体的なデザイン設定は { } 内に記述していきます。

 

{ } 内には何をどのようにデザイン設定をするのかを指定します。

 

{ } 内はプロパティ名とプロパティ値をコロン( : )で区切って記述します。

 

そして最後はセミコロン( ; )をつけて終わりです。

 

プロパティ名とプロパティ値は「{ }」で囲んであげることにだけ注意してください。

 

そこだけ気を付ければ、CSSの書き方は難しくはないでしょう。

 




 

CSSの記述場所

 

HTMLとCSSを知っている人

CSSの記述場所は以下の通り3つです。

 

インラインスタイル

 

HTMLのタグに直接スタイルを記述し、そのタグにのみ反映させることができます。

 

スタイルをテスト的に表示したい際によく用いられます。

 

ドキュメントスタイルシート

 

HTML文書のheadタグ内に、スタイルをまとめて記述することができます。

 

複数ページあるうちの特定のページにだけ優先的に反映させたいスタイルがある場合に使用することがあります。

 

外部スタイルシート

 

HTML文書以外にスタイル定義のみのファイル(スタイルファイル)を記述し、HTML文書内から参照してスタイルを指定する方法です。

 

外部スタイルシートは更新がしやすいという理由で、現在最も使用されています。

 

まとめ

 

インラインスタイルの場合はその要素のみ、ドキュメントスタイルシートはそのページ内の要素のみにしかスタイルを適用しません。

 

もしWebページが何百、何千ページとなった場合、1ページずつスタイルを変更していくのは非常に骨が折れる作業になってしまいます。

 

しかし外部スタイルシートはHTML内でlinkタグを使用してスタイルシートと結びつけるだけで、そのスタイルシートに定義されているスタイルが反映されます。

 

1つのスタイルシートのファイル内にあるスタイルを変更するだけで、linkタグでつながっているすべてのHTMLファイルの要素のスタイルを変更することができます。

 

このように現在は更新のしやすさを考えて外部のファイルにまとめてスタイルを管理することが一般的です。もちろん上述の2つの方法と組み合わせることもできます。

 




 

CSSのルール

 

HTMLとCSSを知っている人

CSSは様々な書き方が可能となっています。

 

それではCSSソースコード例である「半角スペース・改行を入れたソースコード」と「半角スペース・改行を入れないソースコード」をみていきましょう。

 

半角スペース・改行を入れたソースコード

 

h1 {  
 color: orange;
 font-size: 36px;
}

 

半角スペース・改行を入れないソースコード

 

h1{color: orange;font-size: 36px;}

 

どちらのソースコードのほうが見やすいでしょうか?

 

もちろん、「半角スペース・改行を入れたソースコード」のほうが見やすいかと思います。

 

どのような書き方をしても大丈夫ですが、書き方を統一しておくことで見やすくもなりますし、予想外の編集ミスを防ぐことができます。

 

また、CSSのセレクタはカンマ( , )で区切って複数指定することもできます。

 

例えば、h1要素とp要素を同じ表示指定にする場合は以下のように記述します。

 

h1, p {   
 color: orange; 
 font-size: 36px; 
}

 

コメントの記述方法

 

CSSではソースコードにコメントを記述することができます。

 

「/*」と「*/」で囲った部分がコメントとなります。

 

コメントを書くことであとで見返した時、どのような表示設定がされているのか一目で分かりやすいです。

 

また、コメントを利用して一時的に表示設定を無効にすることも可能となっています。

 

/* 見出し */
h1 {   
 color: orange; 
 font-size: 36px; 
}

 

 




 

【実践編】レンタルサーバーにファイルをアップロードしてみましょう!

 

HTMLやCSSで使ったファイルをレンタルサーバーにアップロードすることでインターネット上にWebサイトが公開されます。

 

今までローカル環境でしか見れなかったWebサイトがインターネット上に公開されるとわくわくしますよね!

 

余裕がある方はレンタルサーバーにファイルをアップロードしてみましょう。

 

無料お試し期間もあるので是非レンタルサーバーを利用して学習してみてはいかがでしょうか!?

 

HTMLとCSSを知っている人

月額100円程度で利用できるおすすめのレンタルサーバーとして以下のものがあげられます。

 

 

 




 

格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

 

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

 

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

 

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

 

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

 

HTMLとCSSを知っている人

以下のプログラミングスクールもオススメです。

 

是非検討してみてはいかがでしょうか?

 

  1. 侍テラコヤ初月50%OFF学び応援キャンペーン実施中)(解説記事はこちら
    学び応援キャンペーンでお得に申し込む!
    ・コスパ最高! 月額2,980円〜利用できる!
    ・単月定額と比べて総額最大44,400円OFF!

    ・学び応援キャンペーン実施中!
  2. ZeroPlus Gate受講料98,000円がなんと0円!)(解説記事はこちら
    受講料0円でプログラミングを学ぶ!
    ・受講料0円
    ・現役エンジニアに質問し放題
    ・30日で副業レベルのWebスキルを学べる
  3. 本気のパソコン塾無料体験特典3つあり解説記事はこちら
    7日間無料体験または無料相談会に申し込む!
    ・実際に役立つウェブデザイン、ウェブプログラミングを身につけることができる
    ・【期間限定】無料相談会参加特典3つあり!

    ・7日間無料体験・無料相談会実施中!

 

 




 

まとめ

 

HTMLとCSSを知っている人

最後まで読んで頂きまして、ありがとうございました。

 

CSSを構成する名称・書き方・ルールをしっかりと理解しておくことはとても重要なことです。

 

途中で分からないことがあり、中々進まないこともあると思います。

 

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です