模写準中級

Figma模写シリーズ第3弾は、アーティストのプロモーションサイトを想定した音楽系ランディングページに挑戦します。 視線を惹きつける大胆なヒーロー画像、ストリーミングサービスの導線、シンプルなフォーム...

Figma模写シリーズ第2弾は、建築事務所やプロジェクト紹介向けのミニマルで洗練されたレイアウトに挑戦します。 今回はHTMLとCSSのみを使用し、構造理解とレイアウト設計のスキル向上を目的とした模写...

Webサイトに動きをつけたい。でもJavaScriptを書くのはハードルが高い…そんなときにおすすめなのが AOS.js（Animate On Scroll） です。 この記事では、AOS.jsの基本...

HTML模写は、Web制作の基礎を「実際のレイアウトを作りながら」身につける練習方法です。 この004では、サイトの締めくくりとなるフッター（footer）レイアウトを題材に、HTML構造とレイアウト...

HTML模写は、実際のレイアウトを再現しながら「構造」と「CSS設計」を同時に学ぶ練習方法です。この003では、CSS Gridを使ったセクションレイアウトを題材に、実務で通用する配置設計を身につけま...

HTML模写は、実際のレイアウトを再現しながら「構造」と「見た目」を同時に身につける練習方法です。この002では、ページの第一印象を決める ヒーローセクション を題材に、HTMLとCSSの基礎を固めま...

このページは、HTMLとCSSの基礎を身につけるためのヘッダーレイアウト専用のHTML模写課題です。 ヘッダーは、すべてのWebサイトで必ず使われる重要なパーツですが、 といった悩みが非常に多い部分で...