HTML・CSSチートシート記述Webサイト作成(課題)

OVERVIEW

自分の復習用にHTML・CSSのコーディングの概要を見返せるチートシートを掲載したサイトを作成しました。

YEAR 2023

Webサイト URL↓

http://seina109web.html.xdomain.jp/HTML_CSStest4/test4.html


トップページスクリーンショット(HTMLタグ一覧)↓


トップページスクリーンショット(CSSタグ一覧)↓


🔸目的

HTML・CSSでのコーディングの理解を深める為、HTMLでのマークアップとCSSでの装飾を行う。


🔸工夫したポイント

・今回自分で後程見返す用として装飾をしました。

各コーディング内容の復習ということで、勉強している最中のような机の背景画像に設定しています。


・メイン部分はノートのようなデザインをイメージしています。各項目のリンク部分は文具のファイル等についているタグ(インデックス)風、各項目のタイトル部分は付箋風、サブタイトル部分はマーカー風に見えるように意識してデザインしました。


・本文のボリュームが多いので、ヘッダーとフッター&トップページに戻るボタンを固定してみたい部分にジャンプしやすいようにしました。


※PCでの閲覧を前提に装飾しています。




WEBSITE