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

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

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

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

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

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

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

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

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

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

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

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

no image

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

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

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

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

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

no image

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

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

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

ワードプレスでCSSを使い丸を表示する方法

どうもチャーさんです。 あなたはワードプレスで丸を表示したいと 思ったことはありませんか。   この記事では丸の作りかたを解説してるので ワードプレスなどで丸を表示したい人はどうぞ。 &nb …

最新記事

チャーさん

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

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

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