web制作でよく使うcssプロパティ。web専門学校で学んだcssの基本

css プロパティ web制作

ここでは、cssの代表的なプロパティを紹介したいと思います。

これを覚えたら、おおよそ基本的なレイアウト技術は見につくはず。

簡単なところから実践してみてくださいね!

 

※cssの知識がない人は、最初にこちらの記事を読むと理解が深まりますよ。

スポンサーリンク

cssの「プロパティ」ってなに?

cssでスタイルやレイアウトをデザインするときには、「セレクタ」と「プロパティ」が必要となります。

セレクタは上記記事を読んでもらえば分かるんですが、両者にはこのような役割があるんです。

  • セレクタ・・・スタイルを適用する範囲を指定するためのもの
  • プロパティ・・・どのようにスタイルを変更するかを指定するもの

「文字の色を変える」とか「画像を中央に配置する」など実際の”スタイル”を指定してあげるのがプロパティの役割。

まさしくここが、cssを学ぶ上で一番面白い醍醐味の部分です!

今回は、僕が専門学校で学んだ「最低限覚えるべき基本のプロパティ」のみ紹介しますが、仕組みを理解すればもっと複雑で面白いプロパティも使いこなせるようになると思います。

それでは順番に見ていきましょう!

スポンサーリンク

フォントに関するプロパティ

文字に関する様々なスタイルを変更するためのものです。

サイズ、種類、様式などを変更できます。

font-sizeプロパティ

フォントのサイズを指定します。

  • px、%、em
font-size:14px;

font-weightプロパティ

フォントの太さを指定します。

  • bold(太字)
  • nomal(標準)
font-weight:bold;

font-styleプロパティ

フォントの様式を指定します。

  • italic(イタリック体)
  • oblique(斜体)
  • normal(標準)
font-style:oblique;

font-familyプロパティ

フォントの種類を指定します。優先度付きで複数指定できます。

  • メイリオ
  • Osaka
  • ヒラギノ
  • MSゴシック など
font-family:メイリオ|Osaka|ヒラギノ|MSゴシック;

fontプロパティ

上記で紹介したフォントに関するプロパティを一括指定できます。sizeとfamilyは必須です。

font:15px bold “メイリオ”;

テキストに関するプロパティ

テキストに関する様々なスタイルを変更するためのものです。

行間や文字の間隔などを指定します。

line-heightプロパティ

行の高さを指定します。

  • Px、%、em
line-height:120%;

text-alignプロパティ

テキストの水平位置を指定します。

  • left(左よせ)
  • right(右よせ)
  • center(中央よせ)
text-align:center;

vertical-alignプロパティ

テキストの垂直位置を指定します。

  • top(上端よせ)
  • middle(中央寄せ)
  • bottom(下端よせ)
vertical-align:center;

text-decorationプロパティ

テキストの装飾を指定します。

  • underline(下線)
  • overline(上線)
  • line-through(打消し線)
text-decoration: underline;

letter-spacingプロパティ

文字の間隔を指定します。

  • px、em、ex
letter-spacing:0.07em;

背景画像に関するプロパティ

背景画像や表示形式を指定するプロパティです。

背景に同じ画像を繰り返し使いたい時に便利です。

background-imageプロパティ

背景画像を指定します。

background-image:url(“画像のパス”);

background-repeatプロパティ

背景画像の繰り返し方向を指定します。

  • repeat(縦横に繰り返す)
  • repeat-x(横方向に繰り返す)
  • repeat-y(縦方向に繰り返す)
  • no-repeat(繰り返さない)
background-repeat:repeat-x;

リストに関するプロパティ

リストマーカーを変更するためのプロパティです。

list-style-typeプロパティ

リストマーカーの種類を指定します。

  • none(マーカーなし)
  • disc(黒丸)
  • circle(白丸)
  • decimal(数字)
list-style-type:none;

テーブルに関するプロパティ

表の形を指定するためのプロパティです。

border-collapseプロパティ

テーブルのボーダーモデルを指定します。

  • separate(セルの間に間隔あり)
  • collapse(セルの間に間隔あり)
border-collapse:collapse;

ボーダーに関するプロパティ

線の種類やサイズなどを指定するプロパティです。

border-○-styleプロパティ

線の種類を指定します。

○(top、bottom、left、right)

  • dotted(点線)
  • dashed(破線)
  • solid(通常の線)
border-bottom-style:solid;

border-widthプロパティ

線の太さを指定します。

  • px
  • thin(細い)
  • medium(中くらい)
  • thick(太い)
border-width:thin;

bordr-colorプロパティ

線の色を指定します。

bordr-color:blue;

borderプロパティ

上記で紹介したボーダーに関するプロパティを一括指定できます。

border:solid thin blue;

幅と高さに関するプロパティ

ボックスの幅や高さを指定します。HTMLタグ1つ1つをボックスと考えてください。

width、heightプロパティ

幅と高さを指定します。

  • px、%
width:100px;
height:50px

ボックスに関するプロパティ

ボックス上下左右の余白を指定します。

パディング(内側余白)とマージン(外側余白)があります。

padding-○プロパティ

コンテンツエリア内側の余白を指定します。上、下、左、右を指定して行います。

○(top、bottom、left、right)

  • px、%、auto
padding-top:10px;

paddingプロパティ

上下左右のパディングを一括指定できます。

  • 値が1つ(上下左右)
  • 値が2つ(上下 左右)
  • 値が3つ(上 左右 下)
  • 値が4つ(上 右 下 左)
padding:10px 5px 15px;

margin-○プロパティ

コンテンツエリア外側の余白を指定します。上、下、左、右を指定して行います。

○(top、bottom、left、right)

  • px、%、auto
margin-top:10px;

marginプロパティ

上下左右のパディングを一括指定できます。

  • 値が1つ(上下左右)
  • 値が2つ(上下 左右)
  • 値が3つ(上 左右 下)
  • 値が4つ(上 右 下 左)
margin:10px 5px 15px;

 

ページレイアウトに関するプロパティはこちらを参考に。

cssプロパティはweb制作の第一歩

今回紹介したプロパティは、web制作で非常によく使うものです。まさに第一歩と言えます。

実際に使うことで、それぞれの特徴も見えてきますから、ぜひ自分の運営するサイトなどで、簡単なものから試してみてください!