HTML・CSSを正しい理解するためコードジャンプを使って練習しました。直属の上司から教えていただいた知識です。多くのサイト模写を行った結果、WEBサイトの構成を理解したワイヤーフレーム、ラフ案作成が出来るようになりました。HTML・CSSのみを使用した静的ページの作成も可能です。業務では、既存のページを追加CSSで調整、デベロッパーツールを使った検証等しています。
作成した模写ページを一部ご紹介します。
作成したダミーサイト
ダミーサイトその3
カフェサイト
codejumpのカフェサイトの写真を入れ替えてダミーサイトを作りました。タイトルはそのままで、画像だけ、フリー素材からダウンロードして加工しました。
- 制作期間：実装のみ。およそ1週間。
- 使用ソフト：Photoshop（MV色合い編集）、VScode
- ポイント：position:relativ、position:absolteの関係性に随分悩まされるHPとなりました。新着情報を縦書きにして並べるのも苦労しました。今ではpositionタグへの理解が深まり、実務へ生かすことが出来ています。
ダミーサイトその4
コーポレートサイト
codejumpのコーポレートサイトから着想を得て作りました。トップページからお問い合わせフォームまで全ての作成することが出来ました。地方で作られたデザイン会社をコンセプトに、架空のコーポレートサイトを作りました。
- 制作期間：実装のみ。およそ1か月。
- 使用ソフト：Photoshop（MV色合い編集）、VScode
- ポイント：画像の配置を工夫しました。レスポンシブがうまくいかなかったり、テーブルの関係性が分からない部分が大変でした。その辺は今でも理解できていません。