Lesson19「実際にHPを作ってみよう!part4」

この練習は本入部生のみ閲覧できます。

本入部はこちら

学習概要

とうとう最終回!お問い合わせフォームのスタイルを作って完成です!

補足

ログインが必要です

この練習でわからない所を質問する※部活外の質問はできません

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson19「実際にHPを作ってみよう!part4」の内容※SEO用のため読めません

今回はとうとう最終回です。


前回まではトップページのスタイルを作っていきました。今回はお問い合わせフォームのスタイルを作っていきたいと思います。


お問い合わせフォームを開いてみると前回までに指定したスタイルがを照らすホームに持っ適用されてますねを開いてくださいあったら保存しましょうブラウザで更新をしていますそうするとこのようにおやつをホームの下に予約が出来ましたねスタイルの行動見てみると ID 属性がコンタクトに対してマージンボトム下のマージンが指定されています ID 属性がコンタクトの様子はこれですね次にスタイルシートにこちらの行動を変えてみてください終わったら保存しましょう保存したらブラウザを更新していますそうするとこのようにおやつのホームが出来上がりました見るとまずフォーム要素に対してスタイルが指定されています form 要素はこれですねばーるどす50%になってますのでこの場合親の要素 Section 要素ですねのサイトは移動するのクラス属性が付いているので980ピクセルその契約ピクセルに対しての50%になりますそしてマージンをゼロを打とうとすることでボックスを中央揃えにしていますそして最後にフォントサイズでフォントの大きさを指定してますねこれスタイルを外してもですね特に何も変わらないですなぜかと言うとその下の input textarea 要素に対してフォントサイズが指定されているのでそちらの方が予定されていますのでこちらのフォーム要素に対してのフォントサイズは消してしまって大丈夫です次に input 要素と textarea 要素に対してスタイルが指定されていますその要素はこれですねフォントサイズでフォントの大きさが指定されています来てマージンボトムでホーム同士の予約を作っています次は今までに見たことがないようなスタイルの指定方法ですね input 要素なんですけれどもか小学校の中に Type =テキストと格闘 input 要素で勝つタイプ属性がテキストのものに対してスタイルを指定することができます TYPE 属性がテキストのインプットはこちらですね適用されているスタイルはまずはアイドルですね親要素の横幅いっぱいまで広げていますそして8で高さを指定していますまたホームにはデフォルトで変な枠線がついてしまっているのでそれをボーダーなんとすることでボーダーをなくしていますそしてバックグラウンドで背景色ですね次に padding で中の予約を指定しています最後に前回もありましたボックスサイジングで枠線や padding をボックスの大きさに含めています次は textarea 要素に対してスタイルを指定していますねこれも作業のインプットとほとんど同じですだからちょっと違うぐらいですねで奇数の場合は殺すローズで横幅縦幅っていうのを決められるんですけれどもスタイルシートでさらに横幅縦幅を決めてしまっていますそして最後は input 要素で勝つタイプ属性がサブミットのものに対してスタイルが指定されています TYPE 属性がサブミットのものはこちらですね送信ボタンになります適用させているスタイルはまず background 背景色ですねとしてデフォルトでついてしまう枠線をボーダー何で外していますまたパディングで上下左右の予約を指定していますそして最後はフロートライトとする事で要素を右揃えにしていますこれでお問い合わせフォームそしてトップページが完成になりますはいお疲れ様でした今回で皆さんは HTML CSS 部を卒業になりますこれで基本的なホームページはつくようになりましたので次は JavaScript jQuery 部でホームページに動きをつける方法を学んでいきましょう