HTML/CSS

~はじめてのCSS~ プロパティについて

CSSプロパティとは

CSSを書く時に「プロパティ」という言葉が出てきたのですが、これって何ですか?

プロパティとは、「属性」のことです。
でもこのままじゃわかりにくいと思うので、サンプルコードと一緒に見ていきましょう!

p { text-align: center; }

例えばこのコードでは、「p」というタグに対して「text-align」というプロパティ(属性)に「center」というプロパティ値(属性値)を指定して装飾をしています。
この「text-align」というのがプロパティといいます。

このプロパティでは、テキストの配置を変更しようとしています。

なるほど。このプロパティをいろいろ変えることで、様々な装飾が加えられるってことですね!

そういうことです。

「font-size」で文字の大きさを変えたり、「color」で文字色を変えることができるので、また機会があればまとめて詳しくご紹介しますね♪

よく使うプロパティ一覧

では、実際によく使うプロパティを例に出しながら、プロパティの扱いに慣れていきましょう!

よろしくお願いします♪

フォントやテキストについてのプロパティ

フォントやテキストについても、たくさんのプロパティが定義されているのですが、今回はその中でも、フォントサイズ、フォントスタイルや文字の装飾位置揃えを解説していきますので、一緒に覚えていきましょう

フォントサイズ

属性は"font-size"を使用し、フォントのサイズを変更することができます。
属性値には、pxや%などのよく見る基本のサイズの指定方法や、"small", "medium", "large”などの特別な値を使って指定することもできます。

実際の書き方はこんな感じです。

p { font-size: 12px; }

pタグの要素のフォントサイズを12pxに変更しています。

フォントスタイル

属性は"font-style"使用しフォントのスタイル(イタリック体・斜体)を指定します。選んだフォントにもしイタリック体や斜体がなかった場合は、フォントが傾いた状態で表示されます。

また、日本語フォントにはイタリック体や斜体が用意されていないことが多いため、どちらを指定しても表示は同じになります

属性値には、"nomal","italic","oblique",のどれかを指定します。
基本は"italic"を指定しておけば問題ないでしょう。

p { font-style: italic; }

文字の装飾

属性は"text-decoration"を使用し、下線を引くなどの文字の装飾をすることができます。
属性値には、
・"none"-テキストの装飾をしない(初期値)
・”underline”-下線を引く
・”overline”-上線を引く
・”line-through”-取り消し線を引く
・"blink"-テキストを点滅させます。(現在主要なPC用ブラウザでは効果がありません。)
が用意されています。

p { text-decoration: underline; }

これでpタグの要素に下線を引くことができます。

位置揃え

属性は"text-align"を使用し、行の位置揃えをすることができます。
属性値には、
・left- 左揃え
・center- 中央揃え
・right- 右揃え
・justfy- 両端揃え
が用意されています。

p { text-align: center; }

これでpタグの要素が中央揃えで表示されます。

色や背景のプロパティ

色と背景を変更すると、とても目を惹く効果があって見やすくなりますよね♪
次はそんな色や背景についてみていきましょう。

いっぱい設定して魅力的なデザインにしてみたい!

上手に使うと読みやすく綺麗なデザインになりますが、使いすぎたり色の組み合わせを間違えると逆効果なので、注意が必要ですよ。

文字色

属性は"color"を使用し、文字の色を変更することができます。
属性値には、様々な指定の方法があり、RGB値と呼ばれる値で指定したり、ネームという値で指定できます。
今回は簡単な「ネーム」での指定方法を見ていきましょう。
そもそも「ネーム」とは、単純に「blue」とすれば青色になり「black」とすれば黒になります。
このように英語の色の単語で指定できます。

p { color: red; }

これでpタグの要素の文字の色が赤色になります。

背景色

属性は"background-color"を使用し、Webページの背景の色を変更することができます。
属性値には、文字色を変更したときと同じ方法で指定していきます。

p { background-color: brown; }

これでpタグの要素の背景の色を茶色に指定できます。

まとめ

いくつか実際のプロパティも紹介しながらCSSの書き方を説明しましたが、慣れてきましたか?

はい!基本は「タグを指定してプロパティに値を入れる」ですよね♪
これだけやれば覚えられそうです。

よかったです。あとはプロパティの種類を覚えていき、デザインの引き出しを増やしていくだけですね♪

その他のプロパティについては、また機会があればまとめておきます。
今回は、あくまでCSSについてや、書き方を覚えてもらいました。これからCSSのバージョンが変わって記述方法も変わるかもしれないのでその時はまた更新します。


Copyright© FUNA BLOG , 2020 All Rights Reserved.