未経験コーダーがポートフォリオを作成する時のポイント

今回は未経験からコーダーに転職する際に重要なポートフォリについて解説していきます。 ポートフォリオは未経験転職や案件獲得において非常に重要なポイントです。 ですが、重要だからといってポートフォリオに時間をかけすぎるのは良く無いです。 今回の

【Swiper】画像に合わせてテキストもスライドさせよう

『Swiperで画像はスライダーできるけど、それに合わせてテキストもスライドさせてたい』 『画像のタイトルテキストを表示させたい』 こんなことを思ったことはありませんんか？ 今回は画像に合わせてテキストもフェードインするスライダーについて解

【きつい？】Webコーダーがきついと言われる理由について解説します

『Webコーダーに転職しようと思っているのですがスキル感はどうだろう？』 『Webコーダーはキツイってサイトで見かけたのだが本当だろうか？』 こんな疑問を抱く方は多いのではないでしょうか？ Webコーダーの仕事は一部で「きつい」と言われるこ

【Swiper】サムネイル画像連動スライダーをループさせてみた！

今回はSwiperを利用して、サムネイル画像をクリックするとそれに連動したメインの画像が変わるスライダーについて紹介していきたいと思います。 オプションと組み合わせて、プログレスバーやループの設定も可能です。 目次 1 初めに2 サムネイル

【Gulp4書き方】Sass、Pug、Js、画像圧縮、browserSync、watch各タスクごとに解説します！

『コーディングは慣れてきたし、そろそろGulp4使ってみたいけど書き方わからない』 『数年前にGulpの設定したけど、Gulp4にアップデートしたい』 このようなお悩みを持つ方は多いのではないでしょうか？ 今回はGulp4の書き方から各タス

【chatGPT】Web制作でchatGPTを活用するコーダーのためのコーディング入門ガイド

『コーディングでchatGPTを取り組みたいけど、そのままコピペでいいの？』 『コーダーがchatGPT使いって作業を効率化させたい！』 『コーダーの仕事が将来的にchatGPTに奪われる！？』 このような疑問を持つコーダーは多いのではない

【GSAP】easing(イージング)の使い方とアニメーションの比較！

今回はGSAPのeasingについて紹介していきます。 GSAPってなんぞや？って方は下記の記事をご覧ください 『要素を動かすことは出来たんだけど動きに強弱をつけたい！』と思ったことはありませんか？ GSAPのeasingを使えばその悩みは

【GSAP】Timelineを使って、複数の要素を連動さてアニメーションさせよう

GSAPのTimelineってご存知でしょうか？ Timelineは複数の要素を連動させてアニメーションさせたい時に使われます。 toやfromを複数記述しなくても一つのTimelineとして完結します。 GSAPってなんぞや？って方は下記

【GSAP】アニメーション終了したら関数実行？onCompleteの使い方

GSAPのonCompleteってご存知ですか？ onCompleteとはGSAPでアニメーションのタイムングをハンドリングする方法の一つです。 他にも、onStart onUpdate onRepeatがります。 今回はonComplet

【WordPress】「Notice: Only variables should be passed by reference in… 」エラーが出た時の対処法

「 Notice: Only variables should be passed by reference in…」 WordPressでこのようなエラーは出たことはありませんか？ 翻訳すると「お知らせ 参照渡しできるのは変数

【GSAP】リピート毎にランダムに数値を変更する方法

今回はGSAPをリピート毎にランダムにdurationとeaseを変更する方法について解説していきたいと思います。 onRepeatを使ってXやYはリピート毎に変更できたのですが、durationやdelayは変更出来ず詰まったのでその解決

【GSAP】GSAPを使ってSVGのマスクをアニメーションさせてみた。

『SVGをアニメーションさせてけど、CSSアニメーションだとスマホで動かない時がある、、』っておもたことはございませんか？ 今回はGSAPを使ってSVGのマスクをアニメーションさせてみました。 SVGを使いこなせるとアニメーションの幅が一気

【GSAP】ScrollTriggerのpinで要素を固定してみよう

皆さん！スクロール量（位置）に応じて要素を固定したいなと思ったことはありませんか？ 今回はアニメーションライブラリのGSAPのScrollTrigerを使用して、スクロールに合わせて要素を固定したアニメーションを簡単に実装したいと思います。

【Gulp】Pugのincludeを使ってコーディングを時短してみた。

『ヘッダーやフッターなどの共通パーツのHTMLをまとめて管理したいな〜』と思ったことはありませんか？ 大規模サイトを作成している時にヘッダーやフッターなので全ページ共有箇所の修正があると、全ページのHTMLを修正をしないといけないので面倒で

【WordPress】Yoast Duplicate Postを使って記事を複製する方法

『WordPressで記事を複製したいけど、前の記事を毎回コピーするのめんどくさい』と思ったことはありませんか？ Yoast Duplicate Posは1クリックで記事を複製してくれる便利なプラグインです。 ぜひ最後までご覧ください。 目

【Source Tree】ソースツリーでマスターブランチにマージする方法

gitの操作をコマンドではなくツール上で操作できるSource Treeを使われている人は多いのではないのでしょうか？ 今回はSource Treeを使って、マスターブランチにマージする方法を紹介いたします。 目次 1 ブランチを作成しよう

【カスタムタクソノミー】WordPressで制作実績ページを作成する方法(カスタムタクソノミー編)

カスタム投稿タイプができたら次はカスタムタクソノミー作成する方法を解説します。 まだカスタム投稿タイプができない方は下記の記事を先に参照してください。 目次 1 カスタムタクソノミーとは2 カスタムタクソノミーを作成しよう2.1 funct

【カスタム投稿タイプ】WordPressで制作実績ページを作成する方法(カスタム投稿タイプ編)

Webサイトを作成する際に、『制作実績ページやお知らせページなどを作りたいけど、どうするればいいの？』って思うことがあると思います。 今回はカスタム投稿タイプ使って、制作実績ページの作成の流れを解説していきたいと思います。 初心者でも分かり

【コピペOK】Contact Form 7のデザインをCSSでおしゃれにカスタマイズする

WordPressサイトでお問合せフォームを作成する際は、『Contact Form 7』を使うことが多いのではないでしょうか？ 基本的なContact Form 7は下記のサイトにまとめてます。 デフォルトのデザインだと少し寂しい感じがし

【コピペOK】Contact Form 7のデザインをCSSでおしゃれにカスタマイズする

WordPressサイトでお問合せフォームを作成する際は、『Contact Form 7』を使うことが多いのではないでしょうか？ 基本的なContact Form 7は下記のサイトにまとめてます。 デフォルトのデザインだと少し寂しい感じがし

【WordPress】自作テーマでContact Form 7を使ってサンクスページを作成する方法

お問合せフォームを作成する時に人気のプラグイン『Contact Form 7』のサンクスページを作成する方法を解説したいと思います。 『Contact Form 7』は初心者でも簡単にカスタマイズができるコンタクトプラグインです、ですがフォ

【WordPress】自作テーマでContact Form 7の設定方法からカスタマイズまで

ホームページを作成する際に『お問い合わせフォームはどうしたらいいんだろう？』と思ったことはありませんでしょうか？ そんな時におすすめなのが、WordPressのプラグイン『Contact Form 7』です。 Contact Form 7は

【2022年】SNS初心者がTicTokを使って楽天アフィリエイトで○○円稼いだ方法

普段はWeb制作をしている私が初心者なりにTicTokを使って楽天アフィリエイトで稼いだ方法を解説したいと思います。 結論から申しますと400円だけ稼ぎました 『なんだ400円だけかよ』と思う方もいられますが、こんな簡単に0→1を達成できた

【2022年最新】Yoast SEOを日本語化する方法

WordPressでSEOプラグインで人気の『Yoast SEO』インストール時に英語バージョンになっていることはないでしょうか？ 日本語化にするには直接ファイルを操作しなければなりませんので少し初心者にはハードルが高い作業になりますのでわ

JavaScriptの変数で動的にstyleを指定しよう！

『この要素の高さ分余白を開けたいけど、%で指定しているからブラウザの幅によって毎回大きさが異なるんだけどどうしたらいいの？』っと思ったことはありませんでしょうか？ 通常はstyleはCSSで記述しますが、ごく稀にレスポンシブなどで動的にスタ

【OGPとは？】metaタグにOGPを設定する理由

metaタグの設定をしている際に、kyewordやdescriptonの設定の理由はわかるのだが『OGPってなんのために設定してるだろう』と思ったことはないでしょうか？OGPタグはTwitterやLINEなどでWebサイトを共有する際に非常に重要な設定です。近年はSNSでシェアする機会が増えてきているので是非最後までご覧ください。

【Mac向け】Web制作におけるChromeデベロッパーツール(検証)の基本的な使い方

Google Chromeのデベロッパーツールの基本的な使い方を解説いたします。デベロッパーツールはWebエンジニアだけではなく、WebディレクターなどのWebに関する作業をされている方は使えると便利なツールです。 目次 1 Chromeの

【Web制作】コーダーが作業前にWebデザイナーへ確認しておくこと

コーダーがコーディングに取り掛かる前にWebデザイナーに確認しておくほうがいいことをまとめました。確認作業はとても重要でこれを怠ると後々面倒なことになります。 目次 1 デザインの共通化されている箇所を確認する1.1 フォントサイズ1.2

【初心者向け】Vue.jsでTODOリストを作ってみた。

「ある程度JavaScriptを理解したので次はVue.jsを勉強したい！」と考えている方も多いのではないでしょうか？ Vue.jsはJavaScriptより扱いやすくしたフレームワークです。 Vue.jsはHTMLに似た文法で覚えやすく他

【GSAP】ScrollTrigerを使用してスクロールと連動させランダムタイトルアニメーション

皆さん！スクロール量（位置）に応じてアニメーションが実行されるWebサイトって見たことありますか？今回はアニメーションライブラリのGSAPのScrollTrigerを使用して、スクロールに合わせてタイトルアニメショーンを簡単に実装したいと思います。

【未経験・第二新卒向け】Web制作会社へ転職！理想的な会社の選び方とは

Web制作会社は、未経験や第二新卒の方でも転職可能です。しかし未経験の場合、どのような会社を選べばいいか迷ってしまいますよね。今回は転職で成功するためのWeb制作会社の選び方、押さえておくべきポイントを解説します。

【最短アドセンス合格】10記事も書く必要ない！？特化ブログでアドセンス合格した最低限おさえておきたい4つのポイント

『ブログ始めてみたはいいけどGoogleアドセンスが全く受からない』など思う方も多いのではないでしょうか？ 近年かなり審査基準が厳しくなっているようで、何度審査を受けても通らないという人もいると思います。 最低でも10記事以上は書く必要があ

【Vue.js】マスタッシュ(二重中括弧)構文で記述の仕方

『Vueの勉強始めたけど{{}}←なんだこの二重括弧？』と思う人も多いのではないでしょうか？ そんな方に向けて、Vue特有のマスタッシュ(二重中括弧)構文について解説します。 今回はCDNを使用致しますので、是非試してみてください リンク

【コピペOK】Vue.jsをCDNで導入する方法からディレクティブ紹介まで！

『そろそろjQueryからVue.jsに移行したいけどどうすればいいかわからない！』と考えている方も多いのではないでしょうか？ しかし、環境構築に苦手意識を持つ方もいるでしょう。 そんなあなたにおすすめなのが、CDNで導入です。 CDNを利

未経験・新卒でWeb制作会社に転職する方法とは？おすすめ求人サイトも紹介！

「Webコーダーの実務未経験だけど、Web制作会社に転職したい」という方のために、未経験でもWebコーダーとして転職する方法をまとめました。年収やスキルアップ先、おすすめの求人サイトも紹介しているのでぜひ参考にしてください。

【初心者向け】まずはこれだけSass(Scss)の基本的な書き方まとめ

cssをある程度勉強していると、Sass(Scss)というキーワード目にすることが多のではないでしょうか? Sass(Scss)を使用すると、CSSより効率的にさらに保守性のあるコードが記述できるようになります。 しかし、初心者には環境設定

【Macユーザー向け】初心者でもgulpでSass(Scss)を簡単にコンパイルする方法

『ある程度、cssに慣れてきたらSass(Scss)でコーディングしてみたい』と考える人も多いのではないでしょうか？ しかしnodeを使用して環境構築するのに苦手意識を持っている方は多いのでしょう そんなあなたにgulpのインストールから、

【ココナラ】Web制作でプラチナランクを獲得する最短の方法とは

ココナラでWeb制作で稼ぐなら、プラチナランクの獲得が必要不可欠です。この記事では、最短でプラチナランクを獲得するための具体的な方法を紹介します。案件を継続的に受注したい方はぜひ参考にしてください。

【すぐ実践可能】ココナラでコーディングのみで月10万円稼ぐ方法

ココナラでコーディングのみで稼ぐためには、カテゴリーで上位表示させることが必要不可欠です。この記事ではココナラで出品したサービスを上位表示させ、月に平均10万円を稼ぐ方法をご紹介します。

超簡単！GSAPのScrollTriggerでスクロールアニメーションを実装してみた

皆さん！スクロール量（位置）に応じてアニメーションが実行されるWebサイトって見たことありますか？ スクロールされると要素がフワッと出現したり、要素が大きくなったり小さくなったりと、アニメーションが実装されているWebサイトって印象に残りや

【初心者でも分かる】GSAPの基本的な使い方を理解しよう！

「GSAP（ジーサップ）」は多彩なアニメーションが実現でき、初心者でも扱いやすいJavaScriptライブラリです。本記事では初心者向けにGSAPの概要や導入方法・基本的な使い方など詳しく解説します。

【まずはこれだけ】CSSの擬似クラスnth-childの使い方をデモ付きで解説！

CSSの擬似クラスnth-childの使い方で、初心者がまず押さえておきたい8つの指定方法について紹介します。ソースコードとデモを用意しているので具体例を見ながら学んでいきましょう。

【GSAP】ScrollTrigerでtoggleclass指定する。クラスの付け外し。

【GSAP】ScrollTrigerでtoggleclass指定する。クラスの付け外し。今回はGSAPのScrollTrigerを用いてtoggleclassを実装してみます。