閉じる

CSSの書き方+サンプルコード付き(初心者向け)

CSSの基礎知識をはじめ、CSSを記述するファイルの作り方やサンプルコードをご自身のコードに適用する方法などを初心者の方向けに解説していきます。

カテゴリ: HTML/CSS

こんにちは!
最近、WEB制作の勉強をはじめたけど「CSSの基礎を理解したい・・!」 「CSSで詰まってしまっている・・・」「CSSを記述できるようになりたい・・!」
そんな風に考えている、初心者WEB製作者の方も多いのではないでしょうか?
WEB制作上達のコツは、基礎を理解した後はとにかく実践していく事です。

今回は、 「CSSの基礎知識」「CSSを記述するファイルの作り方」「サンプルコードをご自身のコードに適用し、実践を通し理解を深める」 を中心に、初心者の方向けに解説していきます。

CSSとは

CSSとはWEBページの「見栄え」を整える言語です。 CSSを使用せずHTMLだけでWEBページを作成すると、文字が並べられているだけになってしまします。 HTMLのみのページ

CSSを使用すると下記のように「見栄え」を変えてくれます。 CSSを適用したページ

かなり違いますね。 ざっくりいうと HTMLで文章・文字などの土台を構成し、 CSSで色やデザインを装飾していく役割があります。 ケーキで例えると、土台のスポンジが「HTML」 生クリーム、いちご、チョコなど土台のスポンジを装飾していいくのが「CSS」というイメージです。

CSSでできること

CSS でできることの一部を紹介します。

文字の色を変える

サンプルコード表示結果↓

文字の色を変える

HTMLサンプルコード

CSSサンプルコード

文字の大きさを変える

サンプルコード表示結果↓

文字の大きさを変える

HTMLサンプルコード

CSSサンプルコード

文字の位置を変える

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

文字の位置を上から100px空けています、まだまだ一部ですが、CSSを指定する事で「見栄え」を調整する事ができます。 CSSのコード内容、書き方は後ほど詳しく解説します。 今はCSSで「見栄え」を調整できる事を理解してください。

CSSをHTMLに反映させるには

CSSはHTMLファイルに反映させないと適用されません。 反映させるには3つ方法があります。

※ここに、HTML読み込みのファイルのイラれらがきます 3点とも紹介しますが、「1番目の方法1が最もオススメの方法」となります。 今回は方法1のやり方で、後半のサンプルコードの記述を進めていきます。 時間がない方は、方法1だけをみて下さい。

方法1:外部のCSSファイルを読み込む方法

●一番オススメの方法 HTMLの外にCSSファイルを作成し、読み込む方法です。

手順1:HTMLファイルを準備 テキストエディタを開き下記のコードをコピペして「index.html」という名前で、デスクトップに保存してください。

※解説 ポイント1 6行目: この箇所がポイントです! HTMLファイルの<head>〜</head>内に、 <link rel=”stylesheet” href=”sample.css”> を記述する事で、外部CSSファイルを読み込みます。 今回のコードでは、外部CSSファイル「sample.css」を読み込んでいます。
ポイント2 6行目<link rel=”stylesheet” href=”sample1.css”> rel属性は読み込むHTMLファイルとの関係性を表ます。 HTMLファイルから見て、外部CSSファイルはスタイルシートと呼ぶので、rel属性には”stylesheet”を指定します。
ポイント3 6行目<link rel=”stylesheet” href=”sample.css”> href属性の中に、読み込む対象のCSSファイル名を記述します。 今回の例では、「sample.css」を読み込んでいます。

手順2 CSSファイルを準備 HTMLファイルに読み込ませたいCSSファイルを準備 テキストエディタを開き下記をコピペし「sample.css」という名前でデスクトップに保存してください。

※解説 ポイント1 文字化けを防ぐ為のコード「@charset “UTF-8”;」を記入。 せっかくCSSが適応されても、文字化けを起こしてしまっては表示が崩れてします、必ず記載しましょう。
ポイント2 cssを記載する。 今回はわかりやすく p{ color: blue; } を指定しました。(文字色が青くなります)


手順3:HTMLファイル・CSSファイルを同じフォルダ内に置く 手順2まででデスクトップ上にHTMLファイル「index.html」・CSSファイル「sample.css」の 作成が完了しました。 しかし、2つのファイルが同じフォルダにない場合、HTMLファイルは、CSSファイルを 見つける事ができません。(※相対パスを変える事によって、2つのファイルが違うフォルダにあっても 読み込む事ができるが、今回は割愛)
sampleフォルダをデスクトップ上に作成し、index.html sample.cssの2つのファイルを入れます。

「index.html」ファイルを、WEBブラウザにドラックアンドドロップし、WEBページ上の画面に「方法1:外部のCSSファイルを読み込む」が青色の文字で反映されてればCSSファイルが無事読み込まれています。下記のような状態です。

これを作る↓

方法1:外部のCSSファイルを読み込む

作成したsampleフォルダ内にある「index.html」「sample.css」をメインに使用していきます。 残り2点のCSSを読み込ませる方法は、こういう方法もあるという理解で大丈夫です。

方法2:HTMLファイルにstyleタグを用いてCSSを記述する方法

HTMLの<head>タグ内に<style>タグを記述しCSSを記載していく方法です。 手順1:HTMLファイルを準備します。 HTMLサンプルコード

手順2:headタグ内に<style>タグを記述する。 HTMLサンプルコード

サンプルコード表示結果

これを作る↓

方法2:HTMLファイルにstyleタグを用いてCSSを記述する

※解説 「index.html」ファイルをWEBブラウザにドラックアンドドロップし、WEBページ上の画面に「方法2:HTMLファイルにstyleタグを用いてCSSを記述する」 が青色の文字で反映されてればCSSが反映されています。

方法3:style属性でタグに直接CSSを書く方法

手順1 HTMLを準備 HTMLサンプルコード

手順2 HTMLタグに直接CSSを記述する。 HTMLサンプルコード

サンプルコード表示結果

これを作る↓

方法3:style属性でタグに直接CSSを書く方法

「index.html」ファイルをWEBブラウザにドラックアンドドロップし、WEBページ上の画面に「方法3:style属性でタグに直接CSSを書く方法」 が青色の文字で反映されてればCSSが反映されています。

CSSの書き方

CSSの記述方法は決まっており、 セレクタ{  プロパティ: 値; }

セレクタ→「どこの?」プロパティ→「何を?」値→「どのように?」 を指定し記述していきます。 上記例だと「body要素」の「色」を「赤く」するという指定になります。 一つ一つ詳しくみていきます。

セレクタ

セレクタは「どこの?」の部分、変更したい場所のタグ名やClass、id名を記述します。 例えば、 pタグを変更したければセレクタに「p」という指定をします。

プロパティ

プロパティは「何を?」の部分、変更したい内容、色、大きさなどを記載します。 例えば、色を変更したければ「color」を指定します。

値→「どのように?」の部分、どのように変えていくのかを指定します。 例えば、プロパティで「color」が指定されているのであれば「blue」なのか「green」なのか適用できる値を指定します。

{}でプロパティと値を囲む

{}でプロパティと値を囲んで下さい。
body { color: blue; }
「{}がズレている」、「{}でない」、「上手く囲めていない」など記述を間違えると、セレクタを指定する事ができないので注意して下さい。

プロパティと値を(:)でつなぐ

プロパティと値は(:)コロンでつないで下さい。
body{ color:red }
プロパティと値は必ずセットになっています、どちらか単体で使用される事はありません。

複数プロパティ指定の際はセミコロンで(;)区切る

複数プロパティを指定する事もできます、その際は(;)で区切って下さい。
body { color: blue; background-color: green }
(;)がなくてもプロパティの指定が利きません、慣れてくると一つのセレクタに複数プロパティを指定する事が多いので(;)を忘れずにつけて下さい。 ここまでは文章を読むだけで、なんとなくの理解かもしれませんが次からは、 サンプルコードをご自身のコードに貼り付け、実際に手を動かして理解していきましょう。

サンプルコードを適用し、手を動かして理解を深めよう

先ほど「方法1:外部のCSSファイルを読み込む方法」で作成した、「index.html」「sample.css」ファイルを開いて下さい。 サンプルコードをご自身のコードに貼り付け、WEBページで見て、実際に手を動かして理解していきましょう。

サンプルコードでセレクタの書き方を学ぶ

セレクタの記述方法をサンプルコードで学んでいきましょう。

タグをセレクタに指定

h1、pタグをセレクタに指定し、「color」プロパティで色を変更します。 サンプルコード表示結果

サンプルコード表示結果↓

サンプルコードCSS

CSSの基礎理解

HTMLサンプルコード

CSSサンプルコード

※解説  CSSサンプルコード セレクタにタグを指定しCSSで見た目を変える方法です。 h1タグに、「プロパティ[color]」・値[red]」を指定し、pタグに、「プロパティ[color]・値[blue]」を指定します。 webページに「サンプルコードCSS」の文字色が赤に、「CSSの基礎理解」の文字色が青で表示されました。 色の値を変えて試してみて下さい。 タグにh1、pタグ以外にも多くの種類があります、詳しく知りたい方は下記を参照にして下さい。 http://html-coding.co.jp/annex/dictionary/html/

id名をセレクタに指定

id」をセレクタに指定し、「color」プロパティで色を変更します。

これを作る↓

サンプルコードCSS

CSSの基礎理解

HTMLサンプルコード

CSSサンプルコード

※解説 CSSサンプルコード id名をセレクタに指定する場合は「#id名」と記載して下さい、id名の前に「#」をつけるのがポイントとなります、上記例では、3行目「#example」と記述しセレクタを適用しています。
HTMLサンプルコード 「<div id=”example”>」を記述し、「</div>」で閉じています。

CSSで「#example」を指定した場合、この範囲内にデザインが適用されます。 つまり今回の例では、

上記2行が青く指定され表示されています。

class名をタグに指定

「class名」をセレクタに指定し、「color」プロパティで色を変更します。

これを作る↓

サンプルコードCSS

CSSの基礎理解

HTMLサンプルコード

CSSサンプルコード

※解説 CSSサンプルコード class名をセレクタに指定する場合は「.class名」と記載して下さい、class名の前に「.」をつけるのがポイントとなります、上記3行目「.example」と記述しセレクタを適用しています。
HTMLサンプルコード 「<div class=”example”>」を記述し、「</div>」で閉じられています。

class=”example”を指定した場合、この範囲内にデザインが適用されます。 つまり今回の例では、

が青く指定され表示されています。

複数セレクタを指定

同じデザインを適用させたい場合、セレクタを複数指定すると便利になります。(コードの記述量が減る) 例えば下記の「id=”example”」「.example2」「h3」に同じデザインを適用させたい場合などです。 HTMLサンプルコード

CSSサンプルコード

サンプルコード表示結果

これを作る↓

サンプルコードCSS

CSSの基礎理解

サンプルコードCSS 2

CSSの基礎理解 2

サンプルコードCSS 3

※解説 CSSサンプルコード 複数指定したい場合は、セレクタを「半角」+「コンマ」で区切りで記述する事で適用させることができます。 「id」「クラス」「タグ」など複数種類のセレクタを混ぜることも可能で、並べ順、並べる数などは関係ありません。

子孫セレクタ(絞り込み)指定

子孫セレクタとは、適用箇所を指定し絞り込む方法です。 「ここのここだけデザインを変えたい」といった場合に有効です。 例えば下記のような、「応用編」の文字色だけを赤に変えたい場合などに有効です。

これを作る↓

サンプルコードCSS

CSSの基礎理解

CSSの応用編

HTMLサンプルコード

CSSサンプルコード

※解説 HTMLサンプルコード 文字色を変えたい箇所にタグを記載します。
CSSサンプルコード 7行目「.example p span」に注目して下さい。 .exampleクラスの→pタグの→spanタグと絞り込み、適用箇所の「応用編」だけを赤色に表示する事  ができます。「ここのここだけのデザインを変更したい」といった場合に有効な手段です。
ここまでがセレクタに指定できる書き方です。 簡単にまとめると ①タグをセレクタに指定 ②id名をセレクタに指定 ③class名をセレクタに指定 ④複数セレクタを指定 ⑤子孫セレクタ(絞り込み)指定

サンプルコードでプロパティ・値の書き方を学ぶ

プロパティの記述方法をサンプルコードで学んでいきましょう。

文字の色を変える

文字色を変えるプロパティは「color」 値は「カラーネーム」か「カラーコード」のどちらかで指定します。

●カラーネーム カラーネームはCSSで特定の色につけられている名前です。 英語の色名と考えてさし使いありません。 青→「blue」赤→「red」緑→「green」

●カラーコード 6桁の英数字で表ます。例えばこの色は「#FF6600」と6桁の英数字で表されます。下記のカラーコードを参照してみて下さい。 http://www.netyasun.com/home/color.html

サンプルコード表示結果

これを作る↓

サンプルコードCSS

CSSの基礎理解

CSSの応用編

HTMLサンプルコード

CSSサンプルコード

背景色を変える

背景色を変えるプロパティは「backgroud-color」 値は文字色と同じ「カラーネーム」か「カラーコード」のどちらかで指定します。 ご自身のコードに下記をコピペし、カラーコードを参考にして、好きな色に変更してみて下さい。
ページ全体の背景色を変えるには、「body」セレクタに指定します。 サンプルコード表示結果

これを作る↓

サンプルコードCSS

CSSの基礎理解

CSSの応用

HTMLサンプルコード

CSSサンプルコード

一部の背景色を変えたい時は、HTMLサンプルコード10行目の「div class=”haikei”」セレクタに、プロパティ・値を指定します。 サンプルコード表示結果

これを作る↓

サンプルコードCSS

CSSの基礎理解

CSSの応用

CSSサンプルコードを加える

文字の大きさを変える

文字の大きさを変えるプロパティは「font-size」を指定します。 値は「px」で指定します。その他もありますが今回は基本のpxを紹介します。
●px 〇〇pxと指定、〇〇の中は数字。数字の数が大きくなればなる程大きくなります。
pタグの文字を30pxにしてしてみます。 ご自身のコードに下記をコピペし、適用できたら好きな大きさに変更してみて下さい。 サンプルコード表示結果

これを作る↓

サンプルコードCSS

CSSの基礎理解

HTMLサンプルコード

CSSサンプルコード

間隔を空ける

文字の大きさを変えるプロパティは「margin-〇〇」を指定します。 値は「margin-〇〇」で指定します。
●「margin-〇〇」 〇〇の中には、「top」「bottom」「right」「left」いずれかが入ります。 「margin-topは、上との間隔」「margin-bottomは、下との間隔」「margin-rightは、右との間隔」「margin-leftは、左との間隔」を表ます。
●値はpxを指定します。 margin-top: 50px;と指定すれば、上との間隔を50px空ける事ができます。 ご自身のコードに下記をコピペし、適用できたら、好きな値に変更してみて下さい。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

文字を揃える

文字を「左寄せ」「中央寄せ」「右寄せ」の3箇所に揃える位置を指定する事ができます。 text-aliginプロパティを指定します。 値は「left→左寄せ(初期値)」「center→真ん中」「right→右寄せ」にする事ができます。
サンプルコードで3つの値を指定してみましょう。 ご自身のコードに下記をコピペし、適用できたら、好きな値に変更してみて下さい。 サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

線をひく

線を引くには「border」プロパティを指定します。 線の種類の値、4種類を紹介します。
●線の種類 solid(実践) dotted(点線) dashed(破線) double(二重線)
それではサンプルコードで全ての線を引いてみます、ご自身のコードに下記をコピペし、適用できたら、好きな値に変更してみて下さい。 サンプルコード表示結果

これを作る↓

solid(実線)

dotted (点線)

dashed (破線)

double (二重線)

HTMLサンプルコード

CSSサンプルコード

上・下・左・右どこかにだけ線を引く

borderのプロパティ名を変えます。 「border-topは、上にだけ線を引く」「border-bottomは、にだけ線を引く」「border-rightは、右側にだけ線を引く」「border-leftは、左側にだけ線を引く」 それでは、サンプルコードでみていきましょう。 サンプルコード表示結果

これを作る↓

ボーダー上だけ

ボーダーの下だけ

ボーダー右だけ

ボーダー左だけ

HTMLサンプルコード

CSSサンプルコード

横幅・高さ指定

要素の横幅、高さを調整します。 プロパティは「横幅→widthプロパティ」「高さ→heightプロパティ」 値はpxを指定します。
幅、高さの指定がわかりやすいように要素に「background-color」を指定します。 ご自身のコードに下記をコピペし、適用できたら、好きな値に変更してみて下さい。 サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

この他にも displayプロパティ→要素の表示形式を指定する positionプロパティ→要素の表示形式を指定する floatプロパティ→左か右に寄せて配置する font-familyプロパティ→フォントの種類を指定する z-indexプロパティ→要素の重なりの順序を指定する など様々なプロパティが用意されています。
今回紹介したプロパティだけでも多くの事ができますので、実際に手を動かし、プロパティ・値を自分で変えてみてより理解を深めて下さい。

まとめ

今回は「CSSの基礎知識」「CSSを記述するファイルの作り方」「サンプルコードをご自身のコードに適用し、実践を通し理解を深める」を中心に解説していきました。
簡単にポイントをまとめます。
1.CSSとはWEBページの「見栄え」を整える言語  ケーキで例えると、土台のスポンジが「HTML」、  生クリーム、いちご、チョコなど土台のスポンジを装飾していいくのが「CSS」というイメージ。
2.CSSはHTMLファイルに反映させないと適用されない  反映させる方法は3点あり、方法1がオススメ  方法1:外部のCSSファイルを読み込む方法  方法2:HTMLファイルにstyleタグを用いてCSSを記述する方法  方法3:style属性でタグに直接CSSを書く方法
3.CSSの文法は
セレクタ{  プロパティ: 値; }
「セレクタ」、「プロパティ」、「値」の3点からできている
4.セレクタの指定は、「タグ」「id」「.class名」の指定ができ、複数指定、子孫セレクタで絞った指定もできる
5.主要なプロパティを9点紹介 ①「color」→文字色を変える ②「background-color」→背景色を変える ③「font-size」→文字の大きさを変える ④「margin-〇〇」→間隔を空ける ⑤「text-aligin」→文字の位置を揃える ⑦「border」→線を引く ⑧「border-〇〇」→上・下・左・右どこかにだけ線を引く ⑨「width・hegiht」→横幅、高さを指定
いかがだったでしょうか? CSSの基礎知識といってもかなり幅広いと思いますが、実際に手を動かし、変化を自分の目で見る事が1番の近道だと思います。本記事のサンプルコードを自分のコードに適用し、「セレクタ」「プロパティ」「値」を変えて理解を深めてみて下さい。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。