初心者「が」教える 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. After exploring a number of the blog articles on your site, I truly appreciate your
    way of blogging. I added it to my bookmark webpage list and will
    be checking back soon. Please check out my website as well and tell me how you feel.

  2. Thanks for sharing your thoughts. I truly appreciate
    your efforts and I will be waiting for your further write ups
    thank you once again.

  3. This is a topic that is near to my heart… Best wishes! Exactly
    where are your contact details though?

  4. When someone writes an piece of writing he/she retains the image of a user in his/her brain that how a user
    can know it. Therefore that’s why this post is amazing.
    Thanks!

  5. bundle trips より:

    My brother suggested I would possibly like this blog. He used to be entirely right.

    This publish actually made my day. You cann’t imagine simply how
    much time I had spent for this info! Thank you!

  6. @Brayden Jessen Wow, fast answer, thank you

  7. Hello very cool web site!! Man .. Beautiful .. Superb ..
    I’ll bookmark your blog and take the feeds additionally?
    I’m glad to find numerous helpful info right here within the
    put up, we’d like develop more techniques in this
    regard, thank you for sharing. . . . . .

  8. You really make it appear so easy together with your presentation but I to find this matter to be actually
    something that I believe I’d never understand.
    It kind of feels too complex and extremely extensive for me.
    I’m looking ahead for your subsequent put up, I will attempt to get the grasp of it!

  9. ide bisnis より:

    Thanks for the kind words Alirza!

  10. Does your website have a contact page? I’m having problems locating it but, I’d like to send you an email.
    I’ve got some ideas for your blog you might be interested
    in hearing. Either way, great website and I look forward to seeing it grow over time.

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