図解で簡単!CSSの書き方4つが初心者でも5分で理解できる!

web開発

2017/06/26

web開発

CSSの書き方について、HTML/CSS初心者向けに丁寧に解説します。

Web開発経験のある筆者が、わかりやすいコードを使いながらCSSの書き方に解説しているので、安心してご覧ください。

CSSの書き方は主に4つあります。その4つについて順番に解説していきます。

本記事を読み終える頃には、HTML/CSS初心者でもCSSの書き方が理解できているでしょう!

5分程度で読める内容ですので、ぜひ最後まで読んで、CSSの書き方を理解してください!

※CSSの基本を理解したい人は、CSSについて詳しく解説した記事をご覧ください。

 

CSSの書き方その1(基本)

まずはCSSの書き方1つ目(セレクタに対してCSSを適応する方法)です。

HTMLでは、「タグ」という概念がありましたね。

※「タグ」とは何かを忘れてしまった人は、HTMLについて詳しく解説した記事をご覧ください。

例えば、HTMLファイルに以下のようなコードが書かれているとします。

【HTMLファイル】

では、以上の「Hello HTML」という文字の色を赤に、「Hello CSS」という文字を青にしてみます。

今回は<h1>を赤に、<p>を青にしたいので、以下のようにCSSを記述します。

【CSSファイル】

【表示結果】

Hello HTML

Hello CSS

これで、【表示結果】ように、文字に色が付きます。

ちなみに、CSSファイルで指定するHTMLのタグを「セレクタ」、どんな内容のデザインを施すのかを示すのが「プロパティ」、そのプロパティをどうするのかを指定するのが「値」です。

CSS 書き方の解説画像

以上のように、HTMLのタグを指定してCSSを記述するのがCSSの書き方の1つ目です。

 

CSSの書き方その2(style属性を使う方法)

CSSの書き方の2つ目は、HTMLファイルで、「style属性」を使用する方法です。

先ほどはHTMLファイルにはHTMLを、CSSファイルにはCSSを記述していましたね。

HTMLファイルで「style属性」というのを使えば、CSSファイルを使わずにCSSを適応することができます。

※「style属性」を詳しく学習したい人は、style属性について詳しく解説した記事をご覧ください。

では、例を見てみます。

【HTMLファイル】

【表示結果】

こんばんは

「style属性」を使えば、CSSファイルを使わずにCSSが書けます。

「style=””」の「””」内に、先ほどと同様にCSSのプロパティと値を書きます。簡単ですよね?

しかし、一般的にはHTMLファイルとCSSファイルを用意して、HTMLはHTMLファイルに、CSSはCSSファイルに書くのが好ましいです。

 

CSSの書き方その3(classを指定する方法)

CSSの書き方3つ目は、HTMLのタグに「class」を指定する方法です。

※「class」を詳しく学習したい人は、classについて解説した記事をご覧ください。

では、例を見てみます。

【HTMLファイル】

【CSSファイル】

【表示結果】

udemyで学習しよう!

classはHTMLのタグに付ける名前のようなものです。今回は<p>タグに対して「sample」というclass名(名前)を付けたのです。

そして、CSSファイルで、「sampleという名前」に対してプロパティと値を指定しています。

classを使用した場合、CSSファイルではclassの前に「.(ドット)」を付けることを忘れないようにしてください。

次の章では、「class」に似たものである「id」を使ったCSSの書き方を解説していきます。

 

CSSの書き方その4(idを指定する方法)

最後に紹介するのは「id」です。

「id」は先ほど学習した「class」と似ているので注意が必要です。

では、例を見てみましょう。

【HTMLファイル】

【CSSファイル】

【表示結果】

CSSを学ぼう!

「id」も「class」と同様にHTMLのタグに付ける名前のようなものです。

今回は<p>タグに対して「demo」という名前(id)を付けました。

ただし、CSSを記述するときは、classとは違いid名(名前)の前に「#(シャープ)」が付くことに注意しましょう。

※classのidの違いが知りたい人は、classについて解説した記事の「HTML div classとdiv idの違い」の章をご覧ください。

 

いかがでしたか?

CSSの書き方が理解できましたか?今回は4つのCSSの書き方を紹介しました。

中でも1番よく使われるのは「class」と「id」を使ってCSSを書く方法なので、ぜひ覚えておきましょう!

udemyでは、CSS初心者にも優しい動画講座を用意しています。

初心者でもぜひ受講して、CSSをマスターしてください!

目的別!最先端ITスキル講座

海外の人気講師によるWeb制作のベストセラ―講座

【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)
【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)

ウェブデザインの基礎、サーバーサイドプログラミング、モバイルアプリ開発、APIプログラミングなどを網羅的にマスターできる

最新!iOS11アプリ開発講座

【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC
【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC

地図検索、ARなど20個以上のアプリを作って学べる実践講座

日本を代表するデータサイエンティスト辻真吾氏による人気講座

【世界で5万人が受講】実践 Python データサイエンス
【世界で5万人が受講】実践 Python データサイエンス

データ解析の基本、可視化、統計、機械学習などデータサイエンスに関するあらゆる実践的なスキルがPythonで身に付く!

初級者から学べる人工知能講座の決定版

みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習
みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習

初心者向けの人工知能と機械学習のコース。文字認識や株価分析なども実施

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事