【受講記録】デイトラWeb制作コース初級編DAY6

はじめに

2024年10月からデイトラのWeb制作コースの受講をスタートしました。

アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。

OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。

初級編DAY6の押さえておきたいポイント

pictureタグ

PCとスマホで表示する画像を切り替えしたい場合、pictureタグを利用する。
このタグを使えば、任意の画面幅で画像を出し分けることができるようになる。
スマホとPCで違う画像を表示させることはよくあるので、imgタグではなくpictureタグを使いましょう。

PCとスマホでの切り替え点（ブレイクポイント）のピクセルを指定するが、PCとスマホの分岐点は768pxが一般的。

sectionタグ

sectionタグの中には、hタグが必ず1つ以上存在しないといけない！

隣同士の要素に対して空白を開けたい場合

クラス名をプラス（+）で繋いで、定義してあげればよい。

	.about-text + .about-text {
	  margin-top: 16px;
	}

background-imgタグ

background-img にはポジション(background-position)とサイズ(background-size)の記述が必要。

 .shop {
    background-image: url(../img/bg-shop.png);
    background-position: center center;
    background-size: cover;
    padding: 60px 0;
  }

コーディングするうえで気をつけたいこと

表示するテキストがあり、その参照元が存在する場合は、手打ちではなく極力コピペを利用する！
誤字脱字に気づかなかったり、気づきにくくなるので、参照元がある場合はコピペしたほうが無難。

どうしたら効率的にコードが書けるかを意識しよう！

共通クラスの一部だけ変更したいとき

HTMLタグには２つのクラスを持たせることができるので・・・
一部だけ変更したいHTMLに追加でクラスを指定し、その追加クラスにだけCSSを設定してあげると、共通でありながら部分的に見た目を変えてあげることができる。

<!-- HTML -->
<h2 class="section-heading section-heading-l">
  <span class="section-heading-main">Shop</span>
  <span class="section-heading-sub">ー ショップ情報 ー</span>
</h2>

/* CSS */
.section-heading {
  text-align: center;
  margin-bottom: 40px;
}
.section-heading-l {
  color: #fff;
}

formタグ

formタグの中にformパーツを使って定義する。

inputタグ：入力エリア
buttonタグ：ボタン
textareaタグ：複数行の入力エリア
selectタグ,optionタグ：選択リスト
labelタグ：項目ラベル

これらのフォーム関連のタグにはbodyタグで指定したfont-familyやfont-sizeなどが適用されないので要注意！！

placeholder

入力フォーム(form)の中のサンプル文字をプレースホルダー(placeholder)という。

クラスではなく、formの中のplaceholderの色も変更することができる。
その場合は、クラスと:: コロン2つでplaceholder を指定し、CSSで色を指定する。

<!-- HTML -->
<form action="" class="form">
 <input
  type="email"
  class="form-imput"
  placeholder="sample@sample.ne.jp"
/>
 <button type="submit" class="form-submit">SEND</button>
</form>

/* CSS */
.form-imput::placeholder {
  color: red;
}

初級編DAY6の追加で調べたいことメモ

• 入力フォームのベーシックな作り方、バリエーションを簡単に知っておこう！

初級編DAY6の感想と記録

なんとなくコーディングのパターン、雰囲気がちょっとだけわかってきたような・・・
わかっていないような・・・笑

共通パーツを作るか否かは、コーディング着手するまえにしっかりとイメージしておいたほうが良さそう。
複数のクラスを適用させることができる点は頭から漏れやすい気がするので、常に意識できるようにしたい。

マージンにするのか、パディングにするのかはまだやっぱりよくわからない。
数をこなせばわかるようになるのかな・・・

いったん、雰囲気は理解しつつ、大きくつまずかずに一通りコーディングできたことはよかったと思うおう！

DAY6 完了日　：　2024年10月23日（水）
DAY6 所要時間　：　4.5h
Web制作コース 初級編Total ：　13.5h