カテゴリー

  • Tech
  • 英語学習
  • セブ島・留学準備
  • キャリア
  • Kredo
KredoのIT留学
スタッフ募集中
留学体験談
無料相談はこちら
セブ島IT留学の「Kredo」が運営するメディア「Kredoblog」
  • TECH Tech
    • Web・プログラミング

      Web・プログラミング

    • テクノロジー

      AI・テクノロジー

  • ENGLISH 英語学習
    • 英語学習法

      英語学習法

    • 英語表現・フレーズ

      英語フレーズ

  • STUDYABROAD セブ島・留学準備
    • 語学留学

      語学留学

    • IT留学

      IT留学

    • セブ島情報

      セブ島情報

  • CAREER キャリア
    • ITキャリア

      ITキャリア

    • 転職・海外就職

      転職・海外就職

    • インタビュー

      インタビュー

  • KREDO Kredo
    • ニュース・キャンペーン情報

      ニュース・キャンペーン情報

    • CEO・STAFFブログ

      CEO・STAFFブログ

    • IT×英語留学体験談

      IT×英語留学体験談
      [Kredo公式サイトへ]

5月申し込み限定授業料半額 kredo it留学オンライン
  • TOP
  • Tech
  • Web・プログラミング
  • 【初心者向け】CSSの基本知識や使い方を詳しく解説!

【初心者向け】CSSの基本知識や使い方を詳しく解説!

Kredo編集部
Kredo編集部
公開日:2020.01.23
更新日:2020.01.23
Web・プログラミング |
  • ツイート
  • シェア
  • はてな
  • ポケット
 loading

「CSSってどんな言語?」

「CSSが使えるとどんなメリットがあるの?」

Web制作やプログラミングについて学び始めた人は、このような疑問を感じているかと思います。

実は、CSSはWeb制作に欠かせない大切な言語なのです。

しかもプログラミング初心者にもおすすめな言語なので、ぜひ勉強することをおすすめします。

この記事では、CSSの基本知識や使い方などについて、わかりやすく解説します。

この記事を読んで、CSSの基本を理解していきましょう。

記事のもくじ

  • CSSとはどんな言語?
    • CSSでできることって?
  • CSSは外部ファイルに書くのが基本!
    • styleタグに書く場合
    • インラインに書く場合
    • 外部ファイルに書く場合
  • HTMLで外部ファイルを読み込む方法
  • CSSの基本的な使い方
    • セレクタ
    • プロパティ
    • 値
  • CSSでよく使うプロパティ(文字編)
    • font-weight
    • font-family
    • text-align
    • background-color
    • color
    • line-height
    • border
  • CSSでよく使うプロパティ(画像編)
    • background-image
    • width、height
  • CSSでよく使うプロパティ(レイアウト編)
    • padding、margin
  • まとめ:CSSの基本をマスターしよう!

CSSとはどんな言語?

CSSとはCascading Style Sheets(カスケーディング・スタイル・シート)の略で、Webページをデザインするための言語です。

プログラミングにおいてはCSSと一緒にHTMLも勉強されることが多いですが、Web制作においてはHTMLとCSSは両方とも欠かせません。

HTMLはWebページの構造を作る言語ですが、CSSはHTMLによって作られた構造の見た目を整える(=スタイルを整える)役割があります。

ちなみに、厳密に言えばCSSはプログラミング言語ではなく、スタイルシート言語です。

プログラミング言語は計算などの動作処理を行うものですが、CSSはあくまでスタイルを整える言語なので、スタイルシート言語と呼ばれています。

CSSでできることって?

具体的にCSSは、文字の大きさや色の指定、枠線の追加、テキストや画像の配置などができます。

もちろんHTMLだけでもWebページの制作は可能ですが、CSSも用いることによって、よりデザイン性のあるWebページができあがるのです。

ここで、CSSのWebページ制作における重要性を感じていただくためにも、HTMLだけ使ったWebページとHTMLとCSSを使ったWebページの違いを見てみましょう。

まずは、HTMLだけを使ったWebページです。

HTMLだけだと、色や画像の配置ができないので、見栄えに限界があります。

しかし、CSSを適用したら以下のようなデザインになります。

フォントの変更、テキストの拡大、アンダーラインの設定、テキストや画像の配置が行えるので、HTMLだけのページよりも見栄えが良くなりました。

このように、Webページ制作においてはHTMLのみならずCSSも必要なのです。

HTMLとCSSを一通りマスターすれば、デザイン性の高いWebページを作れるようになります。

CSSは外部ファイルに書くのが基本!

CSSを記述する場所は、以下の3通りです。

  1. styleタグ
  2. インライン
  3. 外部ファイル

しかし基本的にCSSは、HTMLとは別の外部ファイルに記述します。

それぞれの書き方はどのように違うのか、どうして外部ファイルに書く方が基本なのかを見ていきましょう。

styleタグに書く場合

styleタグは、HTMLのheadタグの中に記述し、styleタグの中にCSSをどのように適用したいかを記述していきます。

例えば見出しのh2タグの背景色を水色にしたい場合のコードは、以下の通りです。

今回の場合「h2(見出し)タグの背景色を水色にする」というCSSのコードを書きます。

以下のように、見出しの背景色が水色になりました。

しかしstyleタグにCSSを記述する場合、該当するHTMLにその都度コードを書く必要があります。

もし「他のHTMLの見出しも水色の背景にしたい!」という場合、全てのHTMLページに、見出しの背景色を水色にするコードを書かなければなりません。

Webサイトを1ページ分だけ制作するなら、styleタグにCSSを記述する方法でも大丈夫です。

しかし複数のページがあるWebサイトを制作する場合、styleタグに記述する方法は余計な手間がかかってしまいます。

インラインに書く場合

インラインにCSSを書く場合、HTML内の該当するタグの中に直接書き込みます。

では今回はインラインに書くやり方で、見出しの文字の色を赤色にしてみましょう。

インラインにCSSを記述する場合、コードは以下の通りです。

今回の場合「h2(見出し)タグの文字色を赤色にする」というCSSのコードを書きます。

すると、Webページの見た目は以下の通りになります。

見出しの文字色が赤色に変わりました。

しかしインラインにCSSを記述する方法も、CSSを直接書いた箇所にしかCSSが適用されません。

したがって、制作したいWebサイト内に複数のページを用意する場合、インラインに書く方法は不向きです。

外部ファイルに書く場合

外部ファイルに書きたい場合、HTMLファイルとは別のファイルを用意して、そのファイルにCSSのコードを書き込みます。

そしてHTMLファイルのheadタグ内で、CSSファイルを読み込むためのコードを記述します。

上記の画像のように、linkタグを設置し、href内に該当するCSSファイルのパスを指定します。

では今回は、外部ファイルに記述する方法で、本文のテキストを紫色にしてみましょう。

変更前はこの通りですが、外部のCSSファイルに以下のコードを記述します。

すると、本文のテキスト(pタグのテキスト)が紫色に変わりました。

外部ファイルにCSSを記述する方法は「styleタグに書く方法」「インラインに書く方法」とは異なり、複数のページにCSSを同時に適用できるというメリットがあります。

Web制作では同じサイト内に複数のページを用意する場合も多いですが、その際に外部ファイルにCSSを記述する方法を使えば、効率よくWebページを制作できます。

したがって、Web制作においてはCSSを外部ファイルに記述する方法が基本的なのです。

HTMLで外部ファイルを読み込む方法

上で触れた通り、HTMLで外部ファイルを読み込む場合は、headタグ内でlinkタグを用いてCSSファイルを指定する必要があります。

linkタグでCSSファイルを指定する際は、

<link rel=”stylesheet” href=”CSSファイルのパス”>

という書き方で書きましょう。

そしてCSSファイルのパスは、相対パスと呼ばれるパスを書くのが基本です。

【相対パスとは?】

現在のファイルから、指定したいファイルまでのルートを指し示したもの。

今回の場合、HTMLファイルからCSSファイルを読み込みたいので「HTMLファイル→CSSファイル」を指し示すパスを記述しましょう。

相対パスを書く際は、以下のルールに基づいて記述します。

【相対パスのルール】

1.同じ階層のファイルを指定する場合

→「ファイル名」or「./ファイル名」

2.下の階層のファイルを指定する場合

→「./フォルダ名/ファイル名」

3.上の階層のファイルを指定する場合

→「../ファイル名」

今回は、以下の構造のフォルダ内で「index.html」というHTMLファイルから「style.css」というCSSファイルを読み込んでみます。

フォルダ┳index.html(ファイル)

┣ css(フォルダ)━style.css(ファイル)

┗ img(フォルダ)

この場合index.htmlから見て、style.cssは、同じ階層のcssフォルダ内にあります。

したがって今回は、下の階層のファイルを指定する書き方で書きましょう。

今回の場合だと、書き方は以下の通りになります。

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

相対パスは、HTMLとCSSの学習で必ず出てくる箇所なので、理解しておきましょう。

CSSの基本的な使い方

ではCSSのコーディングをする場合、どのような書き方をするのかを見ていきましょう。

CSSのコーディングでは、

  1. セレクタ
  2. プロパティ
  3. 値

この3つの部分を指定する形でコーディングします。

それぞれ3つについて見ていきましょう。

セレクタ

セレクタとは、HTMLのどの要素を変えるかを指定する際に使うものです。

例えばpタグを変えたい時はpタグを、h2タグを変えたい時はh2タグを指定します。

セレクタによる要素の指定方法は、以下の通りです。

【タグ(pやh2など)の指定方法】

指定したいタグの名前をそのまま記述します。

【全ての要素への指定方法】

*を記述します。

【特定のクラス(id)への指定方法】

特定のクラスを指定する場合「.クラス名」、特定のidを指定する場合「#id名」と書きます。

【親要素内の子要素への指定方法】

親要素名と子要素名を記述します。

要素名の間には半角スペースを入れましょう。

プロパティ

プロパティとは、指定した要素の「どの部分を変更するか」を決めるものです。

要素を変えたいと言っても、文字の色を変更するか、文字の大きさを変更するかなど、様々あります。

よく使うプロパティは記事の下の方にまとめたので、読んでみてください。

値

値とは「どのように変更するか」を決めるものです。

文字の色を変えたい場合、紫色にしたいのか赤色にしたいのか、様々ありますよね。

値についても下記で紹介していきます。

CSSでよく使うプロパティ(文字編)

ここからはCSSでよく使うプロパティを紹介します。

まずは文字に関するプロパティからです。

今回紹介するプロパティ は、

  1. font-weight
  2. font-family
  3. text-align
  4. background-color
  5. color
  6. line-height
  7. border

の7つです。

font-weight

font-weightとは、文字の太さを指定するものです。

font-weightを使う場合、値は数値か特定のワードを使って指定します。

【font-weightの値で使用するワード】
  1. normal…基本の太さ
  2. bold…太字の太さ

font-family

font-familyとは、文字のフォントを指定するプロパティです。

font-familyは、あらゆるOSに対応するためにも、複数のフォントを指定するのが基本です。

フォントを複数指定しておけば「このフォントはMacに対応していないから表示できない…」という事態を防げます。

font-familyは以下のように書きます。

また、font-familyには以下のルールがあります。

【font-familyのルール】
  1. 左のフォントほど優先順位が高い
  2. スペースがあるフォント名は「”」か「’」で囲む
  3. 英語のフォントはなるべく左に書く
  4. 総称ファミリーフォントを最後に記述する

総称ファミリーフォントとは、指定したフォントがどのOSにも入っていない時に表示させるためのフォントです。

text-align

text-alignとは、文字や画像を横方向に動かすプロパティです。

text-alignで使う主な値は、以下の通りです。

【text-alignで使う値】
  1. left…左に寄せる
  2. center…中央に寄せる
  3. right…右に寄せる

background-color

background-colorとは、背景色を指定するプロパティです。

background-colorの指定方法は、以下の通りです。

【background-colorの指定方法】
  1. カラーコード(#6桁の英数字)
  2. カラーネーム(red、blueなど)
  3. RGB(rgb(赤色の数値、緑色の数値、青色の数値))

color

colorは、文字の色を指定するプロパティです。

colorも「カラーコード」「カラーネーム」「RGB」のいずれかで指定します。

line-height

line-heightとは、行の高さを指定するプロパティで、値はpxや%で指定します。

例えばline-heightを指定しない場合は、テキストが以下のようになります。

では、line-heightを設定し、値を20pxにしてみましょう。

ご覧の通り、行間に幅が生まれました。

このように、line-heightは行間に余裕を持たせたい時に便利です。

border

borderとは、文字を囲む線を指定するプロパティです。

例えばあるテキストを赤い線で囲む場合、以下の通りになります。

borderの値は、①線の種類②線の太さ③線の色の順番で指定します。

【主な線の種類】
  1. solid…一本線
  2. double…二本線

borderに関連する他のプロパティには、アンダーラインを指定するborder-bottomなどがあります。

CSSでよく使うプロパティ(画像編)

Web制作では、画像を挿入することもよくあります。

画像も綺麗に配置できるよう、画像に関するプロパティについても知っておきましょう。

今回紹介するプロパティは以下の通りです。

【画像に関する主なプロパティ】
  1. background-image
  2. width、height

それぞれ見ていきましょう。

background-image

background-imageとは、背景の画像を指定するプロパティです。

pタグやh2タグなど、個別のタグにもbackground-imageを設定できます。

このままだと背景がオレンジですが、オレンジ色の背景の代わりにbackground-imageを指定してみます。

今回は、水色のグラデーション写真を背景にしてみます。

background-imageは「background-image:url(画像のパス);」と書くのが一般的です。

width、height

widthは、画像の横幅を、heightは画像の高さを指定するプロパティです。

widthもheightも、pxか%で指定して調整できます。

CSSでよく使うプロパティ(レイアウト編)

最後に、Webページをより見やすくレイアウトするためのプロパティを紹介します。

今回紹介するプロパティは、paddingとmarginです。

padding、margin

paddingとは要素の内側の余白を、marginは要素の外側の余白を指定するプロパティです。

paddingとmarginの違いをイラストで表すと、以下の通りです。

paddingで余白を作った場合、paddingの余白内に背景色や背景画像、paddingの境界線にborderを書けますが、marginではそれらができません。

paddingとmarginは、値の書き方が複数あります。

【paddingとmarginの値の書き方】
  1. 上下左右の値を全部同じにする場合 →padding(margin):余白の幅(pxや%);
  2. 上下左右の値を個別で設定したい場合 →padding(margin):上の余白 右の余白 下の余白 左の余白;

また、paddingの上の部分や下の部分だけ設定したい場合は、padding-topやpadding-bottomなどのプロパティで指定します。

まとめ:CSSの基本をマスターしよう!

今回はCSSの基本知識について紹介しました。

今回の記事に書かれていることをしっかりとマスターすれば、Webページの制作もできるようになります。

まずは学んだことを活かして、簡単なWebページ制作からやってみてはいかがでしょうか?

「これからの時代、プログラミングと英語が必要そう…」
それは、間違いではありません。

あと10〜20年の間に、人間が行う仕事の約半分が機械に奪われると言われています。
そのような未来がきたとき、自分自身、そしてあなたの大切な人を守れますか?

セブ島 IT×英語留学の「Kredo」では、
政府公認ITカリキュラム
大学教授レベルのフィリピン人IT教員
スピーキングに特化した英語クラス
日本人スタッフによる学習サポート
などによって、 これからの時代に必要なIT×英語のスキルが
初心者からでも最短で身につきます。

KredoのIT留学で人生を変えてみませんか?

\プログラミングと英語が同時に身につく!/
KredoのIT留学について詳しくみる

Kredo オンラインキャンプなら

新規CTA

プログラミング×英語を身につけてグローバルに活躍しませんか?

当メディアを運営しているKredoでは、プログラミング × 英語が学べる人気オンラインサービス『Kredoオンラインキャンプ』を運営中です。コロナ禍でもオンラインで、プログラミング×英語を身につけた卒業生は海外企業、外資系企業、グローバル企業への就職を果たしています。コロナ禍の今だからこそ、スキルを身につけ転職の準備をしませんか?

Kredo オンラインキャンプへ
  • ツイート
  • シェア
  • はてな
  • ポケット
この記事を書いた人
Kredo編集部
Kredo編集部

Kredo編集部です!Tech、英語学習、キャリア、セブ島留学の情報を発信していきます。

関連記事

  •  loading
    Web・プログラミング

    【IT転職成功した私が語る】progateが終わったらプログラミングスクール受講が効果的

    2022.06.08
  •  loading
    Web・プログラミング

    【2022年最新】フロントエンドエンジニアを目指せるおすすめスクール5選

    2022.05.16
  •  loading
    Web・プログラミング

    転職保証付きプログラミングスクールは危険!?口コミを元にリアルを解説

    2022.05.02
  •  loading
    Web・プログラミング

    主婦・ママが在宅で・スキマ時間でも学べるプログラミングスクール5選

kredo it 英語 留学

よく読まれている記事

  •  loading
    2022.05.25

    【6/23(木)~ 24(金)20:00 ~ 無料オンラインセミナー】プログラミング×英語を身につけろ!アフターコロナ時代を勝ち抜くキャリア戦略

  •  loading
    2022.04.19

    「好きなことを仕事に」IT初心者からプログラミング×英語を身に付けフリーランスエンジニアへ

  •  loading
    2021.07.08

    【7/4(月)~ 7/8(金)20:00 ~ 無料オンラインセミナー】プログラミング×英語習得で時代に左右されない海外フリーランスを目指す方法

  • Kredo CEO横田猛夫さん
    2019.06.26

    IT×英語を学ばなければ取り残される!Kredo CEOが日本衰退とIT業界の未来を解説

  • バックエンドエンジニアのコーディングのイメージ画像
    2019.06.05

    未経験でも習得できる実務レベルのプログラミングを学ぶコツを紹介!

IT留学オンライン
新規CTA

まずはお気軽にカウンセラーへご相談ください!

無料カウンセリングを予約する

IT×英語留学体験談

  • 10代
  • 20代
  • 30代
  • 40代~
  • 1〜4週間の短期留学
  • 5〜23週間の中期留学
  • 24週間以上の長期留学
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース

Kredo Blog

Tech 英語学習 セブ島・留学準備 キャリア Kredo
クレドページ
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金[コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
留学コース・料金[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金 [コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
セブ島IT×英語留学の「Kredo」

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

セブ島医療専門の英語学校・看護留学の「HLCA」(姉妹校)

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

スクールやコースをもっと知りたい人へ 資料請求・お問い合わせ

  • fb
  • tw
  • ig
弊社顧問弁護士

Copyright© 2019 KREDO IT ABROAD INC. All rights reserved.