小水豚教你做網站! 輕鬆學好 HTML / CSS 網頁設計 これだけで基本がしっかり 身につく HTML/CSS&Web デザイン1冊目の本 / 第一版

★★★★★日本暢銷突破 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

■ 竹内 直人（Takeuchi Naoto）
曾在網頁製作公司與影片行銷公司擔任過總監、行銷人員、工程師等職務，2018 年獨立創業。現在是一名前端工程師，同時也運用實戰知識，擔任程式設計
課程講師。
■ 竹内 瑠美（Takeuchi Rumi）
擅長包含 UI/UX 與行銷觀點的全方位視覺設計。擁有和許多創投公司合作的經驗，目前擔任新創企業的合作設計師。
■ Capybara Design
公司官網：https://capybara-design.com/
這是由竹内直人、竹内瑠美夫婦兩人組成的設計團隊，負責為各企業規劃與製作網站。
公司名稱的由來，就是兩人都超喜歡水豚（capibara）！

夫婦兩人目前共同經營社群帳號「每天一分鐘學會 HTML 與 CSS」（1日1分で学べるHTMLとCSS），經常分享網頁設計的實用知識，在 Instagram 擁有上萬粉
絲追蹤。
 

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

【Part 1】練習編寫 HTML
01 章：暖身練習
02 章：學習 HTML 的基本知識
【Part 2】建立社群媒體入口網站
03 章：學習 CSS 的基本知識
04 章：編寫社群媒體入口網站的 CSS
【Part 3】建立兩欄式網站：水豚農場部落格
05 章：編寫部落格網站的 HTML
06 章：編寫部落格網站的 CSS
【Part 4】建立一頁式網站：水豚的婚禮邀請
07 章：編寫線上邀請表單的 HTML
08 章：編寫線上邀請表單的 CSS
09 章：加上 CSS 動畫效果
10 章：製作響應式網頁設計
【Part 5】建立多頁式網站：水豚餐廳官網
11 章：網站的架設流程與網頁設計的基本知識
12 章：編寫餐廳網站的 CSS（手機版）
13 章：編寫餐廳網站的 CSS（電腦版）
14 章：運用網路資源製作 CSS 漢堡選單
15 章：網站上線前的準備工作