MUZUMI
Pocket

みなさんこんにちは。ムズミです。

CSS講座、やっていきますぞいb

今回はCSSを書き換えてみたいと思います!


CSSの構造

CSSは以下のような構造になっています。

《具体例》
p{
color:green;
font-size:20px;
margin: 5% auto;
}
《構造と名称》
セレクタ{
プロパティ:;
プロパティ:;
プロパティ:値 値;
}

セレクタは「どこに影響させるか」
プロパティは「(セレクタの)何を変えるか」
は「(プロパティを)どれぐらい・どのように変えるか」を意味します。

例えば上の《具体例》を翻訳すると、
pで囲まれた部分
文字の色にして、
文字の大きさ20pxにして、
外側との感覚上下に5%左右は均等にしなさい
」ということです。

セレクタよくわかんねぇ…色薄いし…ってなりますよね

セレクタは次回にまわしておき、今回はプロパティと値について体験していきましょう。

第2回CSS講座文字をいじってみよう! を開く

↗このリンクをクリックしてください。別のタブで文字が出てきます。

今回はCSSを書き換えて、文字を大きくしたり色を変えたりします!

「第2回CSS講座」を右クリック⇒要素の調査を選択してください。

右下のCSS欄を見て下さい。

font-size:50px;」は、「文字のサイズを50pxにする」という意味になります。

ここの値を書き換えれば、文字の大きさが変わります。


font-sizeの値である「50px」の部分をクリックしてください。数字を変えることができ、即座に画面に反映されます。

大きくなりました!


次に文字の色を変えてみましょう。

文字の色を赤色に変えるには、CSSに「color:red;」と書けばよいです。
しかしCSS欄には、プロパティ「color:」の文字が見当たりませんね。そういうときは、新たに書き足せばいいんです。

CSS欄のうち、「.line-1{}」の中で空いているところをクリックしてください。※ずばり下画像の緑色の中がセレクタ.line-1{}の中で、赤色の部分がおすすめの空いているところです。

すると図のように文字を入力するスペースが出てきます。
そこに「color:red;」と入力してください。

コロンとセミコロンを忘れないでくださいね。

これで文字の色が変わりました!
ほかの色にしたいのであれば、colorの横にある部分をクリックして変えてみてください。


次に文字の太さを変えてみましょう。
CSSに、「font-weight:700;」と入力すればOKです。

先ほど文字の色を変えた時と同じ手順でできます。

…ここで不安に思う方がいるかもしれません。
「700pxじゃなくて700なの?違いがわからない」
「いろんなルールがあったら覚えられないよ」

大丈夫です。ググれば(検索すれば)何とかなります。
例えば文字の太さを変える記述を知りたいときは、

「CSS 文字の太さ 変える」

で検索すればオッケーです。冒頭に「CSS」を付けて、やりたいことを書けば大抵のことはわかりますよ。


最後にちょっと難しいですが、文字にぼんやりと影を付けてみましょう。

CSSに、「text-shadow: 1px 1px 3px black;」と入力すればOKです。

当然、初めて見た方はそれぞれなんの値かわからないと思います。

そんなときはそう、検索です。
「CSS 文字 ぼかす」でもいいし、
「text-shadow 使い方」でもわかります。

CSSにはたくさんの命令がありますので、検索を使ってCSSの書き方を調べることはとても重要です。


今回はプロパティと値について学習しました。

それでは次回は、セレクタについてやっていきましょう!

次回のセレクタを学べば、CSSを書くことができるようになります!いっしょに頑張りましょうね。

  • このエントリーをはてなブックマークに追加

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。