บทเรียนการสร้างเว็บไซต์พื้นฐาน

การออกแบบและจัดรูปแบบด้วย CSS

บทเรียนนี้จะเน้นที่ CSS (Cascading Style Sheets) ซึ่งเป็นภาษาที่ใช้ในการจัดรูปแบบและกำหนดการแสดงผลของเอกสาร HTML ทำให้เว็บไซต์มีความสวยงามและน่าใช้งาน

2.1 พื้นฐาน CSS

วิธีการเรียกใช้ CSS

มี 3 วิธีหลักในการนำ CSS ไปใช้กับเอกสาร HTML:

  1. Inline Style: ใส่ Style โดยตรงในแท็ก HTML ด้วย Attribute style (ไม่แนะนำสำหรับงานจริง)

    <p style="color: blue; font-size: 16px;">ข้อความสีน้ำเงิน</p>

  2. Internal Style: ใส่ Style ในส่วน <head> ของเอกสาร HTML โดยใช้แท็ก <style>

    <head>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

  3. External Style (วิธีที่แนะนำ): สร้างไฟล์ .css แยกต่างหาก และเชื่อมโยงเข้ากับเอกสาร HTML ด้วยแท็ก <link> ในส่วน <head>

    <head>
    <link rel="stylesheet" href="styles/main.css">
</head>

Syntax และ Selector พื้นฐาน

โครงสร้างของ CSS Rule ประกอบด้วย Selector, Property และ Value

selector {
    property: value;
    property-2: value-2;
}
Selector คำอธิบาย ตัวอย่าง
Element Selector เลือกทุก Element ที่ตรงกับชื่อแท็ก p { color: black; }
ID Selector เลือก Element ที่มี Attribute id ตรงกัน (ใช้ #) #header { background: gray; }
Class Selector เลือก Element ที่มี Attribute class ตรงกัน (ใช้ .) .button { padding: 10px; }
Universal Selector เลือกทุก Element (ใช้ *) * { margin: 0; }

2.2 Model กล่อง (Box Model)

ทุก Element ใน HTML ถูกมองเป็นกล่อง (Box) ซึ่งประกอบด้วย 4 ส่วนหลักจากด้านในสุดไปด้านนอกสุด:

  1. Content: เนื้อหาจริงของ Element (ข้อความ, รูปภาพ)
  2. Padding: ช่องว่างระหว่าง Content กับ Border (ขอบด้านใน)
  3. Border: เส้นขอบที่ล้อมรอบ Padding และ Content
  4. Margin: ช่องว่างภายนอก Border (ขอบด้านนอก)
.box {
    width: 200px;
    height: 100px;
    padding: 20px; /* ช่องว่างภายใน 20px รอบด้าน */
    border: 5px solid red; /* เส้นขอบหนา 5px สีแดง */
    margin: 10px 20px; /* ช่องว่างภายนอก บน-ล่าง 10px, ซ้าย-ขวา 20px */
}

Box Sizing: โดยค่าเริ่มต้น width และ height จะกำหนดขนาดของ Content เท่านั้น แต่เราสามารถเปลี่ยนให้รวม Padding และ Border ได้ด้วย box-sizing: border-box; (แนะนำให้ใช้)

* {
    box-sizing: border-box; /* ทำให้ width และ height รวม padding และ border */
}

2.3 การจัดรูปแบบข้อความและสี

การจัดการ Font

Property คำอธิบาย ตัวอย่าง
font-family กำหนดรูปแบบตัวอักษร font-family: 'Sarabun', sans-serif;
font-size กำหนดขนาดตัวอักษร font-size: 16px; หรือ font-size: 1rem;
font-weight กำหนดความหนาของตัวอักษร font-weight: bold; หรือ font-weight: 700;
line-height กำหนดระยะห่างระหว่างบรรทัด line-height: 1.5;
text-align กำหนดการจัดวางข้อความ text-align: center;

สีและพื้นหลัง

Property คำอธิบาย ตัวอย่าง
color สีของข้อความ color: #333;
background-color สีพื้นหลังของ Element background-color: #f0f0f0;
background-image รูปภาพพื้นหลัง background-image: url('bg.jpg');

หน่วยวัด (Units):

หน่วย ประเภท คำอธิบาย
px Absolute พิกเซล (ขนาดคงที่)
% Relative เปอร์เซ็นต์เมื่อเทียบกับ Element แม่
em Relative เทียบกับ font-size ของ Element นั้นๆ
rem Relative เทียบกับ font-size ของ Element ราก (<html>) (แนะนำ)
vw/vh Relative เทียบกับความกว้าง/ความสูงของหน้าจอ (Viewport)

2.4 การจัดวางองค์ประกอบด้วย Flexbox

Flexbox (Flexible Box Layout) เป็นเครื่องมือสำหรับจัดวางองค์ประกอบในมิติเดียว (แถวหรือคอลัมน์) เหมาะสำหรับการจัดเรียง, จัดตำแหน่ง และกระจายช่องว่างระหว่าง Item

แนวคิดหลัก

  1. Flex Container: Element แม่ที่กำหนด display: flex;
  2. Flex Item: Element ลูกที่อยู่ภายใน Container

Property หลักสำหรับ Flex Container

Property คำอธิบาย
display: flex; เปลี่ยน Element ให้เป็น Flex Container
flex-direction กำหนดทิศทางการจัดเรียง (row, column)
justify-content จัดตำแหน่ง Item ตามแกนหลัก (Main Axis)
align-items จัดตำแหน่ง Item ตามแกนรอง (Cross Axis)

ตัวอย่าง Flexbox:

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
.container {
    display: flex; /* กำหนดให้เป็น Flex Container */
    flex-direction: row; /* จัดเรียงเป็นแถว (ค่าเริ่มต้น) */
    justify-content: space-between; /* กระจายช่องว่างระหว่าง Item */
    align-items: center; /* จัด Item ให้อยู่กึ่งกลางตามแนวตั้ง */
    height: 100px;
    border: 1px solid #ccc;
}

2.5 การจัดวางองค์ประกอบด้วย Grid

Grid (CSS Grid Layout) เป็นเครื่องมือสำหรับจัดวางองค์ประกอบในสองมิติ (แถวและคอลัมน์) เหมาะสำหรับการสร้าง Layout หลักของหน้าเว็บ

แนวคิดหลัก

  1. Grid Container: Element แม่ที่กำหนด display: grid;
  2. Grid Item: Element ลูกที่อยู่ภายใน Container

Property หลักสำหรับ Grid Container

Property คำอธิบาย
display: grid; เปลี่ยน Element ให้เป็น Grid Container
grid-template-columns กำหนดจำนวนและความกว้างของคอลัมน์
grid-template-rows กำหนดจำนวนและความสูงของแถว
gap กำหนดช่องว่างระหว่าง Grid Item

ตัวอย่าง Grid:

.wrapper {
    display: grid;
    /* สร้าง 3 คอลัมน์: คอลัมน์แรก 100px, สองและสามแบ่งพื้นที่เท่ากัน */
    grid-template-columns: 100px 1fr 1fr;
    grid-template-rows: auto 50px; /* แถวแรกสูงตามเนื้อหา, แถวที่สองสูง 50px */
    gap: 10px; /* ช่องว่างระหว่าง Item 10px */
}

2.6 Responsive Web Design (RWD)

RWD คือการออกแบบเว็บไซต์ให้สามารถแสดงผลได้อย่างเหมาะสมบนทุกขนาดหน้าจอ (Desktop, Tablet, Mobile)

Viewport Meta Tag

ต้องเพิ่มแท็กนี้ในส่วน <head> ของ HTML เสมอ เพื่อให้เบราว์เซอร์บนมือถือแสดงผลหน้าเว็บด้วยความกว้างจริงของอุปกรณ์

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media Queries

คือหัวใจของ RWD ใช้เพื่อกำหนด Style ที่จะถูกนำไปใช้เมื่อหน้าจอมีคุณสมบัติตรงตามที่กำหนด (เช่น ขนาดความกว้าง)

/* Style ทั่วไป (Mobile-First: สำหรับหน้าจอเล็ก) */
body {
    background-color: lightblue;
}

/* Style สำหรับหน้าจอที่มีความกว้างตั้งแต่ 768px ขึ้นไป (Tablet) */
@media (min-width: 768px) {
    body {
        background-color: lightgreen;
    }
    .container {
        width: 90%;
        margin: 0 auto;
    }
}

/* Style สำหรับหน้าจอที่มีความกว้างตั้งแต่ 1200px ขึ้นไป (Desktop) */
@media (min-width: 1200px) {
    body {
        background-color: white;
    }
    .container {
        width: 1140px;
    }
}

2.7 การเปลี่ยนผ่านและแอนิเมชัน (Transitions & Animations)

Transitions (การเปลี่ยนผ่าน)

ใช้เพื่อสร้างการเปลี่ยนค่า Property ของ CSS อย่างราบรื่นในช่วงเวลาที่กำหนด มักใช้เมื่อมีการโต้ตอบ (เช่น การวางเมาส์เหนือ Element)

.button {
    background-color: blue;
    transition: background-color 0.3s ease-in-out; /* กำหนดให้เปลี่ยนสีพื้นหลังใช้เวลา 0.3 วินาที */
}

.button:hover {
    background-color: darkblue; /* เมื่อเมาส์อยู่เหนือปุ่ม */
}

Animations (แอนิเมชัน)

ใช้เพื่อสร้างการเคลื่อนไหวที่ซับซ้อนและทำซ้ำได้ โดยใช้ @keyframes เพื่อกำหนดสถานะต่างๆ ของแอนิเมชัน

/* 1. กำหนด Keyframes */
@keyframes slidein {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(100%);
    }
}

/* 2. นำ Animation ไปใช้กับ Element */
.element {
    animation-name: slidein;
    animation-duration: 3s; /* ใช้เวลา 3 วินาที */
    animation-iteration-count: infinite; /* เล่นซ้ำไม่สิ้นสุด */
}

แบบฝึกหัดท้ายบท

  1. สร้างไฟล์ styles.css และเชื่อมโยงเข้ากับเอกสาร HTML
  2. ใช้ Class Selector เพื่อกำหนดสีพื้นหลังและสีข้อความให้กับ Element <p>
  3. สร้าง <div> ที่มี Box Model ที่ชัดเจน: width: 300px, padding: 20px, border: 5px solid black, margin: 30px
  4. ใช้ Flexbox จัดเรียง Item 3 ชิ้นให้อยู่ตรงกลางทั้งแนวตั้งและแนวนอน
  5. ใช้ Media Query เพื่อเปลี่ยนสีพื้นหลังของ <body> เป็นสีแดงเมื่อความกว้างหน้าจอน้อยกว่า 600px

ในบทถัดไป เราจะเพิ่มการโต้ตอบให้กับเว็บไซต์ด้วย JavaScript

ตัวอย่างโค้ดแบบฝึกหัดท้ายบท (CSS)

ไฟล์ index.html (สำหรับใช้กับแบบฝึกหัด):

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>แบบฝึกหัด CSS</title>
    <!-- ข้อ 1: เชื่อมโยงไฟล์ styles.css -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- ข้อ 2: Element p ที่มี class selector -->
    <p class="highlight-text">ข้อความนี้จะถูกจัดรูปแบบด้วย Class Selector</p>

    <!-- ข้อ 3: Div ที่มี Box Model ชัดเจน -->
    <div class="box-model-demo">
        นี่คือกล่องสาธิต Box Model
    </div>

    <!-- ข้อ 4: Flexbox Container -->
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
    </div>

</body>
</html>

ไฟล์ styles.css (สำหรับใช้กับแบบฝึกหัด):

/* ข้อ 5: Media Query สำหรับ Mobile-First */
body {
    /* Style เริ่มต้นสำหรับหน้าจอใหญ่ */
    background-color: white;
    transition: background-color 0.3s;
}

/* ข้อ 5: Media Query เพื่อเปลี่ยนสีพื้นหลังสำหรับหน้าจอเล็ก */
@media (max-width: 600px) {
    body {
        background-color: red;
    }
}

/* ข้อ 2: Class Selector */
.highlight-text {
    background-color: yellow;
    color: blue;
    padding: 5px;
    border-radius: 5px;
}

/* ข้อ 3: Box Model */
.box-model-demo {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    margin: 30px;
    background-color: lightgray;
    /* แนะนำให้เพิ่ม box-sizing: border-box; เพื่อให้ขนาดกล่องคงที่ */
    box-sizing: border-box;
    text-align: center;
}

/* ข้อ 4: Flexbox */
.flex-container {
    display: flex;
    height: 200px; /* กำหนดความสูงเพื่อให้เห็นการจัดแนวตั้ง */
    border: 2px dashed gray;
    margin-top: 20px;

    /* จัดให้อยู่ตรงกลางทั้งแนวตั้งและแนวนอน */
    justify-content: center; /* แนวนอน */
    align-items: center; /* แนวตั้ง */
}

.flex-item {
    padding: 15px;
    margin: 5px;
    background-color: lightgreen;
    border: 1px solid green;
}

เรียนจบบทนี้แล้ว?

ลองทำแบบฝึกหัดเพื่อทดสอบความเข้าใจ หรือไปบทถัดไปเลย!

กลับหน้าแรก