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で文章を省略する方法。コピペでok

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

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

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

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

no image

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

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

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

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

no image

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

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

最新記事

チャーさん

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

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

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