本日のハイライト

本日はコーディングの授業2回目。
トップページナビから下の部分と下層ページを少しを制作しました。

時間ないので箇条書きで失礼。(ただただ眠いだけ)

Witdth:100%
Divはブロック要素。なので元々widthを指定しなければ、divの中に入っている子要素にwidth100%を指定すれば横幅いっぱいまで広がる

sectionタグ
一つのセクションに使用。→使う時は見出しhタグを必ず使う

flecbox
flexboxは基本的に初期値でflex-wrapがかかる

flex:1
display:flexをかけた親要素の子要素の片方のwidthは固定で決める 可変したい方はflex1をかけると残りのwidthが自動で決まる。

dlタグ
リストを表すタグ ついになってるタグ
<dl>親ボックス
<dt> タイトル
<dd>内容→ ddを増やして行く
Dlの中にはddかdtのみ dd dtの中には別のタグOK

Aタグの文字色変更
aタグにcolorのcssを記述。aの親要素に記述しても変わらない。

特殊文字
>山かっこはhtmlで書かない 特殊文字を使用。
> →&gt;
©→&copy;

横並びにする記述
ブロック要素をインライン要素に変えると横並びになる。
display:inline-block

:last-child/:first-child
並ぶタグの最初と最後にだけcssを当てたい場合に使用。
以下注意。↓
<p></p>
<li></li>
<li></li>
<li></li>
li:first-child と記述してもliの1番目ではなく、この場合はpタグが1番目(first-child)になるので要注意。要素の1番目と最後という考え方。

タグ+タグ
1つ目にタグ以降のタグにcssを当てる場合に使用
li + li→リストの次のリスト以降css当たる

テーブルのタグ
<table>テーブルにしたいtr,th,tdを加工タグ
<tr>1行
<th>タイトル
<td>内容
注意点:marginが効かないので余白を開けたい場合は縦方向の場合はタグの中にrowspan="2"、横に繋げたい場合はcolspan="つなげる数"。テーブルタグはちょっとややこしい。
いつも使う時に分からなくなるのでサルワカ見ながらやってます。https://saruwakakun.com/html-css/basic/table

dlタグ、タグ+タグは知らなかったのでまた勉強しよう。

今日は非常に眠い、というかベラボーに目が疲れているのです。
めちゃくちゃ細かい写真の修正を述べ10時間やったら目取れそう。。。

お休みなさーい。


この記事が気に入ったらサポートをしてみませんか?