สอนเขียนเว็บบทที่ 2 CSS ภาค 2

บทความมีอะไรบ้าง?

บทความนี้ผมจะสอนพวกพื้นฐานการเขียนเว็บโดยจะเริ่มแบบคนไม่รู้เลยว่าเว็บทำงานแบบไหนอย่างไร เพื่อให้พอมีความรู้และสามารถต่อยอดได้นะครับ อาจจะไม่ลงรายละเอียดแบบลึกว่ามันส่งค่าอะไรยังไง แต่จะพยายามให้คนอ่านสามารถเข้าใจและเขียนเว็บได้ในระดับเริ่มต้น โดยผมคิดว่าสิ่งที่ผมจะสอนนั้นจะสามารถหารายได้หรือสร้างรายได้นั่นเอง แต่ต้องให้คุณพยายามทำความเข้าใจและตั้งใจจริงนะครับ

โดยในบทความชุดนี้ผมจะมีการบ้านให้คุณได้ฝึกทักษะที่สอนในบทความอยากให้คุณลองทำตามดูนะครับโดยผมจะมีเฉลยให้ในตอนท้ายของบทความนะครับ ขอร้องว่าอย่าโกงกันนะเพราะตั้งใจเขียนเพื่อให้คุณได้เรียนรู้จริงๆ ถ้าติดตรงไหนในบทความอยากให้เพิ่มเติมอะไรก็สามารถ comment บอกได้นะครับ ผมเองจะพยายามปรับปรุงให้ดีขึ้นเรื่อยๆ

ทฤษฎีกล่อง

หลังจากคุณได้ทำการสร้างไฟล์แล้วคุณก็อาจจะคิดว่าแล้ว 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 โผล่ขึ้นมาด้านข้าง อย่าเพิ่งตกใจว่ามันใช้ยังไงแบบนี้

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 หน้าตาจะเป็นแบบนี้นะครับ

อันนี้คือเป้าหมายของการเรียนรู้เรื่อง 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 มาขึ้นระหว่างกล่อง สามกล่องครับผลลัพธ์ที่ได้

กล่องตรงกลางลืมปรับ text นะครับจริงกว้าง 25% จ้า =_=”

นอกจากเรื่องการทำให้ content แยกเป็นแถวแล้วจริงๆเจ้า overflow มันทำให้กล่องนั้นรับรู้ว่ามี กล่องที่ลอยอยู่ในตัวเองนะครับ พูดแล้วอาจจะงง สมมติถ้าเราปกติสมมติถ้าเราต้องการให้แถวแรกกับแถวที่สองห่างกัน 30px อย่างนี้มันจะไม่ทำงานถ้าเราไม่มี overflow มาจัดแถวให้ครับ

สรุป

ในบทความนี้เราได้เรียนรู้อะไรไปบ้างผมจะมาสรุปให้แบบสั้นๆในตอนท้ายนะครับ

  • เราได้เรียนรู้ box view หรือมุมมองแบบกล่องเพื่อแยกได้ว่าเว็บแต่ละเว็บเขาทำสร้างมาแบบไหนเวลาเราได้รับภาพจาก designer เราต้องทำยังไง
  • เราได้เรียนรู้เกี่ยวกับ css ในการสร้างกล่องคือ div นั่นเอง
  • เราได้รู้ css เกี่ยวกับกล่องมีอะไรบ้าง width, height, padding, margin, float, overflow

จริงๆแล้วความรู้ด้านการทำ front-end ยังไม่จบแต่เพียงเท่านี้ แต่ความรู้เท่าที่คุณอ่านมาถึงบทความนี้นั้นเป็นพื้นฐานที่จะทำให้คุณหาความรู้ต่อยอดได้ไม่งงมาก ผมคิดว่าคุณน่าจะเข้าใจเรื่องการเขียน css แล้วเรื่องการทำเว็บของ front-end เบื้องต้นแล้ว

ก่อนจากกันในบทความนี้

เรายังไม่ได้จะหยุดทำเพียงเท่านี้ครับ ผมยังคงจะเขียนบทความต่อแต่อาจจะต้องไปเรื่อง Javascript ต่อแต่ผมอยากรู้ว่าถ้าคุณติดตามบทความตั้งแต่เริ่มมานั้น ผมมีสองทางเลือกให้คือ

  1. เขียนบทความด้าน front end เพิ่มเติม โดยผมจะเขียนลงลึกไปเรื่อง framework ยอมนิยมอย่าง bootstrap 4 และเรื่อง responsive ว่ามันทำงานยังไง แล้วการใช้ bootstrap ทำไมมันถึงได้นิยมนัก
  2. เขียนเรื่อง javascript ต่อเหมือนเดิมโดยในความจะลงเรื่องพื้นฐานการใช้ javascript กับ html นะครับอาจจะไม่ใช่เกี่ยวกับ nodejs เพราะตอนนี้ช่างใจอยู่ว่าควรจะไปสอน nodejs หรือยังคงเป็น PHP ดีผมอยากรู้จากคนที่ติดตามอ่านเพื่อจะได้สอนคุณให้ถูกทางใจผมที่ตอนแรกจะสอน PHP เพราะว่า WordPress ยังใช้ PHP อยู่ครับ

ยังไงก็ถ้าคุณอ่านถึงตรงนี้ผมขอบคุณ คุณมากจริงๆครับถ้าไม่มีผู้อ่านที่ติดตามบทความนี้ผมอาจจะไม่ได้เขียนต่อแล้วครับ ถ้าใครอ่านแล้วเลือกข้อไหนอย่างลืม comment ด้านล่างนะครับ

หากคุณยังไม่ได้ลงทะเบียนติดตามข่าวสารของเว็บผมแนะนำให้คุณสมัครเพื่อให้คุณรับข่าวสารบทความดีๆแบบนี้ก่อนใครครับ เจอกันบทความหน้านะครับสำหรับบทความนี้ สวัสดีครับ :)

One response to “สอนเขียนเว็บบทที่ 2 CSS ภาค 2”

  1. ขอบคุณมากครับ สำหรับ บทเรียนดี มีคุณค่า มากครับ

ฝากข้อคิดเห็น

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: