Figma模写 #5:山と自然をテーマにした中級レイアウトに挑戦! Figma模写シリーズ第5弾は、山・登山・ハイキングをテーマにした縦長ランディングページの模写に挑戦します。 大自然の写真を大胆に使った背景演出や、ナンバリング付きのセクション構成など、中級レベルにふ... 続きを読む →
Figma模写 #1 Figmaで始める模写コーディング Web制作スキルを効率的に高める方法の一つが「模写コーディング」 とくに最近では、Figma(フィグマ)という無料のデザインツールを使って、プロのようなデザインをそのまま模写する学習スタイルが注目され... 続きを読む →
ScrollReveal.jsの使い方とサンプルLP|簡単スクロール演出を実装 Webサイトにアニメーションを取り入れたいとき、軽量で手軽に導入できるライブラリがあると便利です。この記事では、ScrollReveal.jsの基本的な使い方と、実践的なサンプルとしてデモサイトを紹介... 続きを読む →
Tailwind CSSで作る!製品LP|Swiper・アニメーションも解説 近年、Tailwind CSSの人気はますます高まり、ランディングページ(LP)の制作においても大きな力を発揮しています。本記事では、実際に公開しているスマホ製品LP(デモはこちら)を例に、Tailw... 続きを読む →
Bootstrapでポートフォリオを模写練習|初心者向けに解説 1. はじめに Web制作を学ぶ際に 模写練習 は非常に効果的な方法です。特に Bootstrap を活用すれば、効率よくレスポンシブなデザインを実装できます。本記事では、Bootstrapを使ってシ... 続きを読む →
ジムサンプルサイト サイトのポイント レスポンシブデザインの実装 デバイスごとに見やすいレイアウトを提供。 スマートフォンからPCまで一貫したユーザー体験を実現している。 フェードアップの視覚効果 スクロール時に要素が自... 続きを読む →
茶屋サンプルサイト 1. カルーセルとは jQueryで作るカルーセルは、複数の画像やコンテンツをスライドショーのように切り替えながら表示する機能のことを指します。カルーセルはWebサイトでよく使われるUIパターンで、訪... 続きを読む →
HTML中級 #001|解説と実装のポイント 演習課題 このページでは、演習課題「HTML中級 #001」で出題された内容を解説します。サンプルコードを確認しながら、HTMLマークアップの考え方や実装のポイントを整理していきましょう。 演習課題の... 続きを読む →