【ズルいWeb制作】2nd：100万円稼ぐまでの挑戦30【お問い合わせフォーム】

こんにちは、タビんちゅです。

目標はWeb制作で100万円稼ぐ！！

東京フリーランスが無料で提供している30DAYSトライアル（デイトラ）１stを完了し、２ndで学んだことを忘れないうちに書いていきます。

これからデイトラをはじめる人の参考にもなるかもです。

この記事を書いたタビんちゅは、

あと記事はサクッと書いているので、誤字脱字があったらすみません。

『2nd：DAY15』を学習中

https://www.daily-trial.com/lessons/web_site/courses/40074aa6/articles/13270530

【今日やること】お問い合わせフォームのコーディング

お問い合わせフォームは各ブラウザごとのデザインの差異が色濃く反映される『癖のある要素』らしい

くやしいけど未完成

お問い合わせフォームは難しい

フォームは、各ブラウザごとのデザインの差異が色濃く反映される『癖のある要素』で、ブラウザ間の差異を極力なくすようにコーディングするには

・まず全てのフォーム要素のデザインをフラットな状態にする
・その上にデザインを乗せていく

結果90％はデザインカンプを再現できました。のこり10%は調べたけどわからなかったので一旦保留にします。悔しい。

お問い合わせ種別の再現が上手くいかなかった。。。

スマホ版はこんな感じ。

レスポンシブは上手くdisplay: block;を使ったり、margin、paddingで余白の調整をして完成！

contactセクションのsassが上手く書けなかったのでCSS形式で書きました。sassのお手本コードが欲しいなあ。

参考サイト

フォームのCSSを初期化してオリジナルなデザインを再現しよう！

ひと口メモ

というわけで、今回はここまでです。『プログラミングは継続がいちばん大事。』ではでは。

人気No.1記事

Tweets by tabin_chu100