前言

這本網頁設計創意集是根據我在Twitter介紹的網頁製作小祕訣撰寫，書中也進一步說明了這些小祕訣的原理。

．曾經學過HTML與CSS的基礎，想要進一步學習的人
．一路以來都是自學，想參考別人的程式碼的人
．想讓自己的程式碼變得更簡潔的人
．想知道常見的某個網頁設計該如何撰寫的人

上述這些族群都是本書的目標對象。本書的主題是「讓大家光是看到網頁設計，就知道該使用哪些HTML標籤與CSS語法」，也會進一步透過圖片說明那些沒辦法在Twitter說清楚的網頁設計靈感。

本書整理了許多能於網頁設計第一線應用的內容，主要包含網頁設計常見的「背景、圖片、照片裝飾」「標題與文字的裝飾」「版面編排」與「按鈕設計」這四大設計類別，也包含「聯絡我們表單」的介面該如何撰寫，以及藏在Google搜尋結果頁面背後的結構化資料語法，另外還會介紹一些方便網頁設計、網頁程式撰寫的網路服務。

如果本書能成為初出茅盧的網頁設計師的武功祕笈，或是作為你的設計公司的新人教育教材使用，那真是作者無上的榮幸。

2022年1月
小林masayuki

前言

這本網頁設計創意集是根據我在Twitter介紹的網頁製作小祕訣撰寫，書中也進一步說明了這些小祕訣的原理。

．曾經學過HTML與CSS的基礎，想要進一步學習的人
．一路以來都是自學，想參考別人的程式碼的人
．想讓自己的程式碼變得更簡潔的人
．想知道常見的某個網頁設計該如何撰寫的人

上述這些族群都是本書的目標對象。本書的主題是「讓大家光是看到網頁設計，就知道該使用哪些HTML標籤與CSS語法」，也會進一步透過圖片說明那些沒辦法在Twitter說清楚的網頁設計靈感。

本書整理了許多能於網頁設計第一線應用的內容，主要...

Chapter 1　背景、圖片、照片裝飾
1　在照片下方鋪一層錯位的背景色
2　利用錯位的斜線背景裝飾照片
3　利用錯位的點狀背景裝飾照片
4　讓拍攝主體的陰影位移，藉此突顯拍攝主題
5　在照片套用斜線外框
6　在角落裝飾三角形
7　裁切邊角
8　讓標誌的白背景變成透明色
9　照片濾鏡
照片濾鏡　斜線
照片濾鏡　圓點
照片濾鏡
10　改變圖片的形狀
11　利用文字的形狀裁切圖片

Chapter 2　標題與文字的裝飾
1　標題
疊合雙色線的標題－偽元素
疊合雙色線的標題－linear-gradient
在左右兩側配置線條的標題
對話框式的標題
製作以手寫英文字母為背景的標題
搭配英文字母與線條的標題
搭配數字與線條的標題
裝飾簡單的標題
2　文字裝飾
像是螢光筆描繪的底線
強調每個文字
波浪線
背景色（box-decoration-break）
如同筆記本般的分割線

Chapter 3　按鈕設計
1　彼此錯開的斜線背景與背景色
2　彼此位移的框線與背景色
3　斜線框與背景色
4　漸層
5　背景色與線條
6　背景色、點與線條
7　背景色與簡潔有力的箭頭
8　在圓角矩形背景套用背景色與植入簡易版箭頭
9　背景色與箭頭
背景色與箭頭（外部連結）
10　背景色與新增視窗
11　在背景色與邊角加上三角箭頭
13　扭曲的圓形與簡易版箭頭
14　壓在圓形上面的文字與簡易版箭頭
15　圓與線

Chapter 4　版面編排
1　Flexbox版面編排
水平並列的版面
跨行水平並列的版面
全域導覽列
標頭編排
麵包屑列表
分頁導覽列版面
水平排列的內容的垂直居中對齊
讓水平並列的第偶數個內容採用不同的格式
表單版面
定義列表版面
只有卡片版面的按鈕靠下對齊
2　只有照片是滿版配置
3　Pinterest風格的卡片版面
4　時髦的上下左右置中配置
5　陽春版輪播版面
6　陽春版折疊式選單

Chapter 5　聯絡我們表單
1　限定聯絡之際的必要項目
2　讓輸入欄位的數量減至最低
3　根據內容拆解輸入欄位
姓名
地址
4　讓標籤與輸入欄位垂直排列
5　依照方便輸入的順序排列與分類欄位
6　根據郵遞區號自動輸入地址
7　表單自動填寫功能
8　依照輸入的內容指定type屬性
9　打造在智慧型手機顯示也容易點擊的設計
10　讓必填項目更容易辨識
11　在表單之外撰寫標籤、例句與補充內容
12　在每個項目配置錯誤訊息
13　利用HTML撰寫陽春版表單驗證功能
14　注意「送出」「修正」按鈕的設計與位置
15　增加聯絡方式
16　在感謝頁面刊載內容

Chapter 6　可於第一線使用的網頁工具以及素材網站
1　網頁工具
Beautiful CSS 3D Transform Examples
Generate Blobs
wordmark
Frontend Toolkit
Neumorphism.io
Griddy
2　照片
Pexels
Free Stock Photos – BURST
GIRLY DROP
O-DAN
3　插圖
soco-st
Loose Drawing
恰到好處的插圖
shigureni free illust
插圖導覽
Linustock
Open Peeps

Chapter 7　Google搜尋結果頁面的對策
1　在維護網站之際
2　報導資訊
3　麵包屑列表
4　常見問題
5　我的商家

Chapter 1　背景、圖片、照片裝飾
1　在照片下方鋪一層錯位的背景色
2　利用錯位的斜線背景裝飾照片
3　利用錯位的點狀背景裝飾照片
4　讓拍攝主體的陰影位移，藉此突顯拍攝主題
5　在照片套用斜線外框
6　在角落裝飾三角形
7　裁切邊角
8　讓標誌的白背景變成透明色
9　照片濾鏡
照片濾鏡　斜線
照片濾鏡　圓點
照片濾鏡
10　改變圖片的形狀
11　利用文字的形狀裁切圖片

Chapter 2　標題與文字的裝飾
1　標題
疊合雙色線的標題－偽元素
疊合雙色線的標題－linear-gradient
在左右兩側配置線條的標題
對話框式的標題...