Skip to content
Home » [Update] [Responsive] ทุกอย่างที่คุณควรรู้เกี่ยวกับ Responsive Web Design ! | media แปล – NATAVIGUIDES

[Update] [Responsive] ทุกอย่างที่คุณควรรู้เกี่ยวกับ Responsive Web Design ! | media แปล – NATAVIGUIDES

media แปล: คุณกำลังดูกระทู้

ประเด็นร้อนล่าสุดในการทำเว็บไซต์ของต่างประเทศ คงหนีไม่พ้นเรื่องของ Responsive Web Design ครับ ซึ่งเป็นคอนเซปต์การทำเว็บที่น่าสนใจมาก และที่มีมาได้ระยะนึงแล้ว (จนเว็บอื่นเค้าเขียนถึงกันไปหมดแล้ว แต่แอดมินอู้อยู่ 555) ตอนแรกจะอัพเดทเรื่องของ Adobe Photoshop CC ครับว่ามันดีขึ้นยังไงบ้าง มีหลาย Features เลยที่ทำให้ทำงานเว็บดีไซน์ได้ดีขึ้น แต่จนแล้วจนรอดไม่ได้เขียน สุดท้ายเลยมาเขียนหัวข้อนี้แทนเพราะเห็นว่าน่าสนใจกว่าครับ

สำหรับท่านที่มี Facebook ตามไปทักทายแอดมินกันได้ที่ Designil Fanpage นะครับ ในหน้าเพจมีการอัพเดทบทความเว็บดีไซน์ที่น่าสนใจอยู่ตลอดเวลา มาพูดคุยกับแอดมินผ่านทาง Message หรือโพสบน Wall ก็ได้นะครับผม แลกเปลี่ยนความรู้กัน

คำว่า Responsive Web Design หลายคนอาจจะเคยเห็นในแฟนเพจกันมาแล้วนะครับ เพราะลงบทความเรื่องนี้ค่อนข้างบ่อย สำหรับบทความตอนนี้ เราจะมาดูกันว่ามันคืออะไร แล้วทำได้ยังไงกันบ้างครับ

Responsive web design

Responsive Web Design คืออะไร ?

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

เมื่อก่อนมองว่า 1024×768 px นี่ดีครับ เลยสร้าง Layout ขนาด 960px ขึ้นมา อ่านเพิ่มเติมได้จากบทความ CSS Framework: 960gs นะครับผม แต่ปัจจุบันเราใช้กริดที่ขนาดใหญ่ขึ้นแล้วคือ 1440px ให้พอดีกับขนาดหน้าจอคอมพิวเตอร์ laptop ขนาด 13 นิ้ว

ตอนนี้เราไม่ได้สนใจแค่ขนาดจอคอมแล้ว ต้องสนใจขนาดหน้าจอของมือถือ Smart Phone รุ่นต่าง ๆ ซึ่งความละเอียดก็ต่างกัน แล้วยังมี Tablet ที่มีหน้าจอตั้งแต่ 7 นิ้วยัน 10 นิ้วโผล่มาอีก การจะทำหน้าเว็บใหม่สำหรับมือถือหรือแท็บเล็ตเลยก็จะมีปัญว่าดูแลได้ยาก เวลาเปลี่ยนเนื้อหาทีต้องมาเปลี่ยนสองที่ เลยเกิดเทคนิค Responsive Web Design ขึ้นมา เพื่อให้หน้าเว็บเดียวสามารถแสดงผลในรูปแบบต่างกัน ให้เข้ากับขนาดหน้าจอของเครื่องที่ใช้เปิดเว็บได้

media queries - Responsive website examplemedia queries – Responsive website example

อันนี้เป็นตัวอย่างของเว็บที่เป็น Responsive นะครับผม ถ้าอ่านคำอธิบายด้านบนไม่รู้เรื่อง ดูรูปประกอบเลยครับ (คลิกดูรูปใหญ่นะครับ)

จะเห็นว่าไม่ว่าจะเป็นเวอร์ชั่นไหนของเว็บไซต์ก็จะมีเนื้อหาเดียวกัน แต่แตกต่างกันที่การจัดวาง ของ Mobile (มือถือ) ด้วยขนาดหน้าจอที่เล็กก็จะจัดวางเป็นบลอค ๆ เรียงลงมาให้อ่านง่าย ไม่ต้องซูม แต่สำหรับของ Tablet หรือ PC ที่มีหน้าจอใหญ่ ก็จะจัดเรียงให้ดูสวยงาม ขนาดตัวอักษรเหมาะสมเท่าขนาดจอ ซึ่งทุกเวอร์ชั่นนี้เกิดขึ้นจากหน้าเว็บเดียวกันครับ ไม่มีการทำหน้าเว็บใหม่ 4 เวอร์ชั่น

Responsive Web Design ทำอย่างไร ?

เวลาพูดถึง Responsive Web Design เนี่ย เราพูดถึง เทคนิคต่าง ๆ ที่ช่วยให้หน้าเว็บปรับเปลี่ยนการแสดงผลตามขนาดหน้าจอ ครับ

เพราะฉะนั้นมันจะแยกย่อยเป็นเทคนิคสำหรับการแก้ปัญหาต่าง ๆ เช่น เทคนิคแสดงรูปแบบ Low Resolution บนมือถือ (เพื่อให้โหลดเร็วขึ้น เพราะอินเตอร์เน็ตมือถือ เช่น EDGE จะช้ากว่าเน็ตในคอม) หรือ เทคนิคซ่อนเนื้อหาบางส่วนในเว็บบนมือถือ

วันนี้จะมาแนะนำเทคนิคหลักของ Responsive Web Design ซึ่งถ้าเข้าใจเรื่องนี้จะสามารถนำไปทำ Responsive Web Design ได้ 80% แล้วครับ (อีก 20% คือเก็บรายละเอียดอื่น ๆ ที่อาจต้องใช้เทคนิคอื่นมาช่วย) นั่นก็คือ Media Query !!

CSS3 Media Query คืออะไร ดีตรงไหน ?

คนที่เคยเขียน HTML/CSS คงรู้จักโค้ดนี้ดีใช่มั้ยครับ

@import "core.css";
@media print {
   @import "print.css";
   BODY { font-size: 10pt }
}
 H1 {color: blue }

ในที่นี้คือมี CSS 2 ไฟล์ โดยไฟล์ core.css จะใช้กับการแสดงผลบนหน้าจอ (media=”screen”) และ print.css จะใช้กับตอนสั่งปรินท์ (media=”print”) ซึ่งโดยปกติแล้ว CSS สำหรับปรินท์จะทำให้สะอาดตา ไม่มีส่วนที่รกหน้ากระดาษ เช่น Sidebar หรือ Background สีสด ๆ

ด้านบนเป็นความสามารถที่มีมาตั้งแต่ CSS2 แล้วครับ พอมาถึง CSS3 ทาง W3C ซึ่งเป็นคนกำหนดสเปคของ CSS3 ก็ได้สร้างสิ่งที่เรียกว่า Media Query ขึ้นมา โดยแทนที่กำหนดได้แค่ว่า อันนี้ใช้กับหน้าจอนะ อันนี้ใช้กับกระดาษนะ เราก็สามารถกำหนดเพิ่มได้อีก เป็น “ใช้กับหน้าจอที่มีขนาดสูงสุด 480px” หรือ “ใช้กับหน้าจอที่เป็นขาวดำ” หรือ “ใช้กับหน้าจอแนวนอน”

ซึ่งความสามารถทั้งหมดของมันสามารถไปอ่านได้ที่ W3C: Media Query ได้เลยครับ ต่อไปผมจะมาแนะนำวิธีใช้ CSS3 Media Query กันครับ ใช้ไม่ยากเลย

สอนวิธีใช้ CSS3 Media Query

อย่างที่บอกไว้เมื่อครู่ครับ ว่า CSS3 Media Query เป็นการกำหนด “กฏ” ในการแสดงผลขึ้นมาครับ เช่น “แสดงผลกับหน้าจอ ขนาด 480px” หรือ “แสดงผลกับหน้าจอ แนวนอน” มาดูกันว่าเราจะตั้งกฏได้ยังไง

การตั้งกฏ CSS3 Media Query นี่สามารถทำได้ 2 วิธีครับ

วิธีแรก คือใส่ในแท็ก link เพื่อเรียกโหลดไฟล์ที่เราต้องการเลย เช่น

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="example.css" />

(ไม่ต้องตกใจกับตรง media=”only screen and (max-device-width: 480px)” นะครับ ผมจะอธิบายในส่วนต่อไปครับ)

วิธีที่ 2 ในการใส่ CSS3 Media Query ก็คือ ใส่ลงไปในไฟล์ CSS ตรง ๆ แบบนี้เลยครับ

@media screen and (min-width: 800px) and (max-width: 1200px) {
.test {
font-size: 14pt;
}
}

ซึ่งวิธีที่ 2 จะเหมาะกับการแก้ส่วนเล็ก ๆ น้อย ๆ ที่ไม่จำเป็นต้องสร้างไฟล์ CSS ใหม่มารองรับครับ

ทีนี้หลายท่านที่เห็นโค้ดด้านบน คงพอเดาวิธีใช้ออกแล้วใช่มั้ยครับ Media Query คือส่วนที่เติมเข้าไปหลังคำว่า screen นั่นเองที่ใช้กำหนดกฏในการแสดงผล และสามารถตั้งได้หลายกฏ แค่ใส่ and เพื่อเชื่อมระหว่างแต่ละกฏครับ ตามรูปแบบนี้นั่นเอง

@media screen and (กฏ 1) and (กฏ 2) and ... {
/* CSS ที่ต้องการใส่ถ้าเครื่องตรงตามกฏด้านบน */
}

ต่อไปเรามาดูกันว่ามีกฏของ Media Query ไหนบ้างที่เราควรรู้ครับ:

  1. max-width: __ px / min-width: __ px / max-height: __ px / min-height: __ px : 4 อันนี้คือความกว้าง-ยาวสูงสุด/ต่ำสุดครับ (แต่ปกติเค้าจะกำหนดกันแค่ความกว้างนะครับ) จะเช็คตามขนาดหน้าจอของ Browser เช่น ถ้าเราเปิด Google Chrome เต็มจอ มันก็จะมองว่าค่า width ตอนนี้เต็มจอ แต่ถ้าย่อเหลือครึ่งจอมันก็จะมองว่าค่า width เราน้อยลงครับ
    เช่น
    @media screen and (max-width: 600px)
  2. max-device-width: __ px / min-device-width: __ px / device-width: __ px : ค่า device-width จะแตกต่างกับ width เฉย ๆ ตรงที่มันจะดูขนาดหน้าจอเครื่องแทนครับ เหมาะมากเวลาเราต้องการเจาะจงเครื่องที่เรารู้ขนาดหน้าจอของมันอยู่แล้ว
    เช่น เรารู้ว่า iPhone 3GS ความละเอียด 320x480px จะเขียนโค้ดได้ว่า
    @media screen and (device-width: 320px)
  3. orientation: portrait / orientation: landscape : ค่า orientation เป็นการเช็คว่าหน้าจออยู่ในแนวไหน เวลาเปิดเว็บใน Tablet บางทีเราก็เปิดแนวตั้ง (portrait) หรือบางทีก็เปิดแนวนอน (landscape) ตัวนี้จะช่วยให้กำหนด CSS สำหรับแนวที่ต้องการได้ครับ (ตามปกติ แนวนอนจะเห็นเนื้อหาได้มากกว่าครับ)
    เช่น
    @media screen and (orientation: landscape)
  4. aspect-ratio: __/__, device-aspect-ratio: __/__ :  ค่า aspect ratio เป็น Ratio กว้าง/สูง ของขนาดจอครับ เช่น 16/9 หรือ 1280/720 เป็นต้น
    เช่น
    @media screen and (aspect-ratio: 16/9)
  5. min-color: _ / max-color: _ / color: _ : ค่าจำนวนบิทต่อสีที่เครื่องใช้แสดงผลครับ ถ้าเครื่องไหนไม่มีสีก็จะเป็น 0 ครับผม
    เช่น
    @media screen and (min-color: 2)
  6. max-resolution: __dpi / min-resolution: __dpi / resolution: __dpi : ค่าความละเอียดของหน้าจอครับ เอาไว้ใช้แยกแยะหน้าจอความละเอียดสูง เพื่อแสดงรูปที่มีความละเอียดสูงได้
    เช่น
    @media screen and (max-resolution: 300dpi)

กฏต่าง ๆ ที่น่าสนใจมีเพียงเท่านี้ครับ อยากให้เพื่อน ๆ ลองศึกษาเพิ่มเติมเรื่องของ Media Query กับ Browser และเทคโนโลยีด้าน HTML, CSS เพิ่มเติมนะครับ, รวมไปถึงเรื่องของเทคนิค Responsive Web Design และ Toolต่าง ๆ ที่น่าสนใจในการทำเว็บไซต์ Responsive ถ้ามีความรู้ด้านนี้ก็จะช่วยให้เพื่อน ๆ เขียน Responsive ได้เนี้ยบและดียิ่งขึ้นฮะ

เว็บไซต์ด้านล่างนี้จะ Showcase โชว์ผลงานการออกแบบเว็บไซต์แบบ Responsive รวบรวมเว็บไซต์ชื่อดังไว้เพียบ

media queries showcasemedia queries showcase – https://mediaqueri.es/

เว็บไซต์และบทความเกี่ยวกับ Responsive สำหรับผู้เริ่มต้น

เว็บไซต์พวกนี้คือเว็บที่แอดมินอ่าน รวมถึงนำโค้ดตัวอย่างบางส่วนมานะครับผม ผู้อ่านท่านใดถนัดภาษาอังกฤษสามารถเข้าไปอ่านหาความรู้เพิ่มเติมได้ครับ

บทความอื่น ๆ จาก Designil

แนะนำคอร์สเรียน Responsive ประจำปี

The Web Developer Bootcamp 2021 คอร์สปูพื้นฐานการเขียนเว็บไซต์ HTML, CSS, JavaScript, Node.js สำหรับ Web developer ของ Udemy คอร์สนี้จะสอนเกี่ยวกับการเขียนเว็บตั้งแต่เริ่มต้นไม่ว่าจะเป็นการเขียร HTML, CSS, Bootstrap การตั้งค่าหน้าจอ ทำยังไงให้ใช้งานง่าย, Ajax คืออะไรกันนะ รวมไปถึงเทคนิคการทำเว็บให้รองรับกับทุก device ตั้งแต่ Desktop, tablet, mobile

ราคาเริ่มต้นที่ 650 บาท เรียนออนไลน์ผ่าน Udemy ได้เลยครับผม

[NEW] รู้จักสื่อใหม่ (New Media) | media แปล – NATAVIGUIDES

ชนิดของสื่อใหม่

เว็บไซต์ (website)

เว็บไซต์เป็นช่องทางการสื่อสารที่ได้รับความนิยมจากทุกสำนักข่าว เพราะมีต้นทุนในการดำเนินงานไม่สูงมากนักและสอดคล้องกับแนวโน้มของคนรุ่นใหม่ที่หันไปใช้เวลาอยู่ในโลกออนไลน์มากขึ้น ทำให้สำนักข่าวเกือบทุกแห่งทั่วโลก ทั้งหนังสือพิมพ์ วิทยุ และโทรทัศน์ ต่างพัฒนาเว็บไซต์ขึ้นเพื่อเป็นอีกช่องทางหนึ่งในการเผยแพร่ข่าวสาร รวมทั้งใช้เป็นสื่อกลางเชื่อมต่อกับผู้บริโภคข่าว ด้วยบริการกระดานแสดงความคิดเห็น (Web board) และการกด Like ผ่านเว็บไซต์สังคมออนไลน์ เฟซบุ๊ค การพัฒนาภาษาคอมพิวเตอร์ในปัจจุบัน ยังทำให้เว็บไซต์หรือหน้าเว็บเพจสามารถไปปรากฎอยู่ในเว็บไซต์อื่นๆ ได้ด้วย โดยเฉพาะเครือข่ายสังคมออนไลน์ เช่น เฟซบุ๊ค และทวิตเตอร์ เว็บไซต์สามารถเข้าถึงได้จากอุปกรณ์หลายประเภทที่มีการเชื่อมต่อกับเครือข่ายอินเทอร์เน็ต อาทิ คอมพิวเตอร์ทั้งแบบตั้งโต๊ะและพกพา  แท็บเล็ต และโทรศัพท์ เคลื่อนที่ประเภทสมาร์ทโฟน

พัฒนาการของเว็บไซต์

1)  Web 1.0 เป็นยุคแห่งการเริ่มต้น การผลิตเนื้อหาต่างๆ มาจากเจ้าของเว็บไซต์ ผู้ที่ต้องการข้อมูลจะเข้าไปอ่านจากเว็บไซต์หรือค้นหาผ่าน Search Engine การเข้าถึงข้อมูลอยู่ในรูปแบบ “Read-Only” กล่าวคือ  การแสดงเนื้อหาและการโต้ตอบกันระหว่างเจ้าของเว็บไซต์กับผู้เข้าชมเว็บไซต์เป็นการตอบโต้ทางเดียว ผู้เสนอเนื้อหาหรือเจ้าของเว็บไซต์จะเป็นผู้จัดทำ ค้นหา นำเสนอ โดยผู้อ่านหรือผู้ท่องเว็บมีหน้าที่รับข้อมูล  สารสนเทศเพียงอย่างเดียว แม้มีโอกาสในการแสดงความคิดเห็นหรือมีการโต้ตอบกันระหว่างเจ้าของเว็บไซต์กับผู้เข้าชมเว็บไซต์ แต่ยังถือเป็นสัดส่วนที่น้อย เช่นอาจมีการรับส่งข่าวสารกันทางอีเมล์ การโต้ตอบ  แบบออนไลน์ผ่านโปรแกรมต่างๆ หรือเพียงการดาวน์โหลด เพลง ภาพต่างๆ จากเว็บไซต์  

2)  Web 2.0 เป็นยุคแห่งการเชื่อมการให้บริการข้อมูลข่าวสารอยู่ในรูปแบบ “Read – Write” ซึ่งเป็นการ แสดงเนื้อหาและการโต้ตอบกันระหว่างเจ้าของเว็บไซต์กับผู้เข้าชม เว็บไซต์ Web 2.0 จึงมีลักษณะการแบ่งปันความรู้ และการแลกเปลี่ยนความคิดเห็นซึ่งกันและกันมากกว่าที่จะเป็นการนำเสนอข้อมูลผ่าน เว็บไซต์เพียงอย่างเดียว รวมทั้งยังมุ่งให้เกิดการติดต่อสื่อสารให้เป็นไปอย่างกว้างขวางมากขึ้น ทาให้ผู้ท่องเว็บหรือผู้ใช้บริการมีบทบาทเป็นผู้สร้างเนื้อหาข้อมูลด้วย  โดยเน้นให้คนทั่วไปเข้ามามีส่วนร่วมในการสร้างเนื้อหา และการนำเสนอข้อมูลผ่านเว็บไซต์ที่ได้จัดทำขึ้น ตลอดจนมีการแลกเปลี่ยนเนื้อหาระหว่างสมาชิก

สื่อสังคมออนไลน์ ( Social Media )

สื่อสังคมออนไลน์ เป็นช่องทางการสื่อสารรูปแบบใหม่ที่ได้รับความนิยมอย่างมากในกลุ่มคนรุ่นใหม่  เนื่องจากสามารถเชื่อมโยงเครือข่ายสังคมของผู้ใช้ไว้ได้ตลอดเวลา และเป็นสื่อกลางในการแบ่งปันเนื้อหาแบบมัลติมีเดียได้จากอุปกรณ์สื่อสารใกล้ตัว เช่น แท็บเล็ต สมาร์ทโฟน เป็นต้น  สื่อสังคมออนไลน์ที่ได้รับ ความนิยม เช่น เฟซบุ๊ค (Facebook), ทวิตเตอร์ (Twitter), ยูทูป (YouTube), ลิงเคดอิน (LinkedIn) เป็นต้น ผลการสำรวจ ณ พ.ศ. 2556 พบว่า ทั่วโลกมีสมาชิกเฟซบุ๊คทั้งสิ้น 1,000 ล้านบัญชี สมาชิกกูเกิ้ลพลัส 235  ล้านบัญชี สมาชิกทวิตเตอร์มากกว่า 200 ล้านบัญชี สมาชิกลิงเคดอิน 160 ล้านบัญชี และสมาชิกพินเทอเรสต์ 10.4 ล้านบัญชี

ผลสำรวจพฤติกรรมผู้ใช้อินเทอร์เน็ตในประเทศไทย ปี 2556 ของสำนักงานพัฒนาธุรกรรมทางอิเล็กทรอนิกส์ (2556) พบว่า ภายในระยะเวลา 12 ปี นับตั้งแต่ พ.ศ. 2544 ผู้ใช้อินเทอร์เน็ตในประเทศไทยมีจำนวนชั่วโมงการใช้งานอินเทอร์เน็ตต่อสัปดาห์เพิ่มมากขึ้นอย่างต่อเนื่อง โดยเพิ่มขึ้นถึงร้อยละ 76.3 และผู้ใช้อินเทอร์เน็ตร้อยละ 9 มีชั่วโมงการใช้งานต่อสัปดาห์สูงถึง 105 ชั่วโมง ด้านอุปกรณ์การเข้าถึงอินเทอร์เน็ตนั้น ผู้ใช้มีแนวโน้มหันมาใช้อุปกรณ์ที่สามารถพกพาไปได้ทุกสถานที่มากขึ้น ทั้งสมาร์ทโฟนและแท็บเล็ต นอกจากนั้นยังพบว่ากลุ่มผู้ที่มีอายุน้อยกว่า 15 ปี และกลุ่มผู้สูงอายุ ใช้แท็บเล็ตในการเข้าถึงอินเทอร์เน็ตในสัดส่วนที่สูงกว่ากลุ่มอายุอื่น  กิจกรรมการใช้อินเทอร์เน็ตที่กำลังเป็นที่นิยมเพิ่มขึ้น ได้แก่ การใช้งานโซเชียลมีเดีย ในขณะที่กิจกรรมหลักยังคงเป็นการรับส่งอีเมล์ และการค้นหาข้อมูลเช่นเดิม

ปัจจุบัน คนไทยเป็นสมาชิกในเครือข่ายเฟซบุ๊คทั้งสิ้น 24 ล้านบัญชี ในจำนวนนี้ส่วนใหญ่ใช้เฟซบุ๊คในการอัพโหลดและแชร์รูปถ่ายในเครือข่าย จนเกิดพฤติกรรม selfies หรือการคลั่งไคล้ในการถ่ายรูปและเผยแพร่รูปตนเองในเครือข่ายสังคมออนไลน์ รองลงมาคือการส่งข้อความระหว่างกันแบบส่วนตัว (Inbox) และอันดับสามเป็นการโพสต์ความคิดเห็นบนหน้าวอลล์ (Wall) เกี่ยวกับกิจวัตรประจำวัน และอันดับ 4 คือการ check-in เพื่อบอกสถานที่ที่ไปหรือกิจกรรมที่ทำ

ที่มา

งานวิจัย Re-defining Thailand’s New Media : Challenges in the Changing Political Regime โดยอรรคณัฐ วรรธนะสมบัติ

ขอบคุณรูปภาพจาก http://www.prachachat.net/

ป้ายคำ


JSOL \u0026 HOÀNG DUYÊN – SÀI GÒN HÔM NAY MƯA | Official MV


Món quà âm nhạc từ anh em nhà DreamS. Tin rằng âm nhạc sẽ chữa lành tổn thương và sẻ chia nỗi buồn của ai đó trong những ngày mưa Sài Gòn…
Cảm ơn mọi người đã yêu thương JSOL, Hoàng Duyên và cả CARA nữa!
Mọi vấn để về mặt bản quyền xin vui lòng liên hệ email: [email protected]
JSOL \u0026 HOÀNG DUYÊN SÀI GÒN HÔM NAY MƯA | Official Music Video
Produced by Dreams Entertainment
Original Vocal: https://bit.ly/3i9a7Cm
☞ Nghe ca khúc Sài Gòn Hôm Nay Mưa tại: https://umvn.lnk.to/sghnm
SGHNM JSOL HoangDuyen DreamSEntertainment DreamS

Lyric:
Verse 1:
Từ lâu ta chẳng cho nhau
Một câu hỏi chào
Ngày ngày em nhắn cho anh
\”Dạo này anh thế nào?\”
Vài dòng tin nhắn đã lâu
Chẳng hồi đáp lại
Chờ anh đến mắt ướt nhòe
Mà sao anh im lặng đến thế
Prechorus:
Mưa nắng của trời, ai lại oán trách
Ai hãy mách cho tôi cách chữa lành nỗi buồn này
Đi đến nơi đâu cũng là đôi ta
Hạnh phúc đôi khi để lại thương đau
Chorus :
Sài Gòn hôm nay mưa
Dường như có ai bật khóc
Vì nhớ người nơi chốn nào
Chờ một ngày người ta
Trở về để nói lời hứa
Từ lâu mà ai nỡ quên
Chỉ cầu mong cho mưa ngừng rơi
Mưa ngừng rơi anh sẽ quay về
Mà dường như khi mưa ngừng rơi
Anh cũng tan mất
Verse 2:
Ngày nắng, ngày mưa mà ta cùng nhau bước qua
Bây giờ không còn lại gì em à
Đành chôn vùi những tổn thương vào sâu tận đáy lòng, chẳng muốn ai đào lên
Tự mình đào lên thôi, tự mình đào lên thôi
Những vết thương em tạo ra
Tự mình tạo ra thôi tự mình tạo ra thôi
Đau đớn chỉ mình em nhận
Nhắn ai kia nhớ ngủ sớm, làm việc nhiều quá chẳng tốt đâu anh à
Nhớ ăn no nhớ mặc ấm, đừng để đau ốm ai sẽ lo cho anh
Nếu mai đây không về nữa thì người phải nhớ hạnh phúc dẫu thế nào
Nhớ hay quên em tùy anh chỉ cần là anh bình yên

PRODUCED BY DREAMS ENTERTAINMENT
Director: Gin Trần
Music Producer: Khắc Hưng
Composer: Hoàng Duyên
Mix \u0026 Master: Khắc Hưng
Talent Manager: Đỗ Phương Mai
Art Director : Nachi Khang
Assistant Director: Sơn Trương
Producer: Kan Nguyễn
Set Design: Basic Decor
Talent Account: Ánh Thảo
Production Assistant : Huy Võ, Kiên Nguyễn, Minh Thuận
Cast: Navie Ngô, Nguyễn Hoàng Phát
D.O.P: Hà Hoàng
Cam OP: Minh Con
Focus: Minh Nhí
Director of Media Planning: Nguyễn Việt Nữ
PR Assistant: Bảo Trân
Social Team: Universal Music Vietnam
Translator: Đoàn Khánh Linh, Usagi
Graphic Designer: Tuấn Maxx
Behind the Scenes: Trung Phong
Stylist: An Đặng, Nou Huy
M.U.A: Khoa Lê
Photographer: Milor Trần
Hair Stylist: Chinny
Costumes: Vân Anh Scarlet, REN by Tee, DEAR JOSÉ, FLORAL PUNK, EDINI, Pices Gem, The Playlist, Kefi Accessories.
Special thanks to Samsung Galaxy A52, TikTok, Metub, Hôtel Des Arts SaiGon, Universal Music Vietnam

CLICK SUBSCRIBE FOR MORE VIDEOS : https://metub.net/dreams
► FOLLOW US on FACEBOOK
☞ DREAMS: https://goo.gl/1CR2is
☞ JSOL: https://www.facebook.com/jsol.dreams
☞ HOÀNG DUYÊN: https://www.facebook.com/yuihoangduyen.dreams
All rights reserved.

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

JSOL \u0026 HOÀNG DUYÊN - SÀI GÒN HÔM NAY MƯA | Official MV

มือใหม่ต้องรู้ ยื่นกู้บ้านมีขั้นตอนยังไงบ้าง ? นานแค่ไหนรู้ผล | จบใหม่ยื่นกู้


สวัสดีค่า คลิปนี้มาตามคำขอที่ถามกันเข้ามานะคะ
ว่ากู้บ้าน 🏠 มีขั้นตอนยังไงบ้าง ?
แอมสรุปมาให้เข้าใจภาพรวมง่ายๆ นะคะ
4 ขั้นตอนนี้ทุกคนต้องเจอแน่ๆ
รู้ไว้ก่อน เตรียมพร้อมกว่า รับรองว่ามีโอกาสแน่ๆค่า
ขอให้สมหวังกันทุกคนเลยนะคะ 💖⚡️✨
ใครอยากรู้เรื่องอะไรจากแอมอีกก็พิมพ์ไว้ใต้คอมเม้นไว้ได้เลยนะค้า อันไหนแชร์ได้จะมาทำคลิปให้ทุกคนดูกันค่า
🧇Social Media / Contacts for work 🥐
1. https://www.facebook.com/amissos
2. Instagram: amissos
กู้บ้าน บ้าน ยื่นกู้บ้าน

มือใหม่ต้องรู้ ยื่นกู้บ้านมีขั้นตอนยังไงบ้าง ? นานแค่ไหนรู้ผล | จบใหม่ยื่นกู้

Maroon 5 Greatest Hits Full Album 2020 – Maroon 5 Best Songs Playlist 2020


Maroon 5 Greatest Hits Full Album 2020 Maroon 5 Best Songs Playlist 2020
Maroon 5 Greatest Hits Full Album 2020 Maroon 5 Best Songs Playlist 2020

Maroon 5 Greatest Hits Full Album 2020 - Maroon 5 Best Songs Playlist 2020

Hiện Đại | Khắc Việt | Official Music Video


KHACVIET HIENDAI POPS YINYANG VHD NHACTRE
Available on ZING MP3 : https://zingmp3.vn/baihat/ZUI99F6F.html
Available on Spotify: https://YYM.lnk.to/HienDai/spotify
Available on Apple Music: https://YYM.lnk.to/HienDai/applemusic
iTunes: https://YYM.lnk.to/HienDai/itunes
NCT: https://YYM.lnk.to/HienDai/nct
Keeng: https://YYM.lnk.to/HienDai/keeng
MV HIỆN ĐẠI KHẮC VIỆT
MUSIC COMPOSER : KHẮC VIỆT
PRODUCER BY : VHD ENTERTAINMENT
EXECUTIVE PRODUCTION : HÀ ĐOÀN ĐỨC
ARRANGEMENT : ĐOÀN MINH VŨ
STUDIO MIX MASTER : KHẮC HƯNG
PR MANAGER : NHÃ THU HƯƠNG
SOCIAL MANNGER : HẢI YẾN
GRAPHIC DESIGN: ĐINH THIÊN PHÚ
ASSISTANT : XUÂN ĐẠT
SCREEN WRITER: MINH KIÊN
DIRECTOR: LÊ HÀ NGUYÊN
PRODUCER: TRANG CÔNG THÀNH
PRODUCTION DESIGNER: LINH H PHẠM
D.O.P: HẢI NGUYỄN ĐỨC
LINE PRODUCTION: NGỌC NGUYỄN PUKACHI
ASSISTANT PRODUCTION: LÊ YÊN THI
LOCATION: MINH NGUYỄN
1ST AD: DÊ TRUNG
2ND AD: TUẤN BƯ
CAMERA OPERATOR: TÂM TOÉT
FOCUS PULLER: LE VIỆT ANH
SET DRESSER: QUANG SỌT
PROP MASTER: TÚ TỬ TẾ / ĐÀO XUÂN THÀNH / NGỌC
STYLIST: PHƯƠNG LINH
MAKE UP: LINH KILLDY / HỒNG ANH / HỒNG NHUNG
RUNNER: NHI TRẦN / BAN MAI / CHÍ MINH / VY VY
EDITOR : LÊ HÀ NGUYÊN
COLORIST: TIẾN NGUYỄN
EQUIPMENT RENTAL HOUSE: HNLENS
BTS: WANGPH / NGUYENHUY
ACTOR: CHI TRẦN BÙI LINH CHI AN JAPAN PHẠM NGỌC ANH
CẢM ƠN POPS MUSIC, YINYANG, GAPO , BEAT, BOX STUDIO, BH MEDIA ĐÃ ĐỒNG HÀNH CÙNG KHẮC VIỆT VÀ VHD TRONG DỰ ÁN LẦN NÀY
CHÂN THÀNH CẢM ƠN:
ANH TUẤN PAT
ANH TUẤN B
ANH CHƯƠNG TAILOR
ANH ĐÀO NGUYÊN
INTERCONTINENTAL HANOI WESTLAKE
BLACKSHEEP
CHÂN THÀNH CẢM ƠN CÁC NHÃN HIỆU THỜI TRANG
HIEU PHAM TAILOR
WIGI
VANANHSCARLET

Lyrics:
Cô ấy quen hôm qua, vừa đi chơi đã đòi quà
Cô ấy ko quan tâm anh có mẹ hay có có cha
Cô ấy chỉ hỏi anh rằng anh đã mua nhà, hay anh vẫn ở nhà thuê
Quê của anh ở đâu, thành phố anh có hộ khẩu, thẻ anh cất đâu, hay túi tiền anh có sâu
Anh như một người khác lạc vào thế giới này
Sao mọi có thể sống một cuộc sống như vậy?
Anh thích những ngày xưa, anh thích những chiều mưa
Anh thích ta cầm tay bên nhau thật sến súa
Tình yêu bây giờ nhanh, tình yêu như chồi xanh, cây chưa kịp ra cành, quả đã ra nhanh
Anh mơ 1 tình yêu như quả chín trên cây
Quả rụng xuống và đất sẽ ôm lấy
Cũng giống em ngày xưa dang vòng tay để ôm anh
Tình yêu của chúng mình, từng như đất với cây

➤SUBSCRIBE Youtube: : http://popsww.com/khacviet
➤FOLLOW Instagram: http://www.instagram.com/khacvietmusic/
➤FOLLOW Facebook: http://facebook.com/khacvietsinger
➤FOLLOW Website: http://khacviet.vn
KHACVIET HIENDAI POPS YINYANG VHD NHACTRE

Hiện Đại | Khắc Việt | Official Music Video

Drake – TSU (Audio)


Official audio for Drake “TSU” off the new album ‘Certified Lover Boy’ available everywhere now: http://drake.lnk.to/clb
Subscribe to Drake on YouTube: http://drake.lnk.to/subscribe
Connect with Drake:
https://instagram.com/champagnepapi
https://facebook.com/drake
https://twitter.com/drake
https://www.drakeofficial.com
Official “TSU” Lyrics:
Yeah, we back
What’s up, ladies?
Swishahouse, baby
What’s up to all the ladies on the north side, south side, east side, west side?
What’s up in Bay City?
What’s up to all the ladies in Louisiana?
What’s up to all the ladies in Dallas, Austin, San Antonio?
Marshall, Prairie View, it’s going down
Wharton County, Texas City, HTown, baby
TSU ladies
She moved out of state and shit done went left, she’s seekin’ forgiveness
She used to dance, but she want a loan to start up a business
Her daddy is not around, her mama is not around
I watch her climb to the top of the pole and then get to slidin’ down
I make it rain in this bitch, I make it snow in this bitch
She tryna get out of the mix, shawty is goin’ legit
Shawty is goin’ legit, me, I’m supportin’ this shit
This is a story, it came from my life and I’m just recordin’ this shit
I’ma just give it to you direct, instead of me throwin’ this shit
You know you important and shit
You know I’m supportin’ this shit
We used to do pornos when you would come over but now you got morals and shit
I got like four on the wrist and an adorable kid
I got a Drac’ in the studio, and I don’t just mean that I’m in this bitch
Please make the most of this shit
Don’t just come close to some shit
I give you this bread, you run me some head
And then you go glow up a bit
She moved out of state and shit done went left, she’s seekin’ forgiveness
She used to dance, but she want a loan to start up a business
Her daddy is not around, her mama is not around
I watch her climb to the top of the pole and then get to s—
I make it rain in this bitch, I make it snow in this bitch
She tryna get out of the mix, shawty is goin’ legit
Shawty is goin’ legit, me, I’m supportin’ this shit
This is a story, it came from my life and I’m just recordin’ this shit
Her daddy is not around, mama is definitely not around
She got a business plan, but she just ain’t had time to write it down
Stay with her sister now, she got a man, but he out of town
Soon as he out of town, they hop in his whip and they ride around
I watch her climb to the top of the pole and then get to slidin’, slidin’
Thought about trappin’ a player before, but that just ain’t right, right
Look in the mirror if you wanna look at some things on the bright side
You popped a 325, you feelin’ too good to worry tonight
She moved out of state and shit done went left, she’s seekin’ forgiveness
She used to dance, but she want a loan to start up a business
Her daddy is not around, her mama is not around
I watch her climb to the top of the pole and then get to s—
I make it rain in this bitch, I make it snow in this bitch
She tryna get out of the mix, shawty is goin’ legit
Shawty is goin’ legit, me, I’m supportin’ this shit
This is a story, it came from my life and I’m just rec— ayy
Black boxes with the bow and rose
Zara heels bound to give ya Zara toes
Back that thing up, it’s a wide load, shawty
I don’t even know where the time goes, shawty
Know you got some brand new life goals
Baby blue, but you are not a baby, I know, shawty
I know, yeah
So, why you gotta be so hardheaded?
Why you wanna ask? Girl, you know what I did
Actin’ like you don’t already know what that is
Baby, just relax, I’m on your side
I will not discuss it with nobody
Neither of our pasts ’bout to go away
You made me forget about it anyway
I know, I know
Black boxes with the bow and rose
Little side hustle with the Fashion Nova
Know we both came from a broken home, shawty
Mom and daddy didn’t really get along, shawty
Heard you got some brand new life goals
Baby blue, but you are not a baby, I know, shawty
I know, know, know, know, know
Drake CertifiedLoverBoy TSU
© 2021 OVO, under exclusive license to Republic Records, a Division of UMG Recordings, Inc.

Drake - TSU (Audio)

นอกจากการดูบทความนี้แล้ว คุณยังสามารถดูข้อมูลที่เป็นประโยชน์อื่นๆ อีกมากมายที่เราให้ไว้ที่นี่: ดูบทความเพิ่มเติมในหมวดหมู่MAKE MONEY ONLINE

ขอบคุณที่รับชมกระทู้ครับ media แปล

Leave a Reply

Your email address will not be published. Required fields are marked *