Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

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

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

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

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

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

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

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

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

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

最新記事

チャーさん

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

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

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