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の書き方


スポンサードサーチ

関連記事

cssの効率的な学習方法を知りたいなら読んでください。

  あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

どうも、チャーさんです。 この記事では、cssの書き方を書いています。   具体的にはclass、classを複数使う方法、 idについてとcss書き方についての内容なので、 この記事を読め …

no image

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

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

最新記事

チャーさん

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

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

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