udemy html/css講座

メモ書き

レクチャー01

• SanitizeCSSで、各ブラウザで定義されているCSSを取り払ってシンプルな形にする。

• SanitizeCSSを検索しダウンロードする。CSSフォルダに入れる。

• <link>で設定する。SanitizeCSSは、他のCSSより上に記述する。cssは、上に記述したCSSよりも下に記述したCSSが　優先されて適用されるので。優先度の高いCSSを下に置くことになる。

• リセットCSSというのもある。これはすべてを取り払う。

• リセットCSSとサニタイズCSS、ノーマライズCSSのどちらがいいかというのではなく、どういうのを作るかによってどちらを使うか決まる。

• SanitizeCSSは、StyleCSSにインポートで参照すればHTMLに記述する必要はない。

• 上の階層のファイルを参照するときは先頭に「../」をつける。上の階層のさらにもう一つ上だと「../../」をつける。同じ階層であればなにもいらない。下の階層であれば「そのフォルダ名/」をつける。

• divは、divisionの略で、区分けするという意味。グループ分けするためにある。

• divはタグ単体で使われることは少ない。1個目と2個目のタグで見分けがつかなくなるから。class属性と使われることがほとんど。class=〇〇とすると〇〇のかたまりですよ、と見分けがつく。クラス分けをする。

• idは識別属性。forで関連付ける。idとforはセットなのかな。
  メアド入力欄でテキストのメールアドレスを押すと入力欄が自動で選択されるアレ。メアド入力欄の<input id ="mymail"～と、<label for="mymail">でidとforで紐づく。

 <p><label for="mymail">メールアドレス<span class="required">必須</span></label> <input id="mymail" type="email" name="mymail"></p>

• p,div,h1などは横全体をブロックとして使っている。labelはインラインなので、1行全体のブロックにはなっていない。

• インラインだと横のマージンは調整できるが上下ができない。上下も調整するならブロックにする必要がある。

• labelをブロックにしたいなら、CSSでlavel{display: block;}とやるとブロックになる。すると、マージンとかも設定できるようになる。

• 必須マーク？ラベルの作り方。labelのなかに入れ子で<span class="required">必須</span>とする。

• spanは、divとほぼ一緒で書いてもほぼ表示には影響がないタグ。divはブロックspanはインライン。divにすると行が改まってしまうから横に置きたいのでインラインのspanにしている。ちなみにrequiredは英語の必須という単語。

• span.requiredのrequiredhは恐らくspanでしか使わない。

レクチャー02

• メディアクエリーでレスポンシブ設定している

• classつけなくても「header h1」のようにヘッダーの中のh1を指定してCSSに書けばそれだけに適用できる