ホームページ作成時によく使うCSSのプロパティ「教えてマリオ」

マリオデザイン

マリオデザインスタッフブログ「教えてマリオ」

ホーム>>教えてマリオトップ>>ホームページ作成時によく使うCSSのプロパティ

このブログはマリオデザインアルバイトスタッフがこれからWEbを勉強してみたいと思われている方や会社でホームページの更新業務を担当されているがよく意味が分からないという方のために、ホームページ作成の基礎を綴っていくものです。 難しい言葉を使わず(使えない)噛み砕いた言葉で書いていくので、参考になればと思います。
*勉強中の為、間違った解釈を説明すると思いますので、ご指摘コメントもお待ちしておいります。

ホームページ作成時によく使うCSSのプロパティ

  • 2012年3月29日
  • CSS

ここではよく使うCSSのプロパティを紹介します。一気に覚えようとすると大変ですのでよく使うものだけを紹介いたします。ここで紹介できなかったプロパティは随時ブログの中で説明したいと思います。

目次
  1. 余白系のプロパティ
  2. 少し脱線、数値の単位について
  3. サイズ系のプロパティ
  4. ボーダー(枠線)のプロパティ
  5. その他よく使うプロパティ
1.余白系のプロパティ

余白の調整をするプロパティを紹介します。(余白とは隙間や間隔のことを言います)余白には外側への余白内側への余白があります。



プロパティ名 意味
margin 外側に余白を取る 数字かauto(自動)を入れます。
padding 内側に余白を取る 数字を入れます。


外側に余白を取る、内側に余白を取るといわれてもよくわからないと思いますのでここで画像で説明したいと思います。

外側に余白を取るmarginはこんな感じです。

margin説明



内側に余白を取るpaddingはこんな感じです。

padding説明

paddingを使うと対象物(タグ)の高さや横幅が変わるので注意しましょう。上記例では高さが変わっているのがわかると思います。



次にmarginとpaddingのプロパティの書き方を説明します。

margin-top:10px; → 上方向に10px
margin-bottom:10px; → 下方向に10px
margin-left:10px; → 左方向に10px
margin-right:10px; → 右方向に10px
margin:10px; → 四方向に10px
です。

上記以外にも書き方があります。マリオデザインではこちらのほうをお勧めします。

margin:10px; → 先ほどと同じ四方向に10px
margin:10px 0; → 上下に10px,左右は0
margin:0 10px; → 上下は0,左右に10px
margin:10px 0 0; → 上方向に10px,左右は0,下も0
margin:0 0 10px; → 上0,左右も0,下方向に10px
margin:10px 11px 12px 13px; → 上方向に10px右方向に11px下方向に12px
                            左方向に13px

このように半角スペースで区切るとまとめて指定できます。

まとめると

margin:1つだけ指定; → 四方向
margin:半角スペースで区切って2つ指定; → 前が上下、後ろが左右
margin:半角スペースで区切って3つ指定; → 前が上、真ん中が左右、後ろが下
margin:半角スペースで区切って4つ指定; → 左から上、右、下、左

になります。こちらのほうが書く量が少ないし覚える量も少ないと思うのでお勧めです。paddingでの書き方もmarginと同じです。

2.少し脱線、数値の単位について

CSSに使用する値を数値で指定する場合0以外は必ず単位をつけなければいけません。上記ではpx(ピクセル)を使用していますが代表的な単位をご紹介いたします。

単位名 意味
px 画像の1個の点の大きさを1px。
pxが一番よくつかわれると思います。画像のサイズを指定する場合や幅・高さ・余白を指定するときによく使います。サイズは解像度によって変わりますがパソコンによってそんなに違いはありませんのでおおまかなサイズを覚えておきましょう。(100pxならだいたいこれぐらいかなみたいな感じです。)
マリオデザインのホームページは横幅920pxです。感覚で覚えていましょう。
em 1em=現在使用している文字サイズの「M」の高さです。
例を出すと現在使用している文字の大きさが12pxの場合2em=24pxになります。文字の大きさを指定するときによく使います。
% 親要素に対する相対的な数値。
簡単に説明すると横幅500pxのdivタグの中にpタグを入れたとします。このpタグの横幅を50%と指定するとpタグの親要素はdivタグでdivタグは横幅500pxなのでその50%いいかえれば250pxになります。
親要素とは対照のタグを囲っているタグを指します。


以上3つが代表的な単位です。ほかにもありますがこの3つを覚えておけば困ることはないでしょう。


3.サイズ系のプロパティ

サイズ系のプロパティを紹介します。


プロパティ名 意味
font-size 文字の大きさを決める 数値で指定
width 横幅の大きさを決める 数値で指定
height 高さの大きさを決める 数値で指定

4.色系のプロパティ

色系のプロパティを紹介します。


プロパティ名 意味
font-color 文字の色を決める 16進数で指定
値は16進数以外でも指定できますが、16進数での指定をお勧めします。
background-color 背景の色を決める 16進数で指定
値は16進数以外でも指定できますが、16進数での指定をお勧めします。
background-image 背景に画像を入れる url(画像へのパスを書く)
url()のカッコの中に背景にしたい画像のある場所までのパスを書く。


16進数のカラーコードはこちらのサイトを参考にしてください。


4.ボーダー(枠線)のプロパティ

ボーダー(枠線)のプロパティを紹介します。

プロパティ名 意味
border 枠線をつける 半角スペースで区切って、線の太さをピクセルで指定、線の種類、線の色を16進数で指定する。


線の種類の代表的なものを書きます。

solid → 実線
dotted → 点線
dashed → 破線
double → 二重線



次にboderのプロパティの書き方を説明します。



border-top:10px solid #F00; → 枠線を10pxの太さで実線で赤色で上に付ける border-bottom:10px solid #F00; → 枠線を10pxの太さで実線で赤色で下に付ける border-left:10px solid #F00; → 枠線を10pxの太さで実線で赤色で左に付ける border-right:10px solid #F00; → 枠線を10pxの太さで実線で赤色で右に付ける border:10px solid #F00; → 枠線を10pxの太さで実線で赤色で四方向に付ける



16進数の赤は#FF0000ですが同じものが左から2個ずつ1セットですべて同じ場合は#F00に省略できます。

黒の場合は#000000 → #000
白の場合は#FFFFFF → #FFF
青の場合は#0000FF → #00F


5.その他よく使うプロパティ

その他よく使うプロパティを紹介します。



プロパティ名 意味
text-align 文字の位置を指定 左はleftを指定
真ん中はcenterを指定
右はrightを指定
line-height 行の間隔 数値で指定
文字のサイズより大きい数字を入れる。指定した数字をフォントの大きさで引いて残りの数字を上下に均等に割り当てられる。*数値以外でも指定できますが数値で入れると覚えておいて問題はないです。
float 指定した要素を左または右に回り込ませて配置する 左に回り込ませて配置はleft
右に回り込ませて配置はright
clear 上記floatの回り込みを解除する 左の回り込み解除はleft
右の回り込み解除はright
すべての回り込み解除both
bothを覚えておけば問題はないと思います。


紹介したものはまだまだほんの一部ですが上記を覚えておけばそんなに困ることはないと思います。あとは作成しながらその都度覚えていきましょう。



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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

TRACKBACK_URL