css cssの書き方

cssの書き方class編(初学者向け)

投稿日:2019年12月2日 更新日:

Pocket

うも、チャーさんです。

この記事では、cssの書き方を書いています。

 

具体的にはclass、classを複数使う方法、

idについてとcss書き方についての内容なので、

この記事を読めばcssの書き方がわかるでしょう。

 

という事で、あなたがcssの書き方を

調べているならばこのまま下にスクロールし、

読んでみてください。

 

スポンサードサーチ

cssの書き方class編

 

まずclassとは?というとこから説明すると

classとは、htmlタグにつける独自の名前です。

 

これをつける理由は、個別の要素に、

デザインをほどこすためです。

 

 

例えば、

<p class=”text”></p>

などのようにhtmlタグにclass=と続けて、

独自に名前をつけれまして、

 

このtextというclass名

(classとしてつけた単語をclass名という)

がついた場所だけデザインをするということができるのです。

 

cssの書き方class編

 

textというクラス名をつけた部分だけ

赤文字になってますように、

classを使うと部分的に簡単にデザインを変更できます。

 

 

なので、要はclassとはあなたがデザインしたい部分に、

(デザインつけたいhtmlタグの場所に)名前をつけて、

その部分だけデザインを施すみたいなもの、

 

だと思ってください。

 

classの書き方

 

そしてclassの書き方ですが、

簡単でして、まずは、

デザインを変えたい要素(例 divタグとか)に

 

class名をつけましょう。

名前は半角英数字で_アンダーバー

-ハイフンなども使えます。

 

 

ちなみにclass名はわかりやすいものに

するのを推奨します。

 

*あとでclass名を見てもなんのデザインにしたか

わからなくなるので。

 

 

そして、class名をつけたあとは、

style.cssに .class名のように、

ドットの後につけたclass名を書きましょう。

 

例 <div class=”box”></div>

.box {

ここにcssかく

}

 

するとboxというclass名が書いてある

タグにだけ書いたcssが適用されます。

 

 

スポンサードサーチ

cssの書き方classを複数つける

 

でこのclassですが1つだけでなく

もちろん複数つけれます。

 

違うclass名を複数つける場合

 

例えば、

<div class=”box blue”></div>

のようにclass名の後に半角スペースを開けて

別のclass名をつけれます。

 

(上記は今boxとblueと2つのclass名がついてる

状態です。)

 

 

この場合、このbox とblueの両方の

class名に対しcssを書けば、両方のデザインが

適用されます。

 

.box { 

width:100px;

height:100px;

}

.blue {

background:blue;

}

 

上記のように書けば複数のclassのcssが

<div class=”box blue”></div>に適用され、

青い正方形ができます。

 

 

同じclass名を複数回使う場合

 

またclassの特徴として、

同じclassを何回でも違う場所に使えます。

 

例えば、

<p class=”text”>テキスト1</p>

<p class=”text”>テキスト2</p>

<p class=”text”>テキスト3</p>

 

 

というようなことができまして、

こうしておけば、

 

.text{

color:red;

}

などとすると一括してデザインを

変更することが可能です。

 

 

実際にwebページのデザインをする際に

非常にはかどるので、よく使うことになるでしょう。

 

 

スポンサードサーチ

cssの書き方classの次はidについて

 

classに関連してidというのがあります。

こちらもclass同様にデザインをつけたい部分に、

名前をつけてデザインをするという使い方です。

 

書き方も、classと似てまして

<p id=”text”></p>のようにid=に続けて

書きます。

 

 

ですが1つclassとは違いがありまして、

idは一度書いたら他の場所には使えません。

 

例えば、

 

<p id=”text”></p>

<p id=”text”></p>

とはできないのです。

 

 

idは一度きりでして、

上記のように複数の箇所に登場させることが

できないのです。

 

なので、一度しか使わない場所

にidを使いましょう。

 

スポンサードサーチ

まとめ

 

という事でcssの書き方class編でした。

classはcssを使ったデザインで絶対使うので、

マスターしましょう。

 

またcssには今回紹介したclass以外にも

色々知っておいた方が良いものがあります。

 

それは、cssの書き方をまとめました「よく使う内容を網羅」

に書いてるのでcssを上達したい場合読みましょう。

 

それでは、読んでもらってありがとうございました。

 

チャーさん

 

 

-css, cssの書き方


スポンサードサーチ

関連記事

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

cssで書いたボタンをhover時にへこむようにする方法です。

どうも、チャーさんです。   あなたはcssを使って作ったボタンを、 hover(マウスをボタンの上に持って来ること) 時にへこむようにしたいですか?   この記事を読めば、あなた …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

どうも、チャーさんです。 あなたはcssで見出しに画像を表示させたい。 そう思っていませんか?   この記事では、cssで見出しに画像を 表示させる方法を書いてます。   なのであ …

no image

cssの書き方cssはまとめて書いて楽をしましょう。

どうも、チャーさんです。   この記事ではcssの書き方の1つ まとめて書くについてお話ししてます。   なのであなたがこの記事を読めば、 今までより、「より早く、より効率的に、よ …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。