WebCanta

初心者のための徹底ガイド-Web制作

会員ログイン

WEB DEVELOPMENT GUIDE

Web制作を、 基礎から実装まで 分かりやすく。

Web制作の基礎から実務で使える実装まで。動くコードと具体的な手順で、
つまずきやすいポイントを分かりやすく解説します。

PICK UP

ピックアップ

NEWS

お知らせ

会員ログイン機能を追加いたしました ホームページをリニューアルしました

NEW ARTICLES

新着記事

すべて見る

CATEGORY

Shopify

もっと見る
Shopify基礎 liquid

CATEGORY

HTML

もっと見る
Pug HTML基礎
HTML基礎

コーディングの必須事項。重要な要素に意識を向けよう！

Web制作において、コーディングの重要事項を記述します。 HTML・CSS・JavaScript・WordPressなど、それぞれの役割や実装方法を理解することで、実務でも対応しやすくなります。 まずは基本的な仕組みや考え方を理解し、実際にアウトプットしながら学習していきましょう。

HTML基礎

画像の表示について徹底解説

画像の表示方法には、主にimgタグとCSSのbackground-imageを使用する方法があります。これらの方法の違いを解説し、より良い画像表示を実現するための理解を深めることができます。

CATEGORY

CSS

もっと見る
CSS基礎 レイアウト Flexbox CSSアニメーション UIパーツ CSSフレームワーク SCSS
CSS基礎

common.cssの作り方｜再利用できるCSS共通クラスと運用上の注意点

Web制作では、事前に使用するクラスを共通クラスとしてまとめておくことで、作業の効率化や記述ミスの防止ができます。一般的に、それらのクラスはcommon.cssというファイルにまとめられることが共通の認識とされています。今回はそのcommon.cssを公開いたします。ぜひ活用してみてください。

CATEGORY

JavaScript

もっと見る
GSAP JavaScript基礎 DOM・イベント JSライブラリ Swiper
DOM・イベント

コピペでOK!スクロールに追従するメニューの実装

スクロールイベントを監視し、メニューの表示状態を切り替えるためのコードを書いていきます。CSSを使用して、メニューのデザインや配置を調整することもできます。この実装により、ユーザーがページをスクロールするたびに、メニューが自動的に表示または非表示になるようになります。

CATEGORY

WordPress

もっと見る
テーマ開発 カスタムフィールド フォーム プラグイン ローカル開発 WordPress運用 ブロックエディター
WordPress運用

WordPressの開発で大切なこと #2/2

WordPressのデフォルトの設定を把握することで、デザインの崩れを回避することができたり、コードの管理がしやすくなったりして非常に便利です。まずはこの内容を理解することから始めましょう。

フォーム

お問い合わせフォームの構築 — MW WP Form — #2/3

今回は、前回の内容に続いてMW WP Formの作成を行います。具体的には、バリデーションの設定、エラーメッセージの設定、そして自動返信メールの設定を行います。これらの設定は、クライアントからの要望も多いので、ぜひ実装してください。

フォーム

【Contact Form7】サンクスページへの遷移(プラグインなし) #3/3

このプラグインはフォームを構築する上で非常に便利です。自動返信メールの設定が簡単で、とても人気があります。しかし、このプラグインはサンクスページへの遷移する機能は基本的にできない仕様です。今回はプラグインを使わずに、送信した際にサンクスページへ遷移する方法を解説します。

テーマ開発

WordPressのメインループとは？サブループとの使い分けとカスタム投稿タイプのページネーションを徹底解説

この記事では、WordPressのメインループとサブループの違い、カスタム投稿タイプでメインループを調整する理由、ページネーションがずれる原因、CPT UIとカスタムタクソノミーの使い分けを初心者にもわかりやすく解説します。 特に、カスタム投稿タイプの一覧ページを作るときは、単に別の WP_Query を書くだけではなく、そのページでWordPressが最初から持っているメインループをどう扱うかを理解しておくことが大切です

CATEGORY

制作ツール

もっと見る
エディター・Git パフォーマンス
パフォーマンス

PageSpeed Insightsで高得点を取るために対応したこと

PageSpeed Insightsは、ウェブサイトのパフォーマンスを評価し、改善のためのアドバイスを提供するツールです。Googleが提供しており、ウェブページの読み込み速度やユーザーエクスペリエンスの向上を支援してます。以下は同ツールで高得点を取るための対策を解説いたします。

エディター・Git

ユーザースニペッド機能

テキストエディタのユーザースニペットとは、プログラミングや文章作成の際に頻繁に使用するコードやテキストの断片を保存し、簡単に再利用できるようにする機能です。ユーザーは特定のキーワードを入力するだけで、あらかじめ定義しておいた長いコードや定型文を挿入できます。これにより、タイピングの手間を省き、作業の効率化を図ることができます。具体例をもとに設定してみましょう。

CATEGORY

その他

もっと見る
Web制作・学習 サイト運営
Web制作・学習

プログラミングの学習方法ChatGTPを活用しよう!

これまでは、何かわからないことがあった場合、情報を検索（ググる）するスキルが必要でした。しかし、今後はChatGPTの活用も一つの選択肢として確実に増えてくるでしょう。今回はウェブ制作に焦点を当て、どのようなタスクが適しているのか、また、どのようにすれば正確な答えを得られるのかについて具体的に説明したいと思います。