Lesson18「実際にHPを作ってみよう!part3」

この練習には本入部生のみ参加できます。

本入部はこちら

学習概要

とうとう、トップページが完成します!ボックスの中央寄せや、ボックスの縦幅の揃え方、marginの相殺やpaddingやborderをボックスの幅に含める方法など実践的に使える内容を学んでいきます。

補足

ログインが必要です

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

ログインが必要です

この練習への質問一覧

ログインが必要です

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

では前回の続きをやっていきたいと思います。


まずはこちらの CSS のコードを変えてみてください終わったら保存しましょう。ブラウザで開いてみたいと思います。そうするとこのような形ですね。トップメニューが出来上がりました。CSS のコードを見てみるとまず ID 属性がトップなどのものに対して伝えるが指定されてます。


 Google Chrome で見てみたいと思いますそうするというのはここのことですねまずスタイルがフロートライトを指定しているので右寄せになっています BOX を右寄せにしていますこれを取ってみるとですねボックスが左寄せになりますデフォルトでは左寄せなのですね次にワイドストレートを指定してます横幅と縦幅ですねこのスタイルが指定されているなどというタグはブロックレベル要素ので横幅いっぱいに広がるはずなんですがこのワイドスケートを指定することでボックスの大きさを変えていますボックスの大きさを小さくして float right をすることでり行政にできるってことですねそしてポジションリラティブが指定されてますこれちょっともちもち説明します次に並ぶタグの中の A 沢に対してスタイルが指定されていますその要素はこれですねタグですその要素に対して指定されているスタイルというのは Google Chrome の開発ツールこれの右側を見てもらうとこちらにもそのスタイルというのが見ることができますたからここからはこちらの方を使ってみていきたいと思いますまず一つ目は padding が指定されてますねやたいが二つありますけれども10ピクセルの方が上下です15ピクセルの方が左右のペアリングを指定していますこのスタイル左のチェックボックスを外してみると伝えるを外すことができますパーティングをなくすとこの中**ても耳が詰まってしまうのでパディングで横幅を広げてあげてるってことですね次にカラーで文字色をつけています英単語というリンクタグはデフォルトの状態だとブラウザがで勝手に色をつけてしまうのでそれを伝えるシートレ変えています次にテキストデコレーションなんとして A タグリンクタグに特有の下線を消していますまたは本当サイズで文字の大きさを指定して本当 weight Bold として文字を太くしています次に並ぶエホバとはありますこれは鮭の栄養素の上にマウスのカーソルが乗っかった時のスタイルを指定していますテキストデコレーションアンダーラインとしているのでマウスのカーソルが乗っかると下線が表示されるようにしています次に ID 属性トップガムの中の UL タグ UL 要素に対してスタイルが指定されています UL 要素はこちらですねリーガル見てみるとまず8というのが指定されています次にはアイドルですねこの UL タグはボックスレベル要素なのでヘイトとは ID を指定してボックスの大きさを指定してあげてますそして position Absolute としてもとむとライトを指定しているので本来あるべき場所からボックスを移動させてますどこを基準にしてそこから移動させているかと言うと先ほど ID 属性トップにポジション寺ているが指定されてましたどのポジションリラティブを指定しておくことでその指定したボックスの左上そこがきじゅんいちになりますそのボックスを基準にして position Absolute で移動させているということですねとして元々 UL Li タグはリストのタグ七で丸いポッチがついてしまうんですけれども List STYLE なんとすることでその体を取り除くことができます次に ID 属性がトップの中の ult その中にある Li タグに対してスタイルが指定されてます float Left なので左寄せにしているということですね Li タグはこちらになります lio 様ですねブロックレベル要素なので本来だとこのように縦に並ぶはずなんですねですが float Left を指定することで横に並ばせることができますここまではトップメニューのスタイルですそして次にですねこちらのスタイルを書いてみてください秋終わったら同じように保存しましょうとしてブラウザで開いてみるとこのようになります真ん中に揃いましたね CSS を見てみ CLASS 属性がサイトワイドすのものに対してスタイルが指定されていますワイドすで横幅が指定されて混んで縦が0横がオートになってます CLASS 属性がサイトワイド酢の物はこのあたりのところですねメリットがとかアバウトだとかっていうところになります他にも減った部分もそうですねブロックレベル要素に対してワイドステー横幅を指定してあげていますそして混んで横の部分をオートにすることでボックスが中央揃えになるんですねブロックレベル要素を中央揃えにしたい場合には横のマージンをお取りしましょう次にこちらの行動変えてみてください秋終わったらまたは保存をしましょう裏技を更新してみるとこのような形に変わります行動見てみると Section タグの中の H 1タグ数 H 1タグに Class 属性タイトルがついているものにしているが指定されていますねクラス属性がタイトルの H 1タグはこれですねその要素に対して Font family でフォントの種類が指定されていますそして text ALIGN Center でテキストを中央揃えにしています次に ID 属性がアバウトメリットリクルートのものに対してスタイルが指定されていますこのように複数の要素に同じスタイルを指定したい場合にはカンマで区切って指定してあげます指定している要素はこちらですねあいり属性メリットだとかアバウトだとかっていうところですねそしてそれぞれの要素には margin TOP margin BOTTOM として上のマージンとしたのマージンを指定しています上下ともに80ピクセルですねこのようにマージンパディングというものはそれぞれ個別に指定することもできます次にこちらの行動を変えてみてください竹を割ったら保存しましょうブラウザを更新してみるとこのようにパネルが出来上がりました酒と書いた行動を見てみると CLASS 属性がはねるのものに対してまずスタイルが指定されています+属性がパネルのものは避けどのパネルこちらですねどんなスタイルが指定されているかと言うとまずバックグラウンドで背景色が指定されていますそしてボーダーで枠線が指定されています書き方は枠線の太さ惑星の種類枠線の色という形で書きますそしてボーダーラディウスでボックスのカードを3ピクセル丸くしていますとても混んで上下03 U 15ピクセルを取っていますまたパディングで内側の予約も取っています次にわいどすでかくボックスの横幅を指定しています30%という形でパーセント指定をしていますこれはですねこの要素の親の要素の横幅に対しての30%になります親要素 ID 属性メリットですねこれは980ピクセルに指定されているのでその980ピクセルに対しての30%という形になります次に float left でボックスレベル要素を横並びにしていますそしてボックスサイジングボーダーボックスとすると酒とはアイドルで30%と指定しましたその横幅の中にボーダーの幅や padding の幅を含めることができます通常 padding で指定した幅や枠線の幅というのはワイドショーヘイトで指定した大きさには含まれないですねそして最後に I hate と指定することでボックスの最小の高さを指定することはできます反対に MAX ヘイトという最大の高さを指定することができますこれを指定しておかないとボックスの中の文字数によってボックスの高さが変わってしまうのでちょっと見栄えが悪いのでみんヘイトを指定してあげることで最初の高さを揃えてあげてボックスの高さがみんな揃うという形になります次に Class 属性がパネルの中の H 2音に対してスタイルが指定されていますこれは文字色とテキストを中央揃えするだけですねそうしたら今度はこっちらの行動変えてみてください書き終わったらまた保存をしましょうブラウザを更新してみるとこのようにテーブル表が出来上がります行動を見てみるとまずテーブル要素に対してスタイルが指定されていますねテーブル要素はこちらです指定されているスタイルはまずバックグラウンドで背景色ですね今回は RGB かっこの書き方でやってますけどどちらで そしてボーダーが指定されていますそしてテーブル要素の横幅をその親の要素の横幅に対しての100%にしていますテーブルというのは中野文字によって大きさが自動的に決まってしまうので横幅を指定してあげて横幅いっぱいにしてあげていますそしてボーダーラディウスでボックスの角を丸くしていますまた padding でボックスの中の余白を指定してますねそして混んでたての予約を指定しているんですが特に変わりはないですねスタイル外しても俺後でちょっとまた説明したいと思いますそして text ALIGN Left でテキスト左揃えにしてフォントサイズでフォントの大きさを指定しています次に TH 要素 TD 要素に対して伝えるが指定されていますそれがこちらですね padding で内側の余白を指定していますしてボーダーボトムとすることで下の線だけをつけることができます今回はドットにしているので10線が引かれます次にテーブルの中の T ヘッドの中の TR の中の pH 要素に対してスタイルが指定されていますそれがこれですねカラーで文字色を指定して padding BOTTOM で下の余白内側の薬を指定しています先ほどと同じようにですねボーダーボトムを指定しているんですけれども俺スタイルを外してもですね特に何も変わらないですねこれは先ほどの TH TD 要素に対してボーダーボトムを指定していましたそれがこの要素に対してもスタイルが適用されているのでこのスタイルは必要ないということですねなので消してしまいましょう次にテーブルの中の T ヘッドの中の PR の中の TH 要素数+属性が辛い家のものに対して伝えるが指定されていますそれはこちらですね本当の色とフォントの大きさを変えています最後にテーブルの T ボディの TH 要素の文字色を変えていますね先ほどですね指定したテーブルに対してのテーブルに対しての margin 上下のマージンなんですけれども全然予約ができていないですよねこの場合こちらの行動変えてみてください ID 属性メリットに対して Overflow Hidden を指定しますこれを指定すると float 解除することができますのメリットの中のパネルに対してフロートが指定されていたのでフロントがずっと続いてしまったんですねなのでそれを解除してあげることでマージンがちゃんと予約は効くようになりますパラダイス猫のマージンなんですが ID 属性メリットにはマージンボトム下の余白を80ピクセルに指定していますでもその他のテーブルの要素に対しては上の文字ピクセルにしているはずですこれは実話ですね要素同士の間でマージンがかぶった場合どちらの指定が優先されるかというと大きいまあ子の方が優先されますなのでテーブルの方のマージン10ピクセルは相殺されて ID 属性メリットの方のマージン80ピクセルが適用されるということですねどうしてこのページの最後のスタイルを指定していきますお茶の行動変えてみてください酒割ったら保存しましょうブラウザを更新してみるとこのように空が出来上がりました行動を見てみるとまず振った要素に対してスタイルが指定されてますねちょっと様子はこちらですねフォントサイズで文字の大きさ後はマージントップで上の100が指定されていますただこの場合は上の要素の上下80ピクセルの周りの方が指定されていますのでこの margin TOP というのは必要ありませんなので撮ってしまいましょうその他のスタイルは今までに見たのと同じものですね今回はここまでにしたいと思いますと最終回です音痩せのホームのスタイルを指定していきたいと思います