LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@apptest(App T. Engineer)

🧭CSS頻出プロパティ一覧表 - ウェブサイト装飾の基本

Posted at

はじめに

この記事は、職業訓練校のIT初心者〜中級者向けに作成したCSS学習教材です。
HTMLでウェブサイトの骨組みを作った後、CSSで見た目を整える際に頻繁に使用するプロパティを厳選しました。

この一覧表があれば、基本的なウェブサイトのデザインはすぐに実装できます。

1. CSSの基本書式

セレクタ {
    プロパティ: 値;
    プロパティ: 値;
}

記述例

h1 {
    color: blue;
    font-size: 24px;
}

2. 文字・フォント関連

ウェブサイトで最も多用される文字装飾のプロパティです。

プロパティ 説明 よく使う値 使用例
color 文字色 red, #ff0000, rgb(255,0,0) color: #333;
font-size 文字サイズ 16px, 1.2em, large font-size: 18px;
font-weight 文字の太さ normal, bold, 100-900 font-weight: bold;
font-family フォント Arial, serif, sans-serif font-family: Arial, sans-serif;
text-align 文字揃え left, center, right text-align: center;
line-height 行間 1.5, 24px line-height: 1.6;
text-decoration 文字装飾 none, underline text-decoration: none;

実用例

/* 見出しのスタイル */
h1 {
    color: #2c3e50;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
}

/* 本文のスタイル */
p {
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    font-family: Arial, sans-serif;
}

3. 背景・色関連

要素の背景を設定するプロパティです。

プロパティ 説明 よく使う値 使用例
background-color 背景色 white, #f0f0f0, transparent background-color: #f8f9fa;
background-image 背景画像 url('image.jpg'), none background-image: url('bg.jpg');
background-size 背景画像サイズ cover, contain, 100px 200px background-size: cover;
background-repeat 背景画像の繰り返し no-repeat, repeat, repeat-x background-repeat: no-repeat;
background-position 背景画像の位置 center, top left, 50% 50% background-position: center;

実用例

/* ヘッダーの背景 */
header {
    background-color: #3498db;
    background-image: url('header-bg.jpg');
    background-size: cover;
    background-position: center;
}

/* セクションの背景 */
.section {
    background-color: #f8f9fa;
}

4. レイアウト・配置関連

要素の配置とレイアウトを制御するプロパティです。

プロパティ 説明 よく使う値 使用例
width 幅 300px, 50%, auto width: 100%;
height 高さ 200px, 50vh, auto height: 400px;
margin 外側の余白 10px, 0 auto, 10px 20px margin: 0 auto;
padding 内側の余白 15px, 10px 20px padding: 20px;
display 表示形式 block, inline, flex, none display: flex;
position 位置指定 static, relative, absolute position: relative;
float 回り込み left, right, none float: left;

実用例

/* コンテナの設定 */
.container {
    width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ボックスの設定 */
.box {
    width: 300px;
    height: 200px;
    margin: 20px;
    padding: 15px;
    display: block;
}

5. ボーダー・枠線関連

要素の境界線を設定するプロパティです。

プロパティ 説明 よく使う値 使用例
border 枠線（一括指定） 1px solid #ccc border: 2px solid #3498db;
border-width 枠線の太さ 1px, thin, thick border-width: 2px;
border-style 枠線のスタイル solid, dashed, dotted border-style: solid;
border-color 枠線の色 #ccc, red border-color: #ddd;
border-radius 角の丸み 5px, 50% border-radius: 8px;

実用例

/* カードデザイン */
.card {
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 20px;
    margin: 10px;
}

/* ボタンデザイン */
.button {
    border: 2px solid #3498db;
    border-radius: 5px;
    padding: 10px 20px;
}

6. Flexbox（現代的なレイアウト）

現在最も使われているレイアウト手法です。

プロパティ 適用要素 よく使う値 説明
display: flex 親要素 flex フレックスコンテナにする
justify-content 親要素 center, space-between, flex-start 水平方向の配置
align-items 親要素 center, flex-start, stretch 垂直方向の配置
flex-direction 親要素 row, column 並び方向
flex 子要素 1, 1 1 auto 伸縮設定

実用例

/* ヘッダーのメニュー */
.header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 3カラムレイアウト */
.three-columns {
    display: flex;
    justify-content: space-around;
}

.three-columns .column {
    flex: 1;
    margin: 0 10px;
}

7. ホバー・状態変化

マウスを乗せた時などの状態変化を設定します。

疑似クラス 説明 使用例
:hover マウスを乗せた時 a:hover { color: red; }
:focus フォーカス時 input:focus { border-color: blue; }
:active クリック時 button:active { background: #ddd; }

実用例

/* リンクのホバー効果 */
a {
    color: #3498db;
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: #2980b9;
    text-decoration: underline;
}

/* ボタンのホバー効果 */
.button {
    background-color: #3498db;
    color: white;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #2980b9;
}

8. レスポンシブデザイン

画面サイズに応じてデザインを変更する設定です。

/* スマホ対応 */
@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 0 15px;
    }
    
    .three-columns {
        flex-direction: column;
    }
    
    h1 {
        font-size: 24px;
    }
}

/* タブレット対応 */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        width: 90%;
    }
}

9. よく使うCSSリセット

ブラウザのデフォルトスタイルをリセットする基本設定です。

/* 基本リセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* リストのスタイルリセット */
ul, ol {
    list-style: none;
}

/* リンクのスタイルリセット */
a {
    text-decoration: none;
    color: inherit;
}

10. 実用的な完成例

/* 基本設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* コンテナ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ヘッダー */
header {
    background-color: #2c3e50;
    color: white;
    padding: 1rem 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

/* ナビゲーション */
nav ul {
    display: flex;
    list-style: none;
}

nav li {
    margin-left: 30px;
}

nav a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

nav a:hover {
    color: #3498db;
}

/* メインコンテンツ */
main {
    padding: 40px 0;
}

.section {
    margin-bottom: 40px;
    padding: 30px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

/* 見出し */
h1 {
    font-size: 32px;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 30px;
}

h2 {
    font-size: 24px;
    color: #34495e;
    margin-bottom: 20px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

/* 段落 */
p {
    margin-bottom: 15px;
    line-height: 1.8;
}

/* ボタン */
.button {
    display: inline-block;
    background-color: #3498db;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
    cursor: pointer;
}

.button:hover {
    background-color: #2980b9;
}

/* カード */
.card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* フッター */
footer {
    background-color: #34495e;
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
    }
    
    nav ul {
        margin-top: 15px;
    }
    
    nav li {
        margin: 0 15px;
    }
    
    h1 {
        font-size: 24px;
    }
    
    .container {
        padding: 0 15px;
    }
}

11. 学習のポイント

覚える順序

  1. 文字・色：color, font-size, background-color
  2. レイアウト：width, height, margin, padding
  3. Flexbox：display: flex, justify-content, align-items
  4. 装飾：border, border-radius
  5. 状態変化：:hover, transition

実践のコツ

  • ブラウザの開発者ツールを使ってリアルタイムで確認
  • 小さな変更から始めて徐々に複雑にする
  • Flexboxを使えばレイアウトが簡単になる
  • レスポンシブデザインは最初から意識する

よくある間違い

  • marginとpaddingの違いを理解する
  • CSSの優先順位（詳細度）に注意
  • ;（セミコロン）の付け忘れ
  • スペルミス（colourではなくcolor）

まとめ

この一覧表の内容をマスターすれば、基本的なウェブサイトのデザインは自由自在です。
まずは簡単なサイトから作り始めて、徐々に複雑なレイアウトに挑戦してみてください。

実際にコードを書きながら覚えることが、CSS習得の最も効果的な方法です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?