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で縦に中央寄せする方法はこちらです。

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

no image

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

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

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

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

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

no image

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

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

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

cssで画像を丸くする方法「15秒以内にできます」

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

no image

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

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

no image

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

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

no image

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

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

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

最新記事

チャーさん

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

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

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