初心者による初心者へのCSS講座

プログラミング

こんにちはっ!しおりです~(`・ω・´)ゞ

今回は、CSSをやっていこと思います!

スポンサーリンク

CSSとは

CSSとは、色・大きさ・配置などを指定して

ページのデザインをするための言語です!

HTMLだけだと、ただの文字と画像の羅列になってしまうのです。

【例】

Shiori*Blogへようこそ♡

自己紹介

Twitter

Shiori あだ名はしおりん

1992年7月7日産まれ。神奈川県出身

好きなもの

  • アニメ
  • ミステリ
  • 洋服

画像デカッッ( ゚Д゚)

という感じになってしまうのですが

CSSを使うとこのただ並べただけのものに色がついたり

画像の大きさを変更して見やすくすることができるのです☆彡

Shiori*Blogへようこそ♡

自己紹介

Shiori あだ名はしおりん

1992年7月7日産まれ。神奈川県出身

好きなもの

  • アニメ
  • ミステリ
  • 洋服
Twitter

こんな感じで文字に色がついたり

文字の背景・大きさなどの変更がされます!


HTMLとCSSのコードは違うファイルに入力していきます!

ワードプレスでは、カスタムCSSに入力します。


HTMLで用意した要素に対してCCSを用いて

「どこの」「何を」「どうする」

というのを指定できるのです(`・ω・´)ゞ

HTML

<hi>好きなもの</h1>

CSS

h1 { ←どこの(h1の要素)

color:red;
何を どうする
(色を) (redにする)

結 果

好きなもの

という風になるのです。


【h1の要素】の【color(色)】を【red(赤)】にしている。

この時の対象(要素名)をセレクタ、変更項目をプロパティと言います。

*CSSを書くときの注意点

CSSを書くときは、インデント(文字下げ)をします!

プロパティの末尾には、コロン(:)を付けて

行末には、セミコロン(;)を付けます!


h1 { ←ここで改行
 color: #22FFFF;  ←末尾にコロン(:) 行末にセミコロン(:)
↑スペース

]

*文字の色を変える

HTML

<h1>最近のお気に入りのアニメ</h1>
<p>境界の彼方!!6話のダンスシーンは神回です(*´ω`)</p>

CSS

h1 {
color:#FF6699;   ←16進数のカラーコードで色の指定をしていきます
}            カラーコードは覚えなくてOKです!
            主な色であれば”red”などの指定でOK☆


p {
color: #FFBEDA
}

ちなみに、#ddddddのように同じ値が続く場合は#dddと省略可能です◎

結 果

最近のお気に入りのアニメ

境界の彼方!!6話のダンスシーンは神回です(*´ω`)




わたしは、ここからカラーコードをコピーして使っています☆

カラーコード

*CSSのコメント

HTMLと同じくCSSでもファイルにコメントを記述することができます!

CSSの場合は、

/* */

これで囲んだ行がコメントになります!

アニメが好き♡

*文字の大きさを変える

文字の大きさを変えるには、

font-sizeプロパティを用います!

fonto-sizeはpx(ピクセル)という単位を用いて指定します!

HTML

<h1>Shioriです!!</h1>

<p>ミステリが大好きです!!<p>

CSS

h1 {
color:#FF99FF;
font-size:10px;
}

p {
color:#FF5192;
font-size:40px;
}

結 果

Shioriです!!

ミステリが大好きです!!

*文字の種類を変える

フォントの種類を指定するには、

font-familyプロパティを用います!

『font-family:フォント名;』

とすることで、要素にそのフォントが適用されます!

※フォント名にスペースがある場合はダブルクォーテーション(“)で囲む。

HTML

<h1>Shiori*Blog</h1>

<p>Shiori*Blog</p>

CSS

h1 {    ダブルクォーテーション
font-family:Monotype Corsiva;
}            ↑間にスペース

p {
font-family:fantasy;
}

結 果

Shiori*Blog

Shiori*Blog

フォント名一覧

*背景色を変える

背景色を変えるには、background-colorプロパティを用います。

色の指定は、colorプロパティと同じです。

HTML

<h1>Shioriです!</h1>

<p>七夕産まれです!</p>

CSS

h1 {
background-color: #FF69B4;
}

p {
background-color:#FFC0CB;
}

結 果

Shioriです!

七夕産まれです!

*横幅・高さを変える

要素の横幅・高さを変えたいときは、

width(横幅)プロパティ height(高さ)プロパティ

これから用います!

width・height共に、pxで指定していきます!

HTML

<h1>べーさん</h1>

<img src=”https://lh4.googleusercontent.com/s65LD4xSjzk4h43Kf-0-Fz87PVnHcfhj9mp_zeFGct2SvpuPeIBjqSCOuncz-4aAmhobH2tvVqjUssx80d_2n-nb141ePoGY36TlsOoX1ZCtROpjHBM=w472″>

CSS

h1 {
width:300px;
heigth:40px:
background-color:#FFABCE;
}

img {
width:300px;
height:200px;
}

結 果

べーさん

*特定の要素にCSSを適用

例えば

<li>要素が複数ある場合

HTML

<ul>
 <li>名探偵コナン</li>
 <li>金田一少年の事件簿</li>
 <li>探偵学園Q</li>
</ul>

CSS

li { color: #FF0461;
}

結 果

  • 名探偵コナン
  • 金田一少年の事件簿
  • 探偵学園Q

こんな風にリストの部分をまとめて同じ色に変更できます!

*タグに名前を付ける

それぞれの要素を識別させるためにclassを使ってタグに名前を付けます。

classとは

HTMLタグに付けるグループ分けの目印です!

classを付けるときのルール

★使える文字
・半角の英数字 ・ハイフン(-) ・アンダーバー(_)

★命名のルール
・頭文字はアルファベット ・アルファベットは大・小で区別される

classを付けるときの注意点

CSSで指定する際に先頭に、ドット(.)が必要

HTML

<ul>
 <li class=”xyz>名探偵コナン</li> ←ダブルクォーテーションを付ける
 <li>金田一少年の事件簿</li>
 <li>探偵学園Q</li>
</ul>

CSS

.xyz {
color:#FF66FF;
}

結 果

  • 名探偵コナン
  • 金田一少年の事件簿
  • 探偵学園Q

classを付けた要素だけ違う色に変わります!

*複数に同じCSSを適用

複数の要素に同じCSSを適用させるには同じclassを付けます!

HTML

<ul>
<li class=”akb>名探偵コナン</li>
<li class=”akb>金田一少年の事件簿</li>
<li>探偵学園Q</li>
</ul>

CSS

.akb {
color:#FF33FF;
}

結 果

  • 名探偵コナン
  • 金田一少年の事件簿
  • 探偵学園Q

同じclassのふたつが適用されました☆

*最後に注意点など

CSSが反映されないΣ(゚д゚lll)ガーン

っていうときは、スペルミスがないか

ドット(.)、ダブルクォーテーション(“)などのつけ忘れはないか

など細かく確認しましょーう(`・ω・´)ゞ


ワードプレスで実践する場合には、

全てにclassを使わないと文字色なども一緒に変わってしまうので

要注意です(;´・ω・)

<p>をCSSでそのまま P{ でやったら

普通の黒字の部分もピンクにそまりましたw

ブログに起す場合は、必ずclassを使いましょう♪

コメント

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