CANE Cafe

「一冊ですべて身につくHTML&CSSとwebデザイン入門講座」を参考に、見本のwebサイトを初めから作成しました。

そこから商用利用可能な写真やオリジナルのファビコン・アイコンをillustratorとPhotoshopで作成、差し替えました。

また、ボタンの装飾についてはただ色を変えるだけでなく、transitionとtransformプロパティを使用して0.3秒かけて色を変えたり、hoverしたタイミングで影ができるように変化も加えてよりボタンに見えるように工夫しました。

一番苦労したのは、CONTACTページのメッセージを入力するところだけ、白の背景が適用できず困ったことです。

chromeの検証ツールで確認したところ、原因はCSSリセット（ress.min）をlinkタグで読み込んだことでtextareaの装飾がリセットされ、上書きしようとしてもリセットのCSSが強くborder-styleとbackgroud-colorがnoneのままだったことでした。そこでCSSリセットをstyle.cssにソースごと記述し、textareaの上書きできない記述だけ削除したところ、白背景が適用されました。

うまく適用できないCSSがあった場合はchromeの検証ツールで細かく確認することで解決できることが学べました。