初心者「が」教える 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. discuss より:

    I was suggested this website by my cousin. I’m not sure whether this post is written by him
    as no one else know such detailed about my difficulty. You are amazing!

    Thanks!

  2. free photo より:

    Pretty! This has been a really wonderful post. Thanks for supplying this information.

  3. best sofa より:

    What i do not understood is in truth how you are no longer actually much more neatly-liked than you might be
    right now. You’re very intelligent. You recognize thus considerably on the subject of this
    subject, made me individually imagine it from so many varied angles.
    Its like men and women aren’t involved except it is one thing to accomplish with Lady gaga!
    Your own stuffs outstanding. At all times maintain it up!

  4. I like reading through an article that can make men and women think.

    Also, thank you for permitting me to comment!

  5. poker より:

    Hello there! I could have sworn I’ve been to this web site before but after going through many of the posts I realized it’s new to
    me. Nonetheless, I’m certainly pleased I discovered it and I’ll be bookmarking it
    and checking back frequently!

  6. Just wish to say your article is as amazing. The clearness for your submit is simply
    cool and that i can assume you’re an expert in this subject.

    Well with your permission allow me to clutch your RSS
    feed to stay updated with impending post. Thanks one million and please carry on the gratifying work.

  7. Excellent blog! Do you have any recommendations for aspiring writers?
    I’m hoping to start my own site soon but I’m a little
    lost on everything. Would you propose starting with a free
    platform like WordPress or go for a paid option? There are so many options
    out there that I’m totally confused .. Any tips?
    Bless you!

  8. click here now より:

    Hey I know this is off topic but I was wondering if you knew of any
    widgets I could add to my blog that automatically tweet my newest twitter updates.

    I’ve been looking for a plug-in like this for quite some
    time and was hoping maybe you would have some experience
    with something like this. Please let me know if you run into anything.
    I truly enjoy reading your blog and I look forward to your new updates.

  9. My brother recommended I might like this web site. He was totally right.
    This post truly made my day. You cann’t imagine simply how
    much time I had spent for this information! Thanks!

  10. Just desire to say your article is as astonishing. The clearness in your post
    is just cool and i could think you’re a professional in this subject.
    Fine together with your permission let me to
    snatch your RSS feed to keep up to date with coming near near post.
    Thank you 1,000,000 and please keep up the gratifying work.

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