作成ポイントclass名がページに1つしかないなら、.class名だけで認識してくれる。同じスタイルならCSSも1つでOKline-height:1.5em;は1.5に直す。emだと親に対して、になる。なしだとフォントに対して、になる。余白はpaddingやmarginをうまく使う。内を広げたいならpadding、外を広げたいならmargin。auto;は上下が0で左右がautoという意味。60pxはbottom60pxということ。4つ指定は「上」と「右」と「下」と「左」。10px;などにする!TOP画像(背景)widthは指定しない。background-sizeをcoverにする!!ことで横いっぱいにしてくれる。指定する!!(height:650px;とするとどんな画面でも650px;になっちゃう)※一画面を、とかがなければmax-widthで指定するだけ。mainで指定しておくと良い。4vh;などと指定する。(w=H指定したうえで、border-radius指定しないと正円にならない)%やvhで指定すると、画面幅変えても変化してくれるが、pxで指定すると、固定になる。POINT11ネモフィラ全体をdivで囲み、2ネモフィラの説明テキストをdivで囲み、3ネモフィラの画像をdivで囲む。30%;藤・ポピーも同じことをやる。画像と文章間のpadding空ける!長い文章で<br>は極力入れない!レスポンシブ版の時困る。→希望の幅にしたいならpadding-left(right):〇%;を入れる!隙間を作ってくれるので文字送りになる。文字を画像の縦比率の真ん中に置きたい。align-items:center;を親に書く。flex;と同じところ。middle;を書く方法もあるが、複数タグがある時はうまくいかないかも。メディアクエリの書き方参照。POINT1のborder装飾についてborderの内側の余白はpadding、borderの外側の余白はmargin!!希望の位置に装飾線を置くにはトータル100%になるよう、textのwidth:50%;、margin:20%;、imgのwidth:30%とする!そしてメディアクエリでははみ出ておかしくならないよう、margin:0にする!ナビ(全面にするには)mainの中に入れているので、親がmax-width:960px。50vw);をnavプロパティに入れる!(100vw:親要素に関係なく、全体にしてくれる。&全体の50%から960pxになってるところの50vwを引き(480px的な)真ん中にあることでできてる、左余白を消す。center;などでいける。POINT1、2、3の黄緑見出しについて普通にbackgroundを指定すればOK。block;なので、横100%取ってしまい横一列黄緑になってしまう。inline-block;を指定することでそこの内容部分だけ黄緑にしてくれて、□になる!途中の前売り券はこちらについてbottonタグは使わず、pタグ内にaタグを入れる!bottonタグ内にaタグ、という概念はない。最後の購入ボタンだけは、bottonタグでsubmit。→この飛び先については授業でやらない。block;にすることで、paddingクリックでも飛ぶようになるpaddingはaタグに書くmarginの相殺防止のため、pのmargin-top:100px;、その上の.toptextのbottomにmargin-top:100px;と記載。1つ目の前売り券はこちらボタンは1つのdiv内でのことなので仕方ないが、基本は大きい塊(親)の下にmarginは入れたほうが良い。2つ目の前売り券はこちらボタンがそう。大きい枠で考えることが大事!!!大きい枠と大きい枠の間のことをいじりたいのか、枠内のことをいじりたいのか%やremなど、どの単位を使えばよいか基本は使いやすいものを使うでOK%やvhなど単位で指定すると、画面幅変えても変化してくれるが、pxで指定すると、固定になる。marginやpaddingは、固定でも画面幅を変えても変にならないので、pxでもよいその項目に対して何倍、なら、単位なしでOK(line-heightのみ?)親に対して、なら、%やemやremを使う。font-sizeは親(ベース)→子→孫で継承アリで考えるのが%やem。この場合でも親(ベース)→孫で考えるのがrem。https://www.pc-koubou.jp/magazine/23912=remが使いやすい!!※ベースのfont-sizeの決め方(元々は16pxだが、計算を楽にするために、わかりやすい10pxとするやり方)1湊先生はリセットCSSにfont-size:62.5%;って入れてる=10px。標準を10pxとして、各項目に書いていく。2直接style.cssの一番上の方にhtml{font-size:62.5%}って書く!※小数点が多くなってもよければ、16pxのままでもOK高さに対して、なら、vhを使うline-heightは単位なしにする。vwはスクロール込みでの表示幅に対して何%なので、わかりづらいので基本は使用しないほうが良い。%は親に対して何%なので、使いやすい。正方形を作りたいときは、vwを使うとよい。widthとheightを同じvw設定すれば、正方形になる!!横30を縦にも使う、という考え方のため。id~で□の入力部分作成。forはidに対してのラベルだよ、と12を紐づけしている。□の入力欄が小さくても入力欄だ!と反応してくれる。chromeなどで見たとき□クリックすると候補を出したりしてくれる。nameは送信先で必要になるらしい。forもidもnameも必要!なので書く。同じスタイルなのでclassは不要。div{}で、formの中のdivすべてスタイル適用、になる。30px;}で、すべてのdivに付けられる。擬似クラスを指定して、最後の子だけスタイル変えて!ってやる。60px;}↑擬似クラスは不要かも。bottunにmargin-top:60px;を入れればよいから。マージンの相殺気にして両方入れる保険を考えないなら。botton{}でスタイルつける。auto;を置く!初期値だと大元のこれが左に寄っているのでうまくいかない。「メールアドレス」だけ長くて改行されてしまうインライン属性であるラベルは普通に横並びになるが、widthなど大きさを指定したいので、display:block;を指定。...普通なら縦並びになってしまう。→親でdisplay:flex;で指定することで、子にdisplay:block;を入れても縦並びにならない。display:flex;を指定することで、inpudも先頭ぞろえになる!!labelは文字数を統一して揃える→width:7em;と指定。文字数の大きいメールアドレスに合わせる。人数の項目は7em;では大きすぎて改行になってしまうので、3歳未満の4em;にした方が良い。class名つけて他のlabelと分けた。メディアクエリでは縦並びにしたいlabelやmemberpは、それだけでwidth:100%;となるよう指定する。(人数のlabel・inpudは別。divやformにpaddingやmarginを置く!inpudは先頭ぞろえ、widthも合わせたほうがきれい。2em;width:50%;※ただし、明らかに文字数が少ない人数などのinpudは小さくてOK。今回はwidth:10%;にした。2em;に合わせ、labelのline-heightを2にする※きれいに揃えることを考えなければ、brにclassつけて改行させるのもありだが、揃えたほうがきれい。auto;が効かないとき1親のwidthを指定しているか?指定していないと動きようがない。width=100%とか指定する2子のボックスが100%になっていて動けないのでは?はみ出した分を親に入れたい例:親から子がpadding20px、border10px、margin20px分はみ出している。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。