サイタWeb・デザインスクールHTML/CSS入門講座 神奈川 0から始めるHTML &CSS レッスンノート floatとflexboxについて、要素の配置について

floatとflexboxについて、要素の配置について

HTML/CSS入門講座のレッスンノート

レッスンノートって?レッスンノートって?

レッスンお疲れさまでした。

ご自分で本を参考にしながらホームページを作成中ですが、チェックしていただいた不明な点を、レッスンでクリアにしていきました。

○floatとflexboxについて
ナビをfloatしていたため、H1タグが回り込んで表示が崩れていました。
floatの概念について説明。
floatした場合、clear: leftで回り込み解除が必要。
ただし、最近ではfloatより簡単で応用が利くflexboxを使用することが多いので、flexboxの使い方も説明しました。


○要素の配置について
すべての要素が左寄せになっていたので、センタリングにして表示を整える方法を説明しました。


○デベロッパーツールの使用方法を説明
ツールの使用方法、修正してcssへ反映するまでの流れを一緒に作業しました。


●クラス名のつけ方について
絶対にこれといった決まりはありませんので任意でつけますが、後ほど参考になるリストをお送りします。
このレッスンノートを書いたコーチ

ホームページ作りやWeb制作の世界で活躍する講師がわかりやすくレッスン

新着レッスンノート

レッスンお疲れさまでした。 本日もテストサイトのhtmlとcssをチェックしながらレッスンを行いました。 今回の主なレッスンの内容は以下の通りです。 ○デベロッパーツールの使い方  ローカルと公開済みサイトの表示に差異があるとのことで検証 ○フォルダとファイルの管理について ...

レッスンおつかれさまでした。 ホームページを作る勉強をスタートしたいとのことで、本日はHTML/CSSのごく基礎的なお話をさせていただきました。 〇サーバー、WEBサイト公開の流れの確認 ○エディタ(VScode)のダウンロードと設定、使用方法の説明 〇ホームページ作成に必要な...

レッスンお疲れさまでした。 本日も修正していただいたテストサイトのhtmlとcssをチェックしながらレッスンを行いました。 前回のレッスンで指摘した、html内の不要なタグの削除や修正はきちんと対応できていました。 今回の主なレッスンの内容は以下の通りです。 ○テストサイト公開...

レッスンお疲れさまでした。 本日は作成中のサイトのhtmlとcssを確認しながらレッスンを行いました。 タグへのstyle直書きなどをあらため、HTML5に対応していく形でアドバイスさせていただきました。 ○htmlの基本的な構造について ○head内の記述について(meta情報な...

本日はレッスンお疲れ様でした。 HTML/CSSを4〜5年前から独学で勉強されているとのことで、基本的な知識がありご自分でサイトの作成もしています。 将来的にお一人でお仕事をしていきたいとのことですが、現在の作品を拝見して、先ずは主にコーディングについて今後の課題をいくつかお話ししました。...

レッスンノート ページ先頭へ

HTML/CSS情報

サイタのHTML/CSS講師がブログを通して、HTML/CSS情報を発信。更新情報のチェックはこちらから!

twitter

HTML/CSSの先生

@DTPCyta