HTML/CSS

プログラミング教室 CodeSeed のページに見出し・画像・リンク・リストを書き、HTMLの基本タグを身につけます。

CodeSeed のトップページに自分で CSS を書き、色・文字・クラス・幅と高さ・ボックスモデルを学びます。

文書の雛形・header/main/footer・section と article・補足の aside と図版の figure でページの骨格を作り、ページを増やしてナビゲーションで繋ぎます。

display プロパティから始めて、Flexbox の並ぶ向き・配置・そろえ・すき間を、ヘッダーやレッスンカードで身につけます。

Grid の列・fr・repeat・領域の指定で、特徴カードの一覧や無料体験の案内カードのレイアウトを組みます。

申し込みページに、入力欄・選択肢・入力チェックを持つ本物のフォームを作り、タイムテーブルの表と開閉できる FAQ を足します。

:hover や :focus のように要素の状態で選ぶ擬似クラスとトランジションから始めて、順番や中身で選ぶ擬似クラス・擬似要素・影・位置・追従・重なり・画像と背景で、フェスの LP を押したくなるページに仕上げます。

開発者ツールのデバイスツールバーでスマホ表示を確かめながら、メディアクエリとモバイルファーストでページを仕上げます。

開発者ツールで適用中のルールを読み、詳細度・カスケード・指定ミスを切り分けて直します。

transform・@keyframes・イージング・連続アニメーションと、動きを減らす設定への対応を学びます。

カスタムプロパティ・rem・clamp()・入れ子・ダークテーマで、保守しやすい現代的な CSS の書き方を身につけます。

KOGEI JOURNAL の紙面で、日付と引用を意味のタグで書き、記事カードを枠の幅で組み替え、実績の数字と段組みを伸び縮みさせて仕上げます。

ボタンとリンク・alt・見出しとランドマーク・コントラスト・フォーム・キーボード操作を整え、ページのアクセシビリティを高めます。

Webフォント・縦書きの組版・meta と OGP・公開前チェックで、サイトを公開できる品質に仕上げます。