Figma模写 #3：音楽系ランディングページをHTML/CSSで再現してみよう
Figma模写シリーズ第3弾は、アーティストのプロモーションサイトを想定した音楽系ランディングページに挑戦します。 視線を惹きつける大胆なヒーロー画像、ストリーミングサービスの導線、シンプルなフォーム...
続きを読む →
模写準中級
全7件の記事中、1-7件を表示
Figma模写 #2：準中級向け 建築系ポートフォリオ風レイアウト
Figma模写シリーズ第2弾は、建築事務所やプロジェクト紹介向けのミニマルで洗練されたレイアウトに挑戦します。 今回はHTMLとCSSのみを使用し、構造理解とレイアウト設計のスキル向上を目的とした模写...
続きを読む →AOS.jsの使い方とサンプルLP｜初心者でも簡単スクロールアニメーションを実装
Webサイトに動きをつけたい。でもJavaScriptを書くのはハードルが高い…そんなときにおすすめなのが AOS.js（Animate On Scroll） です。 この記事では、AOS.jsの基本...
続きを読む →サンプルサイトーフッター編
第４回: footer 1. Flexboxの基礎 Flexboxは、従来のfloatやinline-blockなどでは難しかった以下のようなレイアウトが簡単にできます。 複雑なレスポンシブデザインが...
続きを読む →サンプルサイトーセクション編
第３回: gridセクション 1. グリッドレイアウトの基礎 このページは、CSSのgridプロパティを使ってレイアウトが整えられています。グリッドレイアウトは、行と列を使ってページを分割し、それぞれ...
続きを読む →サンプルサイトーヒーロー編
第２回: ヒーローセクション 「ヒーロー」セクションでは、カーテンアニメーションを実装しています。このアニメーションは、ページが読み込まれた際に視覚的なインパクトを与える効果を狙ったものです。 カーテ...
続きを読む →サンプルサイトーヘッダー編
第１回: ヘッダーとナビゲーション4回に分けて部分的に作成して4回目には１枚のLPが完成するようになっています。 模写サンプルサイト elementary001
続きを読む →