CSS

【初級編】WEBデザインの現場で使われるCSSプロパティまとめ

 
目次

1. はじめに

WEBデザインとは、インターネット上のウェブサイトの見た目をデザインすることです。この中で、CSSというものが大切になります。この記事では、ウェブサイトをきれいにデザインするために、よく使われるCSSの部品（プロパティと呼びます）を紹介します。

2. 基本のCSSプロパティとその使い方

2.1 display

displayは、物の並べ方を決めるプロパティです。例えば、blockは上から下へと並べる時、inlineは左から右に並べる時に使います。また、flexを使うと、箱の中の物を自由に並べられます。

/* ブロック要素として表示 */
div {
    display: block;
}
/* 行内要素として表示 */
span {
    display: inline;
}

2.2 position

positionは、物の置き場所を決めるものです。absoluteで指定すると、特定の場所に固定できます。relativeは、もともとの場所から少しずらして置く時に使います。

/* 親要素に対して固定位置に配置 */
div {
    position: absolute;
    top: 10px;
    left: 10px;
}

2.3 margin & padding

これは、物と物の間や、箱の中の物と箱の壁の間のスペースを調整する時に使います。marginは外側、paddingは内側のスペースです。

/* 外側のスペースを指定 */
div {
    margin: 10px;
}
/* 内側のスペースを指定 */
div {
    padding: 20px;
}

2.4 color & background-color

色を決める時に使います。colorは文字の色、background-colorは背景の色を指定します。赤や青など、好きな色を選べます。

/* 文字色を青に */
p {
    color: blue;
}
/* 背景色を黄色に */
div {
    background-color: yellow;
}

3. レスポンシブデザインに欠かせないプロパティ

3.1 media queries

このプロパティは、スマートフォンやパソコンなど、いろんな大きさの画面に合わせてデザインを変える時に使います。例えば、画面が小さければ文字を大きく、画面が大きければ写真を大きく表示する、ということができます。

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

3.2 flexbox

箱の中の物を自由に並べられるプロパティです。中央揃えや、均等に分けるなど、いろんな並べ方ができます。

/* 親要素でflexを指定 */
.container {
    display: flex;
    justify-content: space-between;
}

3.3 grid

これは、画面をいくつかのエリアに分けてデザインする時に使います。例えば、ニュースサイトのように左にメニュー、右に本文というレイアウトを作る時などに便利です。

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

4. 効果的な装飾を加えるためのプロパティ

4.1 box-shadow & text-shadow

影をつける時に使います。box-shadowで箱に、text-shadowで文字に影をつけることができ、立体感を出すのに役立ちます。

/* ボックスに影をつける */
div {
    box-shadow: 5px 5px 15px grey;
}
/* テキストに影をつける */
p {
    text-shadow: 2px 2px 4px grey;
}

4.2 transition & transform

物を動かしたり、変形させたりする時に使います。ボタンにマウスを乗せた時に少し大きくなる、などの効果をつけることができます。

/* スムーズな色の変化 */
button {
    transition: background-color 0.5s;
}
button:hover {
    background-color: green;
}

4.3 border-radius

このプロパティで、箱の角を丸くすることができます。写真やボタンなど、丸みを帯びたデザインを作りたい時に使います。

/* 角を完全に丸くする */
img {
    border-radius: 50%;
}

5. パフォーマンスやアクセシビリティを考慮したプロパティ

5.1 font-family & font-size

文字の見た目や大きさを決める時に使います。読みやすいフォントや、目に優しい大きさを選ぶことが大切です。

/* フォントとサイズを指定 */
p {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
}

5.2 z-index

物が重なる時、どれを前に表示するかを決めるプロパティです。例えば、ポップアップのウィンドウを最前面に表示する時などに使います。

/* ポップアップを最前面に */
.popup {
    z-index: 1000;
}

5.3 opacity & visibility

opacityは透明度を、visibilityは表示・非表示を決めるプロパティです。ほんのりと透かして見せたり、見えなくしたりする時に使います。

/* 半透明にする */
div {
    opacity: 0.5;
}
/* 要素を隠す */
div {
    visibility: hidden;
}

6. まとめ

CSSはウェブサイトのデザインを彩る大切なツールです。上記のプロパティを覚えることで、あなたも素敵なウェブサイトを作れるようになるでしょう。学び続けて、自分のデザインのスキルを磨いてくださいね！

RELATED POST