ステップ アップ テクニック

CSSでデザインを変えてみよう-CSSの概要

ブログにオリジナリティを出したり、サイト制作をする上で重要になってくるスタイルシート(CSS)。基本的なCSSの記述をまとめてみました!CSSを編集・利用して、ページを自分好みにカスタマイズしましょう☆

間隔を空ける

間隔を空けるには主に「margin」と「padding」の2種類の方法があります。
自分のコンテンツにあった指定方法を選びましょう。

ボックスモデル
1
margin

マージン(margin)は、領域外のスペースのことです。要素ごとで間隔をあけることができます。
marginプロパティで、上下左右をまとめて指定したり、異なる値を指定したり省略することができます。
下記の方法で指定すると、まとめて上下左右のマージンを指定できます。

2
padding

パディング(padding)は、領域内のスペースのことです。背景や枠にも影響して余白をあけます。
paddingプロパティで、上下左右をまとめて指定したり、異なる値を指定したり省略することができます。
下記の方法で指定すると、まとめて上下左右のパディングを指定できます。

ページ全体の背景を変更する

1
背景色の場合

ページの背景変更は、bodyタグに下記を記述します。背景色の設定には、background-colorプロパティを使用し、値に任意の色を指定します。
カラーは16進数(#000000)、RGB、カラーネームのいずれかの形で記述します。

background-repeat(画像の繰り返し)

  • repeat
    背景画像を縦横全面にリピートします。
  • repeat-x
    背景画像を横方向にリピートします。
  • repeat-y
    背景画像を縦方向にリピートします。
  • no-repeat
    背景画像はリピートせず、書き出した画像が1つ表示されます。
背景色の変更によって文字が読みにくくなることがあるよ!文字色も変更してね♪
2
背景画像の場合

背景画像の設定には、backgroundプロパティを使用します。画像の位置などは、background-repeat、background-positionで設定します。

文字の大きさ・色を変更する

font-sizeプロパティで文字の大きさを、colorプロパティで文字の色を指定することができます。
カラーは16進数(#000000)、RGB、カラーネームのいずれかの形で記述します。

要素を横並びにする フロート

floatは、要素を左、または右に寄せて後に続くものを回り込ませるプロパティです。floatは、他の要素に影響しやすいスタイルです。
レイアウト崩れにもつながりますので、慎重に使いましょう。

floatを指定する場合は、widthを指定するときれいなレイアウトになります。floatプロパティで使用する値は、[float:left;]、[float:right;]、
[float:none;]です。ここでは、スタッフおすすめの指定方法を2つご紹介します。

float(要素を左または右に寄せて配置)

  • float:left
    指定したブロックは左寄せになり、後に続くものが右に回り込む
  • float:right
    指定したブロックは右寄せになり、後に続くものが左に回り込む
  • float:none;
    フロートさせない
1
パターン1
2
パターン2

フロートを解除する

floatを使用した場合、clearを指定して回り込みを解除します。この、解除を行わないとfloat直後のテキストや画像も回り込んでしまいます。
この解除方法で便利なのがclearfixです。floatがかけられた要素の親のclassに対して指定して適応させます。

基本となるCSSの記述をまとめましたが、最初は理解が難しいものがあると思います。
しかし、慣れてしまえば案外簡単なもので、ページの作成が楽しくなっていくはずです!
まずは、色々試して覚えていきましょう♪