零基礎也能快速上手！超直覺 HTML＆CSS 網頁設計 現場で使える Webデザインアイデアレシピ

小林masayuki（網頁設計師）

　　目前是自由工作者的網頁設計師，提供網頁設計、程式設計的一條龍服務。擅長簡單易懂的設計，主要負責建置中小型企業的官方網站。一直以來都透過Twitter（@pulpxstyle）分享自己的經驗以及可在網頁設計第一線應用的小祕訣與靈感。

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　我的商家