初心者「が」教える CSS の書き始め方

CSS

こんにちは!みかん星人です。

前回は「CSS の始め方」について書きました。
そして今回は「 CSS の書き始め方」について現初心者超初心者目線で書いていこうと思います。
コードの紹介や解説ではなく、書き始め方について書きます。

まずは前回作った2つのファイルをメモ帳などで開きましょう。

CSSはできることが多すぎるので今回は色を変えるコードだけを使って解説をしていこうと思います。

前回書いたCSSの内容を簡単に画像で説明します。

h1

にする

そうすると

赤くなった。

いっぱい書いてみちゃう

すっごい赤い!!
もう全部赤い!!!

全部赤くなってしまった…?

否!!!

このようにh1のみ赤くなってます。

  いや h1 全部赤くされたら困るけど?  

そう、超困る。

ここで登場
class」というものと、
id 」というもの。

キチャアアアアアアアアアア!!!!fooooooooo!!!!!!
ってなってる人いると思う。知らんけど。

正直classCSSで一番使ってる。知らんけど。
使い方はこうです ↓

2つあるh1タグの上の方に
 class=”色を赤にする”
というclassを付けました。
(class名を日本語で書くのはあまりよくないのですが超初心者目線ということで日本語で書いています。プロの方々へ、ご了承)

そして

青くなっているところを…

こうします。

一番前についている「 . (半角のピリオド) 」これがないと反応しなくなるので注意

そしたら「class=”色を赤にする”」を付けたh1だけがCSSで反応するようにできます。

h2でも同じclassを付けてみるとどうなるのか

できた。

そう。このように同じclassを複数のタグに付けてイッキにCSSを変更できるようになります。超便利。めちゃめちゃ使っちゃう。もうすっごい良い。(語彙力)

次にidの使い方を解説します。

class」と書いていたところを「id」に書き換えます。

そして「 . 」と書いていたところを「#(半角のシャープ)」に書き換えます。

同じ…

このように使いようとはほぼ一緒です。
はじめのうちはid使わなくていいと思います。なんかごちゃごちゃしてきちゃうので。

そんな感じでCSSの書き始め方はこれで終わりです!


なんかあんまり説明が上手くできませんでした。すみません
次回予告して終わります!

次回!jQueryの始め方!!

  は?なんだよそれ  

聴きなじみがという方多いと思いますがすっごい使います。
なにができるのかというと…

この文字をクリックしてみてください

もう一度クリックすると黒に戻ります。

ざっくり説明しますとこんなことができます。
そしてもっといろいろできます。

そんなのが jQuery です。

どう書こうかな~…

コメント

  1. pgslot より:

    I do not even know how I ended up here, but I thought this
    post was good. I do not know who you are but certainly you’re
    going to a famous blogger if you aren’t already
    😉 Cheers!

  2. I’m impressed, I must say. Rarely do I come across a blog that’s both equally educative and interesting,
    and without a doubt, you’ve hit the nail on the head. The issue is something
    that too few men and women are speaking intelligently about.
    I’m very happy I came across this in my search for something regarding this.

  3. Can I simply just say what a comfort to uncover an individual who truly knows
    what they’re discussing on the internet. You actually understand
    how to bring a problem to light and make it important.

    More and more people have to look at this and understand this side
    of your story. It’s surprising you are not more popular because you definitely have the gift.

  4. Right here is the right web site for everyone who wishes to understand this topic.
    You understand a whole lot its almost tough to argue with you (not that I really would want to…HaHa).
    You definitely put a brand new spin on a subject that’s been discussed for years.
    Excellent stuff, just excellent!

  5. Jeanne より:

    I couldn’t resist commenting. Exceptionally well written!

  6. relx より:

    Have you ever thought about creating an ebook or guest authoring
    on other websites? I have a blog based on the same ideas you discuss and would love to have you share some stories/information. I know my viewers would appreciate your work.

    If you’re even remotely interested, feel free to send me an e-mail.

  7. First of all I would like to say terrific blog! I had a quick question that I’d like to ask if you don’t mind.
    I was curious to find out how you center yourself and clear
    your thoughts prior to writing. I’ve had a difficult time clearing my thoughts in getting my thoughts out there.

    I truly do enjoy writing but it just seems like the first 10
    to 15 minutes tend to be lost just trying to figure out how to
    begin. Any ideas or tips? Kudos!

  8. I seriously love your website.. Very nice colors & theme.
    Did you develop this website yourself? Please reply back as I’m
    trying to create my very own website and would
    like to learn where you got this from or exactly what
    the theme is named. Thank you!

  9. taxi near me より:

    Right now it sounds like BlogEngine is the preferred blogging platform out there right now.
    (from what I’ve read) Is that what you are using on your
    blog?

  10. Excellent post. I used to be checking constantly this
    blog and I am impressed! Extremely helpful info specially
    the ultimate section 🙂 I deal with such information much.
    I was looking for this particular info for a long time.

    Thanks and best of luck.

トップへ戻る
タイトルとURLをコピーしました