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の書き方cssはまとめて書いて楽をしましょう。

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

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

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

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

no image

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

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

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

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

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

no image

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

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

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

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

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

最新記事

チャーさん

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

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

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