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の書き方これらのセレクタを知ってればほぼ困りません

投稿日:

Pocket

うも、チャーさんです。

 

あなたはcssの書き方でセレクタに

ついて色々な書きかたがあってよくわかってない、

と感じていませんか?

 

この記事では様々なセレクタの指定方法を

書いています。

 

 

どれもこれも割とページ制作をする上で、

使用頻度が高いものばかり書いといたので、

web制作やるぞとか、

 

cssのセレクタわからん、という人は

下にスクロールしてお読みください。

 

という事でセレクタの書き方を列挙します

 

 

スポンサードサーチ

タグ

 

まずは、タグです。

タグとはよくhtmlで書いてるh1とかでして、

例えば、

 

h1 {

font-size:30px;

}

 

のように、セレクタのとこにタグを書けば、

指定したタグ全部に対してcss指定できます。

 

 

<body>

<h1></h1>

<h1></h1>

<h1></h1>

</body>

 

この場合、h1タグで囲われてる内容全てに、

cssが適用されます。

 

なので、全部に適用したい初期設定

みたいな感じでcss書くときには便利です。

 

 

ですが、全部にcssがかかるので、一部分

違うcssにしたいときにはcssが反映されて

しまうので不便です。

 

スポンサードサーチ

タグ.クラス名

 

ちなみに指定したクラス名が

ついてるタグだけを指定することもできます。

 

例えば、

h1.test {

font-size:30px;

}

<body>
<h1>1番目<h1>
<h1 class=”test”>2番目</h1>
<p class=”test”>3番目</h1>
</body>

 

 

みたいに書くと、h1でかつtestという

クラスがついてる2番目というテキストが

書いてある要素にだけcssが適用されます。

 

こういうのを詳細度をあげるというのですが、

同一タグの中でも、このクラスがついてるタグのみ

指定という事ができます。

 

たまに使い道があるので覚えておくと便利です。

 

 

スポンサードサーチ

クラス

 

で同じみのクラスです。

タグに名前をつけて指定した名前が

ついてる要素にのみcssを適用できます。

 

例えば、

.test {

font-size:30px;

}

<body>
<h1>1番目<h1>
<h1 class=”test”>2番目</h1>
<p class=”test”>3番目</h1>
</body>

 

と書いたとすると、2番目と3番目の

テキストがある要素にcssが適用されます。

 

なのでcss書いとけば、

あとはそのクラスをタグに書くだけで

いくらでもcssを適用可能です。

 

便利なので覚えときましょう。

 

スポンサードサーチ

id

 

idはクラスに似てまして、

名前をつけるのは同じですが、

一度しか使えません。

 

書き方的には、

 

#test {

font-size:30px;

}

<body>
<h1>1番目<h1>
<h1 id=”test”>2番目</h1>
</body>

 

のような感じで、cssの方には、

ハッシュをつけます。

 

タグにはidと書く感じです。

 

スポンサードサーチ

要素名 要素名

 

のように書くと、

要素の下にある要素全てに

cssが適用可能です。

 

ちなみにこの要素にはクラス名またはタグ、idが

入ると思ってください。

 

 

例ですが、

.box h2 {

 color:red;

}

<div class=”box”>

<h2>1番目<h1>
<h2 id=”test”>2番目</h1>
<p>テキスト</p>

</div>

 

みたいに書くと、

boxというクラスがついたタグの

中にあるh2全てにcssが適用されます。

 

なので、ある要素の指定した子要素

全てに、cssを指定したいなんてときに便利です。

 

大なり

 

大なり>(不等号を)使って

指定することもできまして、

これは階層を降りていって指定する事ができます。

 

詳しくは1記事書いてるので

そちらをどうぞ。

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

 

 

スポンサードサーチ

カンマ

 

カンマを使うと、複数指定する事ができます。

例えば、

 

h1, p {
color:red;

}

みたいにするとh1やpタグ全てが

赤色になります。

 

 

要は複数選択できるという事です。

カンマについても記事書いてるので、

詳しくはそちらどうぞ。

 

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

 

 

とまぁ、色々セレクタの書き方を

書いてきました。

 

セレクタには他にも色々ありますが、

 

とりあえず上記に述べたようなセレクタの書き方を

知っていれば、とりあえずはcss書く上で

困ることはまぁないでしょう。

 

 

という事でセレクタに関しては

以上ですが、

 

ところでcssの書き方に関する記事を読んでる

あなたはcssの書き方に関してもっと色々

疑問がありますか?

 

もしcssの書き方に関して網羅的に

知りたいという場合は、

cssの書き方に関する事をまとめた記事もあるので、

 

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

 

こちらも目を通してみてください。

 

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

 

チャーさん

 

 

-css, cssの書き方


スポンサードサーチ

関連記事

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

cssでテーブルの行間を広げる方法

  あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …

no image

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

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

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

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

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

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

最新記事

チャーさん

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

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

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