模擬案件プラン｜デザイン1回＋コーディング1回の合計2回の添削付き！優秀作品はCodeQuestに掲載
「ただの模写」では得られない、“実力試しの場”をつくりました ポートフォリオのLPを作っているけど、「この方向性で合ってるのかな……？」「ちゃんと実務でも通用するレベルだろうか？」 そんな不安を抱えて...
続きを読む →
中級 フロントエンド学習の基本
全21件の記事中、1-21件を表示
Figma模写 #5：山と自然をテーマにした中級レイアウトに挑戦！
Figma模写シリーズ第5弾は、山・登山・ハイキングをテーマにした縦長ランディングページの模写に挑戦します。 大自然の写真を大胆に使った背景演出や、ナンバリング付きのセクション構成など、中級レベルにふ...
続きを読む →Figma模写 #1 Figmaで始める模写コーディング
Web制作スキルを効率的に高める方法の一つが「模写コーディング」 とくに最近では、Figma（フィグマ）という無料のデザインツールを使って、プロのようなデザインをそのまま模写する学習スタイルが注目され...
続きを読む →ScrollReveal.jsの使い方とサンプルLP｜簡単スクロール演出を実装
Webサイトにアニメーションを取り入れたいとき、軽量で手軽に導入できるライブラリがあると便利です。この記事では、ScrollReveal.jsの基本的な使い方と、実践的なサンプルとしてデモサイトを紹介...
続きを読む →2025年 新CSSフレームワーク「lism-css」とは？軽量＆直感的な書き方が魅力！
Web制作をしていて「CSSの設計が複雑になりがち」「フレームワークが重い」と感じたことはありませんか？ そんな方におすすめなのが、注目の軽量CSSフレームワーク「lism-css」です。 公式：Li...
続きを読む →Electronで作るクリップボード履歴アプリ開発入門
この記事は、Electron と HTML/CSS/JavaScript を使って開発した「クリップボード履歴管理アプリ」の完成までの実装手順を整理した手順ガイドです。 目的 Mac上で実行できる、履...
続きを読む →CSSネスト×BEM×FLOCSS対応コーディングガイド
SSネスト（CSS Nesting Module）は、2023年以降モダンブラウザに標準実装され、SCSSなしでも構造的にスタイルを記述できるようになりました。本記事では、このCSSネストを活用しなが...
続きを読む →Tailwind CSSの学習方法｜初心者が最短でマスターする7つのステップ
Tailwind CSSは、クラス名を組み合わせて直感的にデザインを組み立てられる「ユーティリティファーストCSSフレームワーク」です。初心者でも理解しやすく、CSSが苦手な方でも実装力がつくため、学...
続きを読む →Tailwind CSSで作る！製品LP｜Swiper・アニメーションも解説
近年、Tailwind CSSの人気はますます高まり、ランディングページ（LP）の制作においても大きな力を発揮しています。本記事では、実際に公開しているスマホ製品LP（デモはこちら）を例に、Tailw...
続きを読む →UI/UXデザインの基本｜ユーザーの心をつかむインターフェースの作り方
1. UIとUXの違いとは？ UI（ユーザーインターフェース）とUX（ユーザーエクスペリエンス）は、Webデザインやアプリ開発の中でしばしば混同されがちですが、実際には異なるコンセプトです。 2. U...
続きを読む →Bootstrapでポートフォリオを模写練習｜初心者向けに解説
1. はじめに Web制作を学ぶ際に 模写練習 は非常に効果的な方法です。特に Bootstrap を活用すれば、効率よくレスポンシブなデザインを実装できます。本記事では、Bootstrapを使ってシ...
続きを読む →CSSアニメーション徹底解説｜@keyframes の基本から応用まで
@keyframes とは？ @keyframes は、CSS でアニメーションを作成する際に使用する規則です。アニメーションの進行状態に応じて、特定のプロパティをどのように変化させるかを指定できます...
続きを読む →アクセシビリティとユーザビリティ：Googleが求めるよいUXを実現する方法
Googleは「よいUX（ユーザーエクスペリエンス）をもたらすコンテンツ」の特徴として、アクセシビリティが担保されており、ユーザビリティが高く、あらゆる人が利用できる状況であることを挙げています。本記...
続きを読む →【WordPress】Contact Form 7タグ一覧｜必須ショートコードと使い方解説｜初心者対応
はじめに 「Contact Form 7」で使えるタグを活用すれば、WordPressのフォーム作成がより便利で柔軟になります。この記事では、初心者でもすぐに使える基本タグの書き方や設定方法をわかりや...
続きを読む →CSSカスタムスニペット｜JSON形式でプロジェクトの初期設定を効率化する方法
はじめに Web開発で毎回同じCSSの初期設定を書くのは面倒だと感じませんか？本記事では、CSSカスタムスニペットをJSON形式で管理し、効率的にプロジェクトをスタートする方法を解説します。特に、VS...
続きを読む →VS CodeでのEmmetの使い方ガイド
Emmetとは？ Emmetは、HTMLやCSSを書く際にコードの入力を効率化するための強力なツールです。VS Codeではデフォルトでサポートされており、開発者が短い記法で複雑なコードを簡単に生成で...
続きを読む →GitHub Pagesとは？無料で始めるウェブサイト公開の基本ガイド
【GitHub Pagesの主な特徴】 【GitHub Pagesのセットアップ方法】 1. リポジトリの作成 GitHubのアカウントを使用し、新しいリポジトリを作成します。リポジトリ名は自由に設定...
続きを読む →GSAP練習問題集｜Webデザインのためのアニメーション練習ガイド
概要 GSAPは、Webアニメーションを簡単かつ効率的に作成できる強力なライブラリです。本記事では、GSAPの基本的な使い方から応用まで学べる練習問題を紹介します。 練習問題を進めるポイント 目次 練...
続きを読む →ジムサンプルサイト
サイトのポイント レスポンシブデザインの実装 デバイスごとに見やすいレイアウトを提供。 スマートフォンからPCまで一貫したユーザー体験を実現している。 フェードアップの視覚効果 スクロール時に要素が自...
続きを読む →茶屋サンプルサイト
1. カルーセルとは jQueryで作るカルーセルは、複数の画像やコンテンツをスライドショーのように切り替えながら表示する機能のことを指します。カルーセルはWebサイトでよく使われるUIパターンで、訪...
続きを読む →HTML中級 #001｜解説と実装のポイント
演習課題 このページでは、演習課題「HTML中級 #001」で出題された内容を解説します。サンプルコードを確認しながら、HTMLマークアップの考え方や実装のポイントを整理していきましょう。 演習課題の...
続きを読む →