[CSS]背景画像を固定させてスクロールで切り替えるパララックス

背景画像は固定されていて、他の要素（文章とか）だけがスクロールされる。さらにスクロールしていくと、いつの間にか背景画像が変わっている。パララックス（視差効果）を用いたシングルページサイトをよく見かける。

そんなウェブサイトをCSSだけで実現する。

CSS3 box-shadowを使って画像の輪郭（境界線）をぼかす

ウェブサイトに画像をそのまま貼ると、輪郭（境界線）が強調され浮き出てしまい、変に目立ってしまうことがある。画像の輪郭をぼかせば、「ふわっ」となり背景に馴染む。
ということで、box-shadowプロパティを使って画像の輪郭をぼかす方法をまとめる。

スライドショーみたいに1ページずつスクロールするウェブサイトをつくる

スライドショーみたいに1ページずつスクロールするウェブサイトをつくりたく、いろいろ調べた結果、One Page ScrollというjQueryのプラグインを使うことにした。
いまならfullPage.jsだろ？というツッコミを受けそうだけど、そこまで多機能でなくて良いし、なにより軽量でシンプルなほうが良いという人にオススメだ。

CSS3 背景画像だけにガウスぼかしをかける方法

モダンなシングルページレイアウトのウェブサイトで、背景画像をすりガラスのようにぼかしてタイトルを強調させるデザインをよく見る。多くの場合は画像自体にあらかじめフィルタをかけているのだが、CSS3を使うとfilterプロパティを使うだけでblur効果をかけられる。

ただ、ちょっと面倒だったので方法をまとめておく。

HTML/CSSだけで縦書きの入力フォームをつくる

和風サイトを開発しようと思い立ち、「もちろん“和風”なんだから縦書きでしょ！」と安易な気持ちで始めたのだが、かなり苦労したのでここにまとめておく。

heading（h1タグやh2タグ）やparagraph（pタグ）などの通常のテキストは、writing-modeプロパティにvertical-rlを指定するたけで簡単に縦書きにできる。
しかし、入力フォーム（inputやtextarea、select、button）はwriting-modeプロパティの指定だけでは縦書きにできなかった。

そこで、HTMLとCSSだけで縦書きの入力フォームをつくる方法をまとめる。（かなり脳筋なやり方だけど）

inputやtextarea、buttonなどにfont-familyやfont-sizeが適用されないときの対処法

ウェブサイトを開発しているとき、なぜかinputタグやbuttonタグにfont-familyやfont-sizeで指定したスタイルが適用されなかった。他にもtextareaタグやselectタグ（ドロップダウンリスト）にも適用されなかった。

調べてみたところ、MDNに答えが載っていた。