初心者による初心者のためのゲームアプリ作成 8

CSSのプロパティの種類

CSSのプロパティの種類は、かなりの数があります。ここでは、とくによく使われるプロパティを紹介したいと思います。

色を指定するプロパティ

プロパティ            説明           使用例

color                                      文字の色を設定します。   color: blue;

background-color           背景色を設定します。    background-color: blue;

border                                   線の種類と太さを設定。  border: solid 1px blue;

ちなみに、色の表現方法は、「red」「blue」などの色の名称を指定する方法のほかに、カラーコードを使う方法があります。PCのディスプレイなどに表示される色は、光の三原色を混ぜ合わせて作られています。そして、それぞれの色の含有量を最小0から最大255までの数値で表し、16進数にして並べた6桁の数値がカラーコードです。カラーコードの先頭には#(シャープ)を付けて記述します。カラーコードの例としては、#ff00ff 赤ff(255)、緑00(0)、青ff(255)なので、原色の赤と青を混ぜた色ということで、先のカラーコードは、紫になります。カラーコードは、WEBサービスで多数公開されていますので、調べてみるといいと思います。



サイズや位置を指定するプロパティ

font-size              文字のサイズを設定します。 例  font-size:12px;

text-align   要素内の横方向の配置を設定します。

例 text-align: left;  左寄せ

text-align: right;  右寄せ

text-align: center;  中央寄せ

text- align: justify;  均等割り

width                     要素の横幅を設定します。  例 width: 100px;

height                    要素の高さを設定します。  例 height: 300px;

margin                  枠線の外側の余白を設定。  例 margin: 30px;

padding                枠線の内側の余白を設定   例 padding: 30px;

marginとpaddingは両方とも余白の幅を設定するプロパティなんですが、余白を取る位置が異なります。marginが枠線の外側で、paddingが枠線の内側の余白となります。marginプロパティとpaddingプロパティは、ハイフン(ー)に続けて方向を表す単語を付け加えることで、一辺に対してのみ余白を設定することができます。例えば、margin-topは、外側の上部の余白を設定することになります。

方向     外側余白        内側余白

上部     margin-top                         padding-top

下部     margin-bottom                padding-bottom

左部     margin-left                        padding-left

右部     margin-right                    padding-right

なお、サイズや位置を指定する場合は、px(ピクセル)の他に、%(パーセント)もよく使われます。%設定の場合は、画面全体または外側にあるタグを100%として計算されます。

次回からは、アプリを動かすための技である、javascriptについて記述していきたいと思います。


スポンサーリンク