CSS-CLASS設計– tag –

この課題では、Webページの最下部にあたる「フッター」エリアを作成します。住所や電話番号、著作権情報、ページトップへのリンクなど、実用的な情報を整理し、意味のあるHTMLタグと適切なクラス名でマークアップする力を身につけます。左がSP 右がPCです ...

ここでは既に構造が用意されたHTMLに対して、適切なclass名を自分で考えて記述していく練習を行います。どの要素にclassを付けるべきか、どのような名前にすべきかを考えることで、構造の把握力や命名設計力を高めることが目的です。 作成ファイル・保存場...

セクションごとに異なる背景色やデザインを適用することで、Webページの構成を視覚的にわかりやすくします。また、class名のつけ方や共通レイアウト、モバイルファーストの基本的な考え方を理解し、適切なHTML構造とCSS設計ができるようになることを目指し...

BEM記法（Block / Element / Modifier）を使って、構造を意識したクラス名の設計を体験する 記事ごとの構造をパーツ化し、保守しやすく再利用可能なCSS設計を目指す HTMLとCSSを分かりやすく連携させる練習を行う 作成ファイル・保存場所 css-class フォル...

HTML構造に対して、親→子の流れを意識したクラス名を考える練習を行う 命名の工夫で、CSSの保守・管理がしやすくなることを実感する 作成ファイル・保存場所 前回作成したcss-class フォルダに以下のファイルを作成しましょう。今回トレーニングする...

既存のHTML構造に対して適切なクラス名を追加する HTMLを修正せずに見た目を変えられるクラス指定の柔軟性を理解する セクション単位やパーツ単位でのクラス設計の第一歩を学ぶ 作成ファイル・保存場所 css-class フォルダを作成し、以下のファイルを...