![見出し画像](https://assets.st-note.com/production/uploads/images/143500549/rectangle_large_type_2_6114d5465624ae16cce93daa48b99e8e.png?width=800)
職業訓練校日誌(5/30)
全班最後のWEBサイト制作の授業でした。
・フレックスボックス
親要素をクラス指定(左画面10~15行目)
HTMLでクラス指定したものを、色付けする際、
CSSは、「.○○(ドット○○)」で始まる(右画面3~5行目)
![](https://assets.st-note.com/production/uploads/images/143500155/picture_pc_abb36298f437096ad33ce9174a22ff88.png?width=800)
親要素をクラス指定し、フレックスボックス適用すると、
子要素も連動させることができる。
親要素→<div class=”container” >(左画面10~15行目)
display:flexをかけるために親要素でくくっている
子要素→<div class=” item”(右画面3~5行目)
・レイアウトを横表示にする(右画面3~5行目)
「.container{display:flex}」
![](https://assets.st-note.com/production/uploads/images/143500202/picture_pc_b0b08a8b9dbb93baf62f3ef205748a74.png?width=800)
![](https://assets.st-note.com/production/uploads/images/143500291/picture_pc_7f77a54b91054512192e6172384bd856.png?width=800)
・表示順を変更する(右画面5行目)
「flex direction」で変更する
※パソコンの表示とスマホの表示を変える場合に使う
![](https://assets.st-note.com/production/uploads/images/143500294/picture_pc_e984b5a03a67ff292aa6fe40993aad92.png?width=800)
![](https://assets.st-note.com/production/uploads/images/143500303/picture_pc_75c9ea025c25d547d8f903b1c54895c7.png?width=800)
・子要素を折り返し(右画面6行目)
「flex wrap」で画面幅で折り返して表示する
![](https://assets.st-note.com/production/uploads/images/143500310/picture_pc_027f907b381a0cd854062ee76bdf9408.png?width=800)
![](https://assets.st-note.com/production/uploads/images/143500322/picture_pc_f2b1d3347d3f00f00df586ac1fe17baa.png?width=800)
・バランスよく整列させる(右画面7行目)
「justify content」で要素を等間隔で配置する
「justify content:space between」は便利。
(「JCSB」と入力すると候補に出てくる)
![](https://assets.st-note.com/production/uploads/images/143500330/picture_pc_0f2f3fb8d09339a899b0da4cb76d10ce.png?width=800)
![](https://assets.st-note.com/production/uploads/images/143500333/picture_pc_e5a03ab11892fa6536b619b2bdc2a9b3.png?width=800)
「space around」だと左右に余白が出る。(右画面7行目)
![](https://assets.st-note.com/production/uploads/images/143500350/picture_pc_15dd78afcdfb1637f7a8e4dec4c84d50.png?width=800)
![](https://assets.st-note.com/production/uploads/images/143500360/picture_pc_eab3e730ab92ec914db0212a2f110d7f.png?width=800)
・リセットCSS(サニタイズCSS、レスCSS)
ブラウザのデフォルトで余白が入る。(ブラウザごとに異なる)
それをリセットするのが、リセットCSS。どのブラウザでも同じような
表示にしたいときに使用する。
※リセットCSSを先に読み込ませて、後に自分の書いたCSSを読み込ませる。
順番に気を付ける必要がある
・CSSで重複しているものをまとめる方法
フォントサイズや、テキスト表示箇所など、内容がかぶる場合は、
まとめることができる。
上部に「○○,○○{}」カンマでまとめる。
重複していない物は、それぞれ記載する
例)まとめた部分:右画面34~40行
それぞれ設定している部分:右画面41~44行と45~47行
![](https://assets.st-note.com/production/uploads/images/143500403/picture_pc_3365b240613e483070084089b2596f8c.png?width=800)
・Googleフォントでテキスト指定する
(https://fonts.google.com/)
Googleフォントで検索したフォントをテキスト指定する(15行目)
![](https://assets.st-note.com/img/1718014360260-RGlIuU6k1D.png?width=800)
・ボタンを設置する
(左画面43~45行目、右画面87~98行目)
・右画面89行目の「 display: inline-block」がボタンのように表示させる。
・右画面96~98行目の「hover」を設定することでカーソルを合わせると
色が変わる
![](https://assets.st-note.com/img/1718015553568-eYGudi0s5v.png?width=800)
・表作成を応用してフッター作成
(左画面46~66行目、右画面99~118行目)
表には、「table」タグを使用する。
「tr」表の1行を囲む
「th」見出し
「td」表のデータとなるセル
![](https://assets.st-note.com/img/1718015849091-CM6qO3iJVl.png?width=800)
今まで学んだことを活かし、作成したサイトがこちらです。
![](https://assets.st-note.com/img/1718016397599-ykHCYaZM1j.png?width=800)
たったの3日でサイトを作成できました。
まだまだコードを覚えていないためテキストを見ながらしか
できないですが、こつこつ作ってみようと思います!
この記事が気に入ったらサポートをしてみませんか?