WebCanta

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

会員ログイン

WEB DEVELOPMENT GUIDE

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

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

PICK UP

ピックアップ

NEWS

お知らせ

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

NEW ARTICLES

新着記事

すべて見る

CATEGORY

Shopify

もっと見る
Shopify基礎

CATEGORY

HTML

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

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

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

HTML基礎

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

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

CATEGORY

CSS

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

テキストのくり抜きmix-blend-mode: screen

mix-blend-mode: screen;はCSSプロパティの一つで、HTML要素のブレンドモード（色の混合方法）を指定する際に使用します。screenはそのブレンドモードの一種で、背景となる色と混合してより明るい色を生成します。Photoshopやその他の画像編集ソフトウェアで見られる「スクリーン」ブレンドモードと同様の効果があります。今回はこちらのプロパティを使用し、テキストをくり抜き動画を表示させたいと思います。

CSS基礎

セレクタの種類(子孫セレクタ、子セレクタ)クラスセレクタとの違いについて

セレクタの種類（子孫セレクタ・子セレクタ）について、それぞれの意味を理解しましょう。 CSSのセレクタは、「どの要素にデザインを適用するか」を指定するために使用します。 特に子孫セレクタと子セレクタは実務でも非常によく使用するため、違いを理解して使い分けることが大切です。

CSSアニメーション

【スライドアニメーション】CSSのみ

指定されたサイトの内容を概略的に説明します。このページは、CSSを使ったスライドアニメーションに関する解説記事です。まず、スライドアニメーションの基本的な概念とそのメリットについて説明し、次に具体的な実装方法を紹介します。コードスニペットを用いて、CSSのtransitionやtransform、keyframesプロパティを利用したアニメーションの作成方法を解説します。また、応用的な技術やパフォーマンスの最適化についても触れています。最後に、参考になるリソースや関連トピックへのリンクが提供されています。

CSS基礎

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

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

CATEGORY

JavaScript

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

Javascriptのtype=”module”とは

JavaScriptには、「module」という種類があります。通常のJavaScriptとは何が異なるのかを説明していきます。非常に便利なものですので、ぜひ上手に活用しましょう。

CATEGORY

WordPress

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

【開発環境】Local sitesの便利な機能Blueprintを解説

開発環境の構築には、非常に便利なツールであるLocalがあります。さらに、Blueprintという便利な機能も備えています。予め決められたプラグインやテーマを構築しておくことで、開発環境がスムーズに構築できますので、ぜひ活用してみてください。

フォーム

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

この記事では、WordPressで利用できる人気のお問い合わせフォームプラグイン「Contact Form 7」の設定とカスタマイズ方法について詳しく解説していきます。初心者から中級者までが、フォームの作成から応用的なカスタマイズ手法まで、簡単に学べるように段階を追って説明します。

CATEGORY

制作ツール

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

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

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

エディター・Git

Gitと連携してソースコードを管理しよう

Gitを使用すると、ソースコードを管理することができます。コミットによってメモを残すこともでき、非常に便利です。コードを保存しながら一つひとつ記述することができ、問題が発生した場合には元に戻すこともできます。ぜひ開発に組み込んでみましょう。

CATEGORY

その他

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

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

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

Web制作・学習

【必須】Web制作について -2024年版

このウェブサイトでは、特に学習してよかった技術とその活用法について記載しています。特にWordPress、Node.js、Vite、SCSS、Gitが挙げられ、各技術のインストールや構築方法の関連記事へのリンクを紹介しています。さらに、ChatGPTやLOCALなどのジェネレーター・ツールについても記載し、実務で役立つ情報が豊富に載せております。また、実務での意識の仕方や最近ではあまり使わなくなった技術についても触れています。これらの情報がWeb制作を学ぶ方の参考になれば幸いです。