\ Advertisements/

【知ってて損なし!】3分で覚えるCSSの基本の『きの字』について

ブログ
この記事は約7分で読めます。

 

わたし
わたし

CSSの基本の「きの字」を簡単に教えるよ!

 

まいどおおきに!おおもと(@so88qa)です

ワードプレスを始めたけど、テーマをイジるのにCSSをさわる必要があって『なんだか大変そう』、、、、と思ったことはないでしょうか?

  • SSをさわるのが怖いから、お金はかかるけど有料テーマを買っちゃおうかな
  • 無料テーマを使っているけど、ネットで転がっているCSSをパクるしかできないよ
  • CSSってなんぞ!?

という方は、『CSSとはなんぞや????』という根本部分をこの記事を読んで理解していただければと思っています。

 

実際、ぼくはCSSをさわり始めたのは、2ヶ月前の2018年3月中頃から
ちょうど、無料テーマの『coccon(コクーン)』が発表されたあたりですね。

 

この記事を書いた後から本格的にさわり始めたんですよね〜

ワードプレス無料テーマCocoon(コクーン)について詳しく解説
今一番波に乗っている『有料級』のワードプレス無料テーマ【Cocoon(コクーン)】について詳しく解説して行く 記事です。ぼくは、Cocoon(コクーン)を初期の頃から使ってますが、日々の進化には目を疑います。 今なら、無料ですのでぜひ記事をみてCocoon(コクーン)を使ってください。

 

ぶっちゃけ初心者ですが、「ネットの力を使わないで自分だけでイジれる」ようになります!
この記事を読んで、「ぼくと一緒にステップアップ」していきましょう!

 

注意:俺妹の盛大なネタバレを含みます。俺妹を読んでいる最中の方はこの記事を読むのを控えてください。

 

参考にしている本をみる

 

関連記事をみる

【知ってて損なし!】3分で覚えるCSSの『値の単位と色の指定』
前回の記事がかなり反響があったので、その続きを書きました! 初めてCSSをいじる人が分かりやすいように、要点のみをまとめてあるので ぜひみてくださいね!
\ Advertisements/

CSSとはWebページの見た目を制御する言語

 

わたし
わたし

CSSを使って、レイアウト・色・余白・文字の装飾などをやります。

 

CSSとは『Cascading Style Sheet(カスケーディング・スタイル・シート)』の頭文字をとったものです。

CSSはブログでよく聞く「HTML」と仲良し「HTMLがWebページの文章部分の構成する言語」でブログの主役ですが、『CSSはブログの主役を輝かせる装飾(そうしょく)や見た目を制御(制御)するための言語

HTMLだけでブログを書くと、単なるメモ帳になってしまって他人が読んでもつまらない、、、

そこで、文字に色をつけたり、マーカーを引いたりして「単なるメモ帳を人に読んでもらうための文章に昇華」させるのがCSSです。

 

\ Advertisements/

CSSの文法(どこの・なにを・どうする)

 

わたし
わたし

CSSは「どこの・なにを・どうする」の順番で書いていくよ!

 

CSSの文法は単純です。

セレクタ(どこの){ プロパティ(なにを) : 値(どうする) ; }

全てこの順番で書かれています。

 

Coccon(コクーン)のCSSを例にしますね

.post h1{color:#545454;}
(h1タグの){(文字色を):(#545454って色にするよ);}

という解釈ができます。

 

ね!簡単でしょ!

 

次は、ちょっと難しいですけど「もっと詳しく説明」していきますね

 

セレクタ(どこの)を理解しよう!

 

わたし
わたし

大まかに4種類のセレクタを覚えればOK!

 

セレクタの種類として

  1. 要素セレクタ
  2. idセレクタ
  3. classセレクタ
  4. 擬似セレクタ

の4種類があります。

CSSは「どこの・なにを・どうする」でどこの」の部分で、この部分さえ理解すればCSSは攻略したも同然です!

 

要素セレクタとは

 

わたし
わたし

HTMLを対象にして指定するセレクタです。

 

oh、、、、日本語を言ってください

 

簡単に言うと、要素セレクタは『HTML内の全ての要素に対して適用』されます

例

p{color:#ffffff;}

というCSSを書いたとします。

そしたら、< p >タグに囲まれた部分の文字の色が全て白くなります。

<p> 好きで好きでしょうがねえんだよ!俺は妹を愛しちゃてる変態なんだよ!</p >
この強烈(きょうれつ)な文章が全て白くなっていまいます。(俺妹は傑作だった)

 

idセレクタ

 

わたし
わたし

HTMLのid名を指定するセレクタです。

 

言っている意味がわからんのだが、、、、、

 

あらかじめ、適用されるHTMLを指定して『指定したHTMLの箇所だけCSSが適用』されます。

例

cssの記述

#wrapper{width:100%;}
HTML適用箇所

<div id="wrapper">
だけど!俺はここにいるぞ!エロゲーなんかに負けてたまるか!
</dev>
wrapperというid名がついた箇所「だけど!俺はここにいるぞ!エロゲーなんかに負けてたまるか!」にwidth : 100%を適用されています。

 

もし、idがwrapperでない場合は適用されません。

idセクタは1つのHTML内で1回しか指定できません。(idセクタを記述するときは、頭に#をつけてね)

 

classセクタ

 

わたし
わたし

HTMLのclass名を指定するセレクタです。

 

先ほど、説明したidセクタと似ていますがclassセクタは同じHTML内で、『同じ値を何度でもしていできます。』(classセクタを記述するときは、頭に.をつけてね)

例

cssの記述

.bigfont{font-size:30px;}
HTML適用箇所

<p class="bigfont">どこにも行くな!俺と結婚してくれえええええっ!</p>

<p>はい</p>

<p class="bigfont">ーでどうすんの?兄妹で結婚とかできるわけないし、マジでキモいんですケド?</p>
bigfontというid名がついた箇所「こにも行くな!俺と結婚してくれえええええっ!と
「ーでどうすんの?兄妹で結婚とかできるわけないし、マジでキモいんですケド?」という部分にfont-size : 30pxが適用されます。

 

擬似セクタ

 

わたし
わたし

a要素に対してよく使うセレクタです。{

 

特定の状態を示す』時に使うセレクタです。

例

a:hover{colar:#ffffff;}

マウスカーソルが重なったら、文字色が変わる良くつかうSCCですね。

この擬似セクタはよく使うので覚えておくのがよろし

 

\ Advertisements/

CSSの基本の「きの字」のまとめ

 

わたし
わたし

思ったより簡単だよね

 

注意:この記事は、俺妹を宣伝する記事ではありません。

 

今回の記事は、CSSのさわりだけをふれた記事になりました。

  • CSSの文法『セレクタ(どこの){ プロパティ(なにを) : 値(どうする) ; }』
  • 要素セレクタ
  • idセレクタ
  • classセレクタ
  • 擬似セレクタ

これだけを覚えてくれればこの記事を書いた意味があります。

これから、少しづつ知識をつけて続きをアップしていきますので、楽しみに待っていてくれよな!

 

参考にしている本をみる

 

関連記事をみる

【知ってて損なし!】3分で覚えるCSSの『値の単位と色の指定』
前回の記事がかなり反響があったので、その続きを書きました! 初めてCSSをいじる人が分かりやすいように、要点のみをまとめてあるので ぜひみてくださいね!

 

わたし
わたし

質問などがあれば、コント覧に書き込んでください!

タイトルとURLをコピーしました