ในบทความนี้เราจะสอนการเขียน css โดยมีทฤษฎีต่างๆในการทำงานจริงๆอยากให้คุณได้เรียนรู้วิธีการและการคิดการเขียนไปนะครับ
ทฤษฎีกล่อง
หลังจากคุณได้ทำการสร้างไฟล์แล้วคุณก็อาจจะคิดว่าแล้ว tag ในภาษา html มันมีกี่อันใช้อันไหนบ้างที่จะทำให้เว็บเราสวยๆ เหมือนพวกเว็บที่เราเข้าบ่อยๆ อยากให้ใจเย็นๆก่อนครับ เดี๋ยวผมจะสอนต่อไปอย่างแน่นอนว่า tag อะไรจำเป็นบ้าง
tag ต่อมาที่จะสอนคือ tag div ครับเรียกได้ว่าเป็นพระเอกของเราเลยทีเดียว เพราะอะไรเจ้า tag div นั้นมันคือ tag ที่ browser จะทำการแปลงเป็น กล่องสี่เหลี่ยมครับ
การเขียนเว็บในปัจจุบันมันคือเอากล่องสี่เหลี่ยมมาซ้อนๆกันนั่นเอง ดูภาพง่ายๆจะเป็นแบบนี้ครับ
โดย css พวก tag ต่างๆใน html จะมีสองแบบคือ เป็นกล่องกว้างเต็มพื้นที่เสมอ กับ tag ประเภทกว้างเท่ากับ content เช่นพวก span, a ส่วนใหญ่มักเป็นพวก tag เกี่ยวกับอักษรครับ พวก header tag หรือ footer tag ก็ถือเป็นกล่องหนึ่งเหมือนกันครับ
เรามาทดสอบการแยกดูเป็นกล่องๆหน่อยกันดีกว่าครับจากรูปด้านล่างเราจะแยกเป็นกล่องยังไง
เราจะมองแยกแบบนี้ครับ
มองแยกเป็นกล่องใหญ่ๆก่อน อย่างภาพข้างบนจะเห็นว่าเรามองแยกเป็นกล่างระหว่าง กล่องแสดงผล title กับ กล่องที่เป็นกล่อง บทความ เอาล่ะเมื่อเราได้กล่องใหญ่ๆแล้วเราค่อยลงรายละเอียดในกล่องว่าในแต่ละกล่องต้องมองอย่างไรครับ
หลังจากนั้นเราค่อยๆมองในไปลงรายละเอียดว่าในกล่องนั้นๆมันต้องมีอะไรอีก ครับเราไปลองตัวอย่างเว็บอื่นๆบ้างแล้วกันครับเช่น Facebook
สิ่งแรกเวลาเรามองเว็บคือ แยกส่วน header กับส่วน content และส่วน footer ให้ได้ก่อนครับ อย่างตัวอย่าง facebook ซึ่งผมจะมองแยกง่ายๆสำหรับส่วน header กับส่วนเนื้อหาจะเป็นแบบนี้ครับ
เราจะแยกแบบนี้ครับแล้วค่อยไปลงรายละเอียดว่าในส่วน header นั้นเราจะมี input search แสดงชื่อ แสดงปุ่ม home อะไรก็ว่ากันไปแบบนี้ครับ
แล้วกล่องสำหรับแสดงเนื้อหาก็ค่อยไปแยกอีกทีอย่างในภาพด้านบนเราก็จะแบ่งเป็น 3 columns แล้วค่อยไปลงรายละเอียดในแต่ละ column ต้องทำอย่างไรต่อมีอะไรบ้าง
ค่าที่เราต้องรู้เกี่ยวกับ CSS กล่อง
หลังจากเราฝึกฝนระดับหนึ่งแล้วเรื่องการมองแยกเป็นกล่องๆ เรามาเรียนรู้ว่า css ที่เกี่ยวข้องกับกล่องมีอะไรบ้างนะครับ หลักๆจะมีตามนี้เลยครับ
- width ความกว้างกล่อง
- height ความสูงของกล่อง
- padding ระยะห่างจากกรอบกับเนื้อหาข้างในกล่อง
- margin ระยะจากกรอบด้านนอกกล่อง
- float สั่งให้กล่องลอยมีค่า left / right ไม่มี center นะจ๊ะ
- overflow การบอกว่าเนื้อหาภายในกล่องไม่ให้ใหญ่กว่ากล่อง
เหมือนจะเยอะมากแต่เราจะค่อยๆเรียนรู้การใช้งานไปทีละอย่างนะครับ เริ่มแรกเอาเรื่อง กว้าง สูง ก่อนนะครับ ไปดู code กันเลย
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.red-box {
background: red;
}
</style>
</head>
<body>
<div class="red-box">กล่องนี้สีแดง</div>
</body>
</html>ผลลัพธ์
โดยปกติแล้วค่า default ( ค่าเริ่มต้นถ้าเราไม่ได้กำหนดอะไร ) ของกล่องนั้นจะเป็นความกว้าง 100% และความสูง auto สังเกตุว่ามันจะสูงเท่ากับตัวอักษรข้างในเรามาลองเปลี่ยนค่าความกว้างและความสูงกันดูครับ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.red-box {
background: red;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="red-box">กล่องนี้สีแดง</div>
</body>
</html>ผลลัพธ์
สังเกตุว่ากล่อง ชิดซ้าย ซึ่งค่าเริ่มต้นมันจะชิดซ้ายเสมอครับ แล้วกล่องตอนนี้เราบอกว่าให้กว้าง 300px สูง 300px และมี background เป็นสีแดง เราเริ่มจะเข้าใจแล้วใช่ไหมล่ะครับว่าเราสามารถปรับความกว้างยาวได้
ส่วนหน่วย ‘px’ อันนี้คือค่าตายตัวคือกำหนดมาเท่าไร ก็เท่านั้นเป็นหน่วย ส่วน em คือค่าเป็น เท่าตัว โดยในหน่วยของกล่องที่ครอบอยู่เป็นตัวตั้ง เช่น กล่องที่ครอบคลุมมีขนาดอักษร 10px ส่วนกล่องข้างในเราใช้ 1.5em ก็จะเป็น 15px นั่นเอง อีกหน่วยคือ rem คือเอาจาก root หรือยึดที่เดียวเลยคือ เอาหน่วยของกล่องสูงสุดเป็นตัวตั้ง จริงตอนนี้เราจะใช้ px เป็นหลักนะครับ ส่วนใครอยากทำความเข้าใจเพิ่มเติมอ่านตรงนี้ได้เลยครับ //medium.com/hbot/css-units-px-em-rem-%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3-%E0%B9%83%E0%B8%8A%E0%B9%89%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B9%84%E0%B8%A3-3c99bc940e7f
padding / margin
เรื่องนี้มีคนเข้าใจผิดเยอะมากกกกกก และสับสนบ่อยๆ ผมเลยต้องยกมาเป็นหัวข้อแยกเลยครับ เอาล่ะมาดูกันหน่อยว่ามันคืออะไรอ่ะนะครับ
padding คือ ระยะจากขอบกับเนื้อหาข้างในกล่อง อ่านแล้วงงใช่ไหมครับเรามาดูตัวอย่างกันดีกว่าเอา code ด้านล่างไปใส่เลยครับ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.red-box {
background: red;
width: 300px;
height: 300px;
padding: 20px;
}
</style>
</head>
<body>
<div class="red-box">กล่องนี้สีแดง</div>
</body>
</html>เราจะได้ผลลัพธ์เป็นแบบนี้ครับ
สังเกตุว่าคราวนี้จะมีระยะระหว่างตัวอักษรข้างในกับขอบจะมากกว่าในตัวอย่างที่ผ่านมาครับดูจากภาพด้านล่างเลยครับ
ต่อมาถ้าหากคุณใช้ chrome อยู่อยากจะแนะนำเครื่องมือสำหรับคนทำเว็บด้าน front-end กันหน่อยครับไปที่เมนู เลือก more tools > developer tools ขึ้นมาครับหน้าตามันจะเป็นแบบนี้
หลังจากเลือกแล้วจะมี tab โผล่ขึ้นมาด้านข้าง อย่าเพิ่งตกใจว่ามันใช้ยังไงแบบนี้
ของบางคนจะโผล่ด้านขวามันสามารถปรับได้นะครับ เมื่อมันโผล่ขึ้นมาแล้วให้เรากดที่รูปลูกศรที่มันอยู่บนกล่องสี่เหลี่ยมครับตรงนี้
ไปจี้ที่กล่องสีแดงของเราครับหน้าตามันจะประมาณนี้
แต่อย่าเพิ่งสนใจตรงนี้ให้สังเกตุตอนที่เราชี้มันจะบอกว่าค่า padding เป็นเท่าไร แต่ถ้าเรายังไม่ทราบว่าตรงจุดไหนคือ padding ให้ไปดูต่อตรงกล่องด้านขวาของ tab developer tools ครับ ถ้าไม่เห็นกล่องให้เลื่อนเม้าส์ลงข้างล่างครับ
หากดูจากในกล่องจะเห็นพื้นที่สีเขียวตรงนั้นนั่นแหละครับที่เป็นพื้นที่ของ padding โดยจะเป็น 20 ทุกด้าน โดย padding เราสามารถใส่ค่าเดียวหรือค่าหมู่ได้โดยทำอย่างนี้ครับ
// หากอยากได้ทุกด้านมีค่าเท่ากันหมดให้ใส่ว่า padding: 20px; // หากอยากให้บนกับล่างเท่ากัน และขวากับซ้ายมีค่าเท่ากัน ให้ใส่สองค่าครับ padding: 20px 30px; // อย่างนี้ระยะห่างระหว่างบนกับล่างจะเท่ากับ 20px และ ซ้ายกับขวาเท่ากับ 30px // หากอยากใส่ค่าทุกค่าแยกกันเลยก็ให้จำไว้ว่ามันจะนับ ตามเข็มนาฬิกาคือ บน ขวา ล่าง ซ้าย padding: 10px 20px 30px 40px; // หากอยากใส่แค่ค่าเดียวสามารถกำหนดได้ดังนี้ padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;
เรื่องค่าที่มันเป็นตามเข็มนาฬิกาให้คุณจำไว้เลยเกือบทุกๆอย่างที่มันกำหนดค่าสี่ด้านจะเรียงแบบนี้เสมอ margin ก็เช่นกัน ต่อเราไปรู้จักกับ margin กันครับ
margin คือ ระยะห่างจากขอบกับข้างนอก อ้าวยังไงเรามาดูกันดีกว่าครับเอา code ด้านล่างไปลองรันก่อนครับ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.green-box {
background: green;
width: 400px;
height: 400px;
overflow: hidden;
}
.blue-box {
background: blue;
}
.red-box {
background: red;
}
.red-box,
.blue-box {
width: 100px;
height: 100px;
padding: 20px;
color: white;
margin: 30px;
}
</style>
</head>
<body>
<div class="green-box">
<div class="red-box">กล่องนี้สีแดง</div>
<div class="blue-box">กล่องนี้ฟ้า</div>
</div>
</body>
</html>ผลลัพธ์ของ code ด้านบนนะครับ
อธิบาย code นะครับในตัวอย่างนี้เรากำหนดให้กล่องสีแดงและสีฟ้ามีความกว้างและสูงเป็น 100px และกำหนดค่า margin: 30px; คุณจะสังเกตุว่ากล่องสีเขียวที่เป็นกล่องใหญ่คลุมสองกล่องนี้ ซึ่งถ้าคุณไม่ใส่ค่า margin กล่องสีแดงกับฟ้าจะชิดกันไม่ห่างกันอย่างนี้
โดยตอนนี้มีบางสิ่งที่คุณอาจจะยังไม่ทันสังเกตุว่ามันแปลกๆคือ ระยะห่างกล่องสีแดงกับสีฟ้า จริงๆแล้วมันควรจะห่างกันทั้งหมด 60px ไม่ใช่แบบนี้ ซึ่งหลายคนจะงงว่าแล้วมันผิดปกติยังไง ? จากตัวอย่างเราบอกว่าให้ค่า margin:30px; ซึ่งกล่องตอนนี้ห่างกัน 30px ซึ่งมันจะเป็นปัญหาในการจัด layout เพราะค่ามันจะเพี้ยนครับสิ่งที่จะมาแก้ไขปัญหาคือสองค่าที่เรากำลังจะพูดถึงครับนั่นก็คือ float, overflow นั่นเองครับ
float, overflow
float คือการบอกว่ากล่องนี้จะ ลอย ตามคำแปลของมันเลยครับ เหมือนึกว่ากล่องมันลอยอยู่ โดยการลอยนั้นเราจะเลือกให้ลอย ซ้ายกับขวา เท่านั้นไม่มีลอยตรงกลางนะครับ ส่วนใหญ่การใช้ float เราจะใช้เพื่อสำหรับ layout ที่มีหลายๆกล่อง อยู่ในแถวเดียวกัน หลายๆคนอาจจะเคยเห็นว่ามันทำให้กล่องอยู่ตรงกลางได้ อันนี้ผมจะบอกให้อีกทีว่าทำอย่างไรนะครับ ตอนนี้เรารู้จักกับเรื่อง float ก่อน
เรามาลองเล่นกับค่านี้กันดูครับ code ด้านล่างเลย
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
width: 200px;
height: 200px;
padding: 20px;
color:white;
}
.left-float {
float: left;
background: red;
}
.right-float {
float: right;
background: blue;
}
</style>
</head>
<body>
<p class="left-float">กล่องนี้จะลอยทางซ้าย</p>
<p class="right-float">กล่องนี้จะลอยทางขวา</p>
</body>
</html>ผลลัพธ์
สังเกตุว่าผลลัพธ์ทำให้กล่องมันลอยไปชิดซ้ายสุดและขวาสุด สมมติว่าเราอยากทำ layout เป็นสามคอลัมน์ เขาทำกันอย่างไรล่ะ ? เขาก็จะทำสามกล่องให้ float left หมดเลยก็ได้หรือว่าขวาสุดจะ float right แบบนี้ครับโดยคราวนี้ผมจะใส่ค่ากว้างเป็น เปอร์เซนต์เพื่อให้คุณเห็นภาพชัดขึ้นว่าเวลาเขาทำเว็บมันเป็นยังไงนะครับไปดู code กันเลย
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
width: 200px;
height: 200px;
padding: 20px;
color:white;
}
.left-float {
float: left;
background: red;
}
.right-float {
float: right;
background: blue;
}
.bg-green {
background: green;
}
.w-25 {
width: 25%;
}
.w-50 {
width: 50%;
}
</style>
</head>
<body>
<p class="left-float w-25">กล่องนี้จะลอยทางซ้ายความกว้าง 25%</p>
<p class="left-float w-50 bg-green">กล่องนี้จะลอยทางซ้ายความกว้าง 50%</p>
<p class="right-float w-25">กล่องนี้จะลอยทางขวาความกว้าง 25%</p>
</body>
</html>ใน code ชุดนี้ผมเพิ่ม class ชื่อว่า w-25, w-50 เพื่อทำให้กล่องกว้างเป็นเปอร์เซนต์ อย่าลืมว่า css คอมพิวเตอร์อ่านจากบนลงล่างนะครับ ทำให้ความกว้างของคลาส w-25, w-50 มีผลนั่นเอง ต่อมาภาพในใจเราคือจะมีกล่องสีแดงอยู่ทางซ้ายสุดและกล่องตรงกลางเป็นสีเขียวมีความกว้างเป็น 50% ของหน้าจอและสุดท้ายกล่องสีน้ำเงินกว้าง 25% ลอยอยู่ทางขวาครับเอาล่ะมาดูผลลัพธ์กัน
เอ๊ะ !!! ทำไมผลลัพธ์เป็นแบบนี้มันควรจะเรียงติดกันในแถวเดียวกันสิแต่ทำไม กล่องสีน้ำเงินนั้นตกลงไปข้างล่าง ? ไม่ต้องตกใจไปอันนี้ผมตั้งใจให้คุณพลาดนั่นเอง เพราะคนส่วนใหญ่เขียน css ครั้งแรกจะเจอปัญหาแบบนี้ทั้งนั้นครับ
สิ่งหนึ่งที่เราลืมคิดไปคือเจ้า padding นั้นเอง แล้วมันเกี่ยวอะไรกัน ? คืออย่างนี้ครับ เรากำหนดแต่ละกล่องมีความกว้างรวมกันเป็น 100% ถูกต้องไหมครับ แต่ค่า padding นั้นมันคิดแยกกันครับยกตัวอย่างเช่น
สมมติเรากำหนดให้หน้าจอมีความกว้างเท่ากับ 100px แล้วกัน แล้วกล่องสีแดงเรากำหนดให้กว้าง 25% ถูกต้องไหมครับแปลว่าค่าของมันคือ 25px แต่ทีนี้เรากำหนดเรื่อง padding ไว้ 20px เพราะฉะนั้นความกว้างจริงๆมันคือ
ค่า padding-left + ความกว้างของกล่อง + ค่า padding-right ครับถ้าเราเอามาแทนในสูตรนี้ค่าจริงๆคือ
20 + 25 + 20 = 65 นั่นเองนี่คือค่าที่แท้จริงของกล่องซ้ายสุดงั้นเรามีดูว่าค่าที่เรากำหนดใน code เมื่อกี้มันเท่ากันจากสูตรที่ผมบอกไปโดยเรายังยกตัวอย่างหน้าจอกว้าง 100px นะครับ
- กล่องสีแดงกว้าง = 65px
- กล่องสีเขียวกว้าง = 90px
- กล่องสีน้ำเงินกว้าง = 65px
ซึ่งหลายคนจะคิดว่าทำไมมันยุ่งยากอย่างนี้จะจัด layout ต้องมานั่งคิดเลขอีกไม่ต้องห่วงครับผมรู้อยู่แล้วว่าหลายๆคนน่าจะคิดแบบนี้โชคดี ณ ทุกวันนี้เราไม่ต้องมาคำนวนเรื่อง padding / margin แล้วครับเพราะว่าเราจะมีพระเอกมาช่วยคำนวนเรื่องพวกนี้ให้แล้วครับนั่นก็คือ !!!!
box-sizing: border-box;
ค่า property box-sizing ตัวนี้จะช่วยเราคำนวนค่าต่างๆในกล่องให้ไม่เกินความกว้างที่เรากำหนดครับ เช่น จากตัวอย่างเดิมเรากำหนดความกว้างกล่องสีแดงเป็น 25% มันจะไปลดความกว้างแต่ยังให้ค่า padding เท่าเดิมเอาล่ะเป็นอย่างไรไปดู code กันเลย
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
width: 200px;
height: 200px;
padding: 20px;
color:white;
box-sizing: border-box; // <--- เราเพิ่มตรงนี้
}
.left-float {
float: left;
background: red;
}
.right-float {
float: right;
background: blue;
}
.bg-green {
background: green;
}
.w-25 {
width: 25%;
}
.w-50 {
width: 50%;
}
</style>
</head>
<body>
<p class="left-float w-25">กล่องนี้จะลอยทางซ้ายความกว้าง 25%</p>
<p class="left-float w-50 bg-green">กล่องนี้จะลอยทางซ้ายความกว้าง 50%</p>
<p class="right-float w-25">กล่องนี้จะลอยทางขวาความกว้าง 25%</p>
</body>
</html>ผลลัพธ์
จะเห็นว่า box-sizing: border-box นั้นช่วยชีวิตเราได้เยอะมากจริงๆ หลายคนคงมีคำถามอีกว่าแล้วเราต้องมานั่งใส่ box-sizing: border-box ทุกอันเลยหรอ คำตอบคือ ใช่ต้องมาใส่ทุกอันครับ แต่ไม่ต้องห่วง ( อีกแหละ ! ) โลกนี้มีเครื่องมือมาช่วยเราเหมือนกันแต่ผมจะไปอธิบายเพิ่มเติมเป็นส่วนท้ายนะครับเพราะไม่ได้เกี่ยวกับเรื่อง layout โดยตรง
overflow
ต่อมาหลังจากเราเรียนรู้ไปแล้วว่า float มันทำอะไรได้แล้วจะมีเจ้า overflow ทำไม คือที่บอกว่าต้องใช้คู่กันเนี้ยเพราะว่าต่อมาถ้าสมมติเราจะทำ layout แบบมีสองแถว เจ้า overflow เนี้ยแหละครับคือตัวแบ่งแยกอ่ะเรามาดูตัวอย่างกัน
สมมติว่า goal ของเรื่อง overflow หน้าตาจะเป็นแบบนี้นะครับ
เอาล่ะเรามาลองคิดเล่นๆกันหน่อย สมมติจาก code เมื่อตอนเราเรียนรู้เรื่อง float เราจะปรับ code เล็กน้อยนะครับแบบด้านล่างเลย
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
width: 200px;
height: 200px;
padding: 20px;
color:white;
box-sizing: border-box;
}
.left-float {
float: left;
background: red;
}
.right-float {
float: right;
background: blue;
}
.bg-green {
background: green;
}
.w-25 {
width: 25%;
}
.w-50 {
width: 50%;
}
</style>
</head>
<body>
<p class="left-float w-25">กล่องนี้จะลอยทางซ้ายความกว้าง 25%</p>
<p class="left-float w-25 bg-green">กล่องนี้จะลอยทางซ้ายความกว้าง 50%</p>
<p class="right-float w-25">กล่องนี้จะลอยทางขวาความกว้าง 25%</p>
<p class="left-float w-25">กล่องนี้จะลอยทางซ้ายความกว้าง 25%</p>
<p class="left-float w-25 bg-green">กล่องนี้จะลอยทางซ้ายความกว้าง 50%</p>
<p class="right-float w-25">กล่องนี้จะลอยทางขวาความกว้าง 25%</p>
</body>
</html>เราทำการปรับกล่องตรงกลางเป็นกว้าง 25% และเพิ่ม class สีเขียวโดยสมมติว่าถ้าเราต้องการให้มันเป็นสองแถวแบบในภาพเป้าหมายสมมติเราไม่ใช้ overflow แบบใส่มา 6 กล่องเลยหน้าตาที่ออกมามันจะประมาณนี้ครับ
อย่างที่เห็น ณ ตอนนี้พอเราปรับกล่องกว้างเป็น 25% ทำให้ในแถวแรกมันพยายามเอากล่องไปใส่ให้เต็มซึ่งมันไม่ถูกต้อง หากเราจะแก้ปัญหาแบบไม่รู้เลยเราอาจจะสร้างอีกกล่องมาคุมให้กว้าง 75% ครับ ซึ่งผลลัพธ์ไม่ต่างกันครับสุดท้ายต่อให้เราเอาอะไรมาคุมมันก็จะไม่สองแถวเรียงสวยอยู่ดีครับเราจึงต้องใช้เจ้า overflow ในการมาช่วยเหลือตรงนี้ครับเอาล่ะไปดูกันว่ามันใช้ยังไง
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
width: 200px;
height: 200px;
padding: 20px;
color:white;
box-sizing: border-box;
}
.left-float {
float: left;
background: red;
}
.right-float {
float: right;
background: blue;
}
.bg-green {
background: green;
}
.bg-blue {
background: blue;
}
.w-25 {
width: 25%;
}
.w-50 {
width: 50%;
}
.row {
overflow: hidden;
}
</style>
</head>
<body>
<div class="row">
<p class="left-float w-25">กล่องนี้จะลอยทางซ้ายความกว้าง 25%</p>
<p class="left-float w-25 bg-green">กล่องนี้จะลอยทางซ้ายความกว้าง 50%</p>
<p class="left-float w-25 bg-blue">กล่องนี้จะลอยทางขวาความกว้าง 25%</p>
</div>
<div class="row">
<p class="left-float w-25">กล่องนี้จะลอยทางซ้ายความกว้าง 25%</p>
<p class="left-float w-25 bg-green">กล่องนี้จะลอยทางซ้ายความกว้าง 50%</p>
<p class="left-float w-25 bg-blue">กล่องนี้จะลอยทางขวาความกว้าง 25%</p>
</div>
</body>
</html>เราเพิ่ม code ในส่วน css คือมี เพิ่ม .bg-blue กับ .row โดยพระเอกของเราคือ class row เราใส่ property overflow:hidden แล้วในส่วนของ code html เราเพิ่ม class row มาขึ้นระหว่างกล่อง สามกล่องครับผลลัพธ์ที่ได้
นอกจากเรื่องการทำให้ content แยกเป็นแถวแล้วจริงๆเจ้า overflow มันทำให้กล่องนั้นรับรู้ว่ามี กล่องที่ลอยอยู่ในตัวเองนะครับ พูดแล้วอาจจะงง สมมติถ้าเราปกติสมมติถ้าเราต้องการให้แถวแรกกับแถวที่สองห่างกัน 30px อย่างนี้มันจะไม่ทำงานถ้าเราไม่มี overflow มาจัดแถวให้ครับ
สรุป
ในบทความนี้เราได้เรียนรู้อะไรไปบ้างผมจะมาสรุปให้แบบสั้นๆในตอนท้ายนะครับ
- เราได้เรียนรู้ box view หรือมุมมองแบบกล่องเพื่อแยกได้ว่าเว็บแต่ละเว็บเขาทำสร้างมาแบบไหนเวลาเราได้รับภาพจาก designer เราต้องทำยังไง
- เราได้เรียนรู้เกี่ยวกับ css ในการสร้างกล่องคือ div นั่นเอง
- เราได้รู้ css เกี่ยวกับกล่องมีอะไรบ้าง width, height, padding, margin, float, overflow
จริงๆแล้วความรู้ด้านการทำ front-end ยังไม่จบแต่เพียงเท่านี้ แต่ความรู้เท่าที่คุณอ่านมาถึงบทความนี้นั้นเป็นพื้นฐานที่จะทำให้คุณหาความรู้ต่อยอดได้ไม่งงมาก ผมคิดว่าคุณน่าจะเข้าใจเรื่องการเขียน css แล้วเรื่องการทำเว็บของ front-end เบื้องต้นแล้ว
ก่อนจากกันในบทความนี้
เรายังไม่ได้จะหยุดทำเพียงเท่านี้ครับ ผมยังคงจะเขียนบทความต่อแต่อาจจะต้องไปเรื่อง Javascript ต่อแต่ผมอยากรู้ว่าถ้าคุณติดตามบทความตั้งแต่เริ่มมานั้น ผมมีสองทางเลือกให้คือ
- เขียนบทความด้าน front end เพิ่มเติม โดยผมจะเขียนลงลึกไปเรื่อง framework ยอมนิยมอย่าง bootstrap 4 และเรื่อง responsive ว่ามันทำงานยังไง แล้วการใช้ bootstrap ทำไมมันถึงได้นิยมนัก
- เขียนเรื่อง javascript ต่อเหมือนเดิมโดยในความจะลงเรื่องพื้นฐานการใช้ javascript กับ html นะครับอาจจะไม่ใช่เกี่ยวกับ nodejs เพราะตอนนี้ช่างใจอยู่ว่าควรจะไปสอน nodejs หรือยังคงเป็น PHP ดีผมอยากรู้จากคนที่ติดตามอ่านเพื่อจะได้สอนคุณให้ถูกทางใจผมที่ตอนแรกจะสอน PHP เพราะว่า WordPress ยังใช้ PHP อยู่ครับ
ยังไงก็ถ้าคุณอ่านถึงตรงนี้ผมขอบคุณ คุณมากจริงๆครับถ้าไม่มีผู้อ่านที่ติดตามบทความนี้ผมอาจจะไม่ได้เขียนต่อแล้วครับ ถ้าใครอ่านแล้วเลือกข้อไหนอย่างลืม comment ด้านล่างนะครับ
หากคุณยังไม่ได้ลงทะเบียนติดตามข่าวสารของเว็บผมแนะนำให้คุณสมัครเพื่อให้คุณรับข่าวสารบทความดีๆแบบนี้ก่อนใครครับ เจอกันบทความหน้านะครับสำหรับบทความนี้ สวัสดีครับ :)
กลับไปหน้าสารบัญ
https://oxygenyoyo.com/2021/01/18/index-getting-started-code-website/
