今回はHTMLの基礎①のCSS版です。
■CSSとは?
HTML編でも少々触れたのですが、HTMLを整えるための言語です。
こちらもHTMLと変わらずかなり簡単なのでさっさと覚えてしまいましょう。
■CSSの記述方法
HTMLではタグ<>というものを使いましたが、CSSは異なります。
基本的には以下のとおりです。
この形をまず覚えましょう。
■セレクタの種類、解説
まず、セレクタとは?
セレクタとは簡単に言えば名前ですね。
HTMLとCSSは基本的に組み合わせて使うのでまずはHTMLで名前をつけてあげます。
<div class="name"></div>
これでまず、nameという名前をつけてあげることができました。
ちなみにdivはHTMLの方で解説しますが、万能タグなので絶対覚えておきましょう。
HTMLのタグで出てきたclassというもじがあります。
セレクタにも種類があり大まかに3つ。
・classセレクタ
・idセレクタ
・子孫セレクタ
になります。
子孫セレクタは今回は紹介しません。
■classセレクタとは?
classセレクタは大きい括りになります。
このセレクタは1ページ中に何度でも使うことができます。
こんなのを読むよりも実践したほうが早いので実践編で詳しくやります。
今回は紹介程度で。
わかりやすいように例えを作ってみましょうか。
わかるように自分のブログで説明するのでPC表示でお願いします。
※topページの表示を参考にしてください。
まずtopページで見ると記事タイトルは5つありますね。
サイドバーのタイトル部分は6個
タグは記事数と同じ5個です。
わかりにくいところはコメントで指摘お願いします。
これらのHTMLをCSSでいじってみます。
まぁ、大まかにこんな感じになります。
記述前に/* */というのを入れていますがこちらはコメントになります。
自分がわかりやすいようにコメントを入れるときに
/* */の間に入れるとCSSに反映されなくコメントを残すことができます。
覚えておきましょう。
もう一度書いておきますが
セレクタ{プロパティ:値}
これが基本の形になります。
■プロパティとは
自分が変えたいところをプロパティといいます。
例えば文字サイズを変えたいときは
font-sizeと記述。
他にも色々あるので使う頻度が高いやつを何個か残しておきます。
簡単なものだらけなので覚えておきましょう。
■値について
値については大体px(ピクセル)という大きさの値や
left,right,top,bottomなどの左、右、上、下などの位置指定、
black,orang,blue,などの色指定
※色指定にはカラーコードも使えます。
カラーコード表はこちらから
様々な値が使えますが、結構自由なところが多いので好きなように使ってみましょう。
pxは感覚で覚えてもいいですし、cmなどの単位も使うことができます。
◇まとめ◇
idセレクタというものも紹介したかったのですが、予想より記事が長引いいてしまったので
また後日まとめて紹介したいと思います。
文字ばかりで読みづらい記事になってしまいましたね^^;
次はちゃんと図を使い説明などもしたいですね。
長々読んでいただきありがとうございました。
↓バナークリックで応援お願いします!↓
HTML編でも少々触れたのですが、HTMLを整えるための言語です。
こちらもHTMLと変わらずかなり簡単なのでさっさと覚えてしまいましょう。
■CSSの記述方法
HTMLではタグ<>というものを使いましたが、CSSは異なります。
基本的には以下のとおりです。
セレクタ{プロパティ:値}となります。
この形をまず覚えましょう。
■セレクタの種類、解説
まず、セレクタとは?
セレクタとは簡単に言えば名前ですね。
HTMLとCSSは基本的に組み合わせて使うのでまずはHTMLで名前をつけてあげます。
<div class="name"></div>
これでまず、nameという名前をつけてあげることができました。
ちなみにdivはHTMLの方で解説しますが、万能タグなので絶対覚えておきましょう。
HTMLのタグで出てきたclassというもじがあります。
セレクタにも種類があり大まかに3つ。
・classセレクタ
・idセレクタ
・子孫セレクタ
になります。
子孫セレクタは今回は紹介しません。
■classセレクタとは?
classセレクタは大きい括りになります。
このセレクタは1ページ中に何度でも使うことができます。
こんなのを読むよりも実践したほうが早いので実践編で詳しくやります。
今回は紹介程度で。
わかりやすいように例えを作ってみましょうか。
わかるように自分のブログで説明するのでPC表示でお願いします。
【例】これらを例に取りましょう。
『HTML』
<div class="title">記事タイトル部分</div>
<div class="said">サイドバーのタイトル部分</div>
<div class="tag">記事下のタグ</div>
※topページの表示を参考にしてください。
まずtopページで見ると記事タイトルは5つありますね。
サイドバーのタイトル部分は6個
タグは記事数と同じ5個です。
わかりにくいところはコメントで指摘お願いします。
これらのHTMLをCSSでいじってみます。
『CSS』
/*タイトルの色を黒に*/
.title {
color:black;
}
/*サイドバー記事タイトルの文字サイズを10pxに*/
.said {
font-size:10px;
}
/*タグ部分の文字を太字に*/
.tag {
font-wight:bold;
}
まぁ、大まかにこんな感じになります。
記述前に/* */というのを入れていますがこちらはコメントになります。
自分がわかりやすいようにコメントを入れるときに
/* */の間に入れるとCSSに反映されなくコメントを残すことができます。
覚えておきましょう。
もう一度書いておきますが
セレクタ{プロパティ:値}
これが基本の形になります。
■プロパティとは
自分が変えたいところをプロパティといいます。
例えば文字サイズを変えたいときは
font-sizeと記述。
他にも色々あるので使う頻度が高いやつを何個か残しておきます。
color /色上記のものがかなりの頻度というかほぼ必ず使われます。
background-color /背景色
font-size /文字の大きさ
font-wight /文字の太さ
text-align /文字の配置位置
margin /位置(文字に限らず色々なものを動かせます)
簡単なものだらけなので覚えておきましょう。
■値について
値については大体px(ピクセル)という大きさの値や
left,right,top,bottomなどの左、右、上、下などの位置指定、
black,orang,blue,などの色指定
※色指定にはカラーコードも使えます。
カラーコード表はこちらから
様々な値が使えますが、結構自由なところが多いので好きなように使ってみましょう。
pxは感覚で覚えてもいいですし、cmなどの単位も使うことができます。
◇まとめ◇
idセレクタというものも紹介したかったのですが、予想より記事が長引いいてしまったので
また後日まとめて紹介したいと思います。
文字ばかりで読みづらい記事になってしまいましたね^^;
次はちゃんと図を使い説明などもしたいですね。
長々読んでいただきありがとうございました。
↓バナークリックで応援お願いします!↓
コメント