★★★★★日本暢銷突破 3 萬冊！史上最可愛的網頁設計書來啦！
怎樣都學不會 HTML 和 CSS？別放棄，跟著可愛的水豚君一起學習吧！

現在人人都需要在網路上自我宣傳和賣東西，做個網站來推銷自己或產品，似乎是必備的技能。
如果想學做網頁，大家都說一定要學 HTML 和 CSS，但我們不是資訊背景出身，看那些程式碼好像看外星文，怎麼學都記不起來，學了一堆標籤最後只會寫 「p」 和 「br」......。
如果你也是這樣，這本可愛的書應該可以讓你重拾學習的興趣！

【小水豚的故事】

本書的主角是一隻小水豚，他叫做阿藏（全名：水豚藏）。
阿藏平常在農場工作，有一天在超市遇到了女主角「水豚子」，令他心動不已！
貿然告白好像會嚇到人家，那不如來做個網站自我介紹吧？
水豚藏：可是我不會做網站啊啊啊！

於是小水豚決定拜託自己的好朋友：擔任前端工程師與網頁設計師的竹内夫婦，也就是本書的兩位作者。
本書就這樣，讓你跟著小水豚一起從零開始，走上網頁設計的學習之路。

第一個範例，是水豚的個人網站，把自己的 IG 和推特帳號集結成一頁，看起來好潮喔！
第二個範例，是水豚的農場部落格，透過文章讓對方更了解水豚的工作日常。
第三個範例，是水豚的婚禮邀請表單，因為水豚藏終於追到水豚子了！
第四個範例，是水豚餐廳網站，因為水豚夫婦決定開個美食餐廳。
做完這些範例，不只水豚得到美滿人生，身為讀者的我們也學到了超實用的網頁技術呢！

【作者的話】(節錄自本書序)

當你拿起這本書，表示你多少也想過「如果可以學會做網頁好像也不錯」，對吧。甚至可能想過「說不定可以在家接網頁設計方面的工作……」、「說不定我也可以成為網頁設計師……」。
有這種想法很好，我們想跟你說，這絕對不是做白日夢。因為在筆者身邊就有許多只靠自學而成為網頁設計師的人，我們也是其中之一。
這本書是寫給「想從零開始學做網站」或「想要從事網頁設計工作」的人。主要概念就是「讓你開心地做出 4 個網站，並在過程中自然地學會相關知識」。

我平常是一位教學生寫程式的講師，學生常常問我「老師您有沒有推薦的書？」
我個人認為，無論是買書或是上課，推薦給初學者的方式就是「不會受挫，可以持之以恆地愉快學習」。剛起步的階段，我並不建議去讀那種整本都是專業術語的艱深書籍。我覺得書一定要讓你願意動手寫寫看 HTML/CSS，這才是進步的捷徑。因此，這本書減少了紙上談兵的理論，盡量改以實作（實際練習寫程式）為主。我們想讓你體驗「親自製作網站的樂趣」，並在練習過程中自然地學會相關知識。
為了提升學習樂趣，書中穿插可愛的吉祥物與漫畫來維持明快的節奏，並以淺顯易懂的文字來說明。我們也會隨時分享自己多年的設計經驗，讓你學到許多更有效率的做法。
希望本書提供的知識可以幫助你「成為理想中的自己」，也希望本書可以讓你覺得「網頁設計不難但是博大精深」，「原來做網站很好玩！」

【Amazon 讀者好評節錄】

★「就算你已經買過兩三本 HTML 書，也可以再看看這本」
我已經學過 HTML/CSS了，但我實在太不熟了，以至於我在用不到的時候就會馬上忘光，需要的時候又跑去買書，這是我第三次買書了。這本書很適合我這樣的初學者，它寫得非常仔細，我在看其他書時都有些反覆看仍無法理解的地方，這本書可以幫助我理解。另外它有針對 Flexbox 和 CSS 格線佈局的練習，我也覺得很實用，讀了有幫助我理解。
全書穿插著可愛的水豚插畫，我覺得這讓我輕鬆多了，讀起來比較不會痛苦。因此我對本書非常滿意。

★「我被可愛的圖片騙進來了……不過結果是好的方面啦」
我讀過很多網頁語法的書了，但我實在無法擺脫討厭和不想學的感覺。但如果是這本書我就會想買。
我買這本書是因為它在 SNS 上的評價很好，讀了以後的感覺是，可以學到如何把 PC 網站變成一個手機版網站，反之亦然。我從來沒有寫過以手機瀏覽為優先的語法，這是個體驗的好機會。另外，全書穿插可愛的水豚圖片，讀起來感覺很輕鬆。這本書雖然有輕鬆可愛的插圖，內容可是很紮實的喔！
本書特色:
★超可愛小水豚榮登日本各大書店排行榜！
★眾多初學者淚推：「真希望早點遇見這麼可愛的網頁設計書！」

【插畫風格輕鬆可愛，內容也是乾貨滿滿！】
★排版技巧最齊全：單欄式、兩欄式、彈性版面、格線佈局，各種版面都難不倒你
★手機電腦全適用：手機版、電腦版、RWD，不必煩惱該做哪一種，作者教你切換的秘訣
★圖解概念最好懂：初學者學到頭昏的 Box Model、margin、padding 概念，看圖就能懂
★最新技術你也會：實做 Flexbox、CSS 動畫、CSS 格線佈局等進階技巧，讓你跟上最新的網頁設計潮流

【五大特色，拯救怎樣都學不會做網頁的你】
★最白話！跟你講人話，不講艱深術語，零基礎也能搞懂為什麼要這樣寫
★最漂亮！跟著書就能做出 4 個超美的範例網站
★最好懂！逐行逐字拆解程式碼給你看，原來 HTML 根本不困難
★最實務！帶你做出四大常見範例：個人網站、部落格、一頁式網站、多頁式網站，符合市場需求
★最可愛！全書穿插可愛的水豚吉祥物與趣味漫畫，讓你閱讀輕鬆無壓力

【四種超實用範例網站，看完這本書就能做出來】
★社群媒體入口網站
IG 簡介常見的個人 Link 網站，整合你的所有社群帳號，沒用過就落伍囉
★兩欄式網站：水豚農場部落格
想要架設部落格來寫文章，原來一點也不難
★一頁式網站：水豚的婚禮邀請
網路上最常見的一頁式網站，可以做表單也可以做購物網頁，用途超廣泛
★多頁式網站：水豚餐廳官網
想要架設具備豐富圖文的網站來展示商品？這個你一定要學會

【還有四大超值附錄免費下載】
★附錄 1 讓網站上線的方法（電子書）
★附錄 2 網頁設計備忘錄（CSS 格線佈局圖解、Flexbox 排版圖解、CSS 快速鍵對照表、CSS 簡寫速查表）
★附錄 3 實用網站大全（電子書）
★附錄 4 本書範例網站設計檔案（本書四大範例網站設計原始檔、Adobe XD 下載方式說明）

作者簡介：

【作者簡介】
■ 竹内 直人（Takeuchi Naoto）
曾在網頁製作公司與影片行銷公司擔任過總監、行銷人員、工程師等職務，2018 年獨立創業。現在是一名前端工程師，同時也運用實戰知識，擔任程式設計課程講師。

■ 竹内 瑠美（Takeuchi Rumi）
擅長包含 UI/UX 與行銷觀點的全方位視覺設計。擁有和許多創投公司合作的經驗，目前擔任新創企業的合作設計師。

■ Capybara Design
公司官網：https://capybara-design.com/
這是由竹内直人、竹内瑠美夫婦兩人組成的設計團隊，負責為各企業規劃與製作網站。
公司名稱的由來，就是兩人都超喜歡水豚（capibara）！
夫婦兩人目前共同經營社群帳號「每天一分鐘學會 HTML 與 CSS」（1日1分で学べるHTMLとCSS），經常分享網頁設計的實用知識，在 Instagram 擁有上萬粉絲追蹤。
Instagram：@html_css_webdesign
Twitter：@html_css_1min

【譯者簡介】
■ 吳嘉芳
東吳大學日文系畢，曾任職知名日商，現為專職日文譯者。
譯有：《邊玩邊學，使用 Scratch 學習 AI 程式設計專案大集合》、《Excel 終極函數辭典》、《看穿PowerPoint 潛規則，您也能做出超專業簡報》、《網頁美編的救星! 零基礎也能看得懂的 HTML & CSS 網頁設計》......等書。