コーディングの第一歩目となるHTMLの基本的な書き方をサンプルのコードとデモを使って解説。よく使うタグや属性、classとidについても解説しています。
CSSだけでドロップダウンメニューを作る方法【4種類のサンプル付き】
HTMLとCSSだけで作るドロップダウンメニューを4種類のサンプル付きで解説。コードをコピペすれば簡単に実装できます。実務でもよく使うと思うので、しっかりできるようになっておきましょう。
【slick】スクロールして画面にスライダーが表示されたらautoplayを開始する方法
slickでスクロールして画面内に入ったらスライダーを開始する方法について解説しています。サンプルとコードを載せているので、コピペで使えます。スライダーが画面の領域内に入るまでは自動再生をさせないこと
【Swiper】スクロールして画面にスライダーが表示されたらautoplayを開始する方法
Swiperでスクロールして画面内に入ったらスライダーを開始する方法について解説しています。サンプルとコードを載せているので、コピペで使えます。スライダーが画面の領域内に入るまでは自動再生をさせないこ
【jQuery】toggleClassでクラスの付け外しをしてCSSを交互に切り替える方法
jQueryのtoggleClass()メソッドを使ってクラスの付け外しをする方法をサンプルを使って解説します。on("click")だけでは出来ない再クリックで元に戻す実装ができ
【jQuery】クリックイベントのon(click)の使い方をサンプル付きで解説
jQueryのクリックイベントについて、click()とon("click")の違いやよく使うクリックイベントをサンプル付きで解説しています。
【GSAP】クリックやホバーでアニメーションを開始させる方法【サンプル付き】
GSAPでクリックやマウスカーソルのホバーでアニメーションを開始させる方法をサンプル付きで解説。他の記事ではスクロールして画面内に入ったらアニメーション開始させる方法も解説しているので、使い分けができ
【GSAP】ScrollTrigerのtoggleClassでクラスの付け外しをする方法
GSAPのプラグインScrollTrigerを使い、toggleClassメソッドでクラスの付け外しをする方法を解説します。スクロールをして指定した場所に到達したらクラスの付け外しをするサンプルのアニ
【GSAP】テキストアニメーションで一文字ずつフェードインさせる方法【14種類のサンプル付き】
GSAPを使ったテキストアニメーションで一文字ずつフェードインさせる方法を14種類のサンプル付きでご紹介します。組み合わせは大量にあって全部は紹介しきれないので、ぜひ試してみて下さい。
【GSAP】matchMediaでレスポンシブ対応の方法を解説【PCとスマホの表示確認サンプルあり】
GSAPのmatchMedia機能を使ったレスポンシブ対応の解説をしています。パソコンとスマホの表示切り替えによるアニメーションのサンプルもあります。コピペで簡単に実装できるので、ぜひ試してみて下さい
【GSAP】横スクロールをScrollTriggerで作る方法【アニメーションのサンプルあり】
GSAPとプラグインScrollTriggerを使って横スクロールさせる方法をサンプルで解説します。全画面で横スクロール、スクロールを途中で止めたら残りは自動でスクロール、スクロール途中で横スクロール
【GSAP】パララックスをScrollTriggerを使って実装する方法【アニメーションのサンプルあり】
GSAPを使ったパララックスの実装をサンプルを使って解説します。視差効果という意味のパララックスを実装する方法は色々あり、当ブログでも複数解説しているので、使い分け出来るようになれると便利かと思います
【GSAP】スクロールでふわっとフェードインさせる方法【アニメーションのサンプルあり】
GSAPを使ってスクロールでふわっとフェードインさせる方法をアニメーションのサンプルで解説します。下から上にフェードインだけでなく、拡大しながらや横からなどいろんなパターンもご紹介しています。
【GSAP】Staggerで時間差を作り順番にアニメーションさせる方法
GSAPで時間差で順番にアニメーションさせるプロパティStaggerの使い方をサンプルを使って解説しています。放射線状や無限リピートで繰り返したり、アニメーションを開始する位置を変えたりカスタマイズす
【GSAP】ScrollTriggerの使い方とスクロールアニメーションのサンプルを紹介
GSAPのプラグインScrollTriggerの使い方と、スクロールアニメーションのサンプルをご紹介します。スクロールして指定した位置を過ぎるとアニメーションが発火したり、スクロールを戻すとアニメーシ
GSAPとは？基本的な使い方とアニメーションのサンプル付きで解説
GSAPというアニメーションを簡単に作れるJavaScriptのライブラリの導入方法と使い方を解説しています。豊富なオプションやプロパティを使ったサンプルもあります。この記事を入門編としてGSAPを使
JavaScriptでテキストを一文字ずつspanタグで囲む方法【コピペOK！】
テキストを一文字ずつフェードインさせたい場合、一文字ずつspanタグで囲むときがありますが、これを手作業でやると大変です。今回はJavaScriptを使って自動でテキストを一文字ずつspanタグで囲む
【CSS】背景色(background)を2色に分割する方法(斜めも解説)
背景色(background)を半分に分ける方法について今回は2色に分割する方法、斜めに2分割する方法、3分割する方法をサンプルを使って解説しています。グラデーションの書き方と似ているので、合わせて出
海外ノマドワーカーとは？職種や必要なスキル・仕事内容や注意点などを徹底解説
コーディングの時給と作業効率を上げる！ 2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。 コピペで使えるWordPres
営業不要で稼ぐ！ココナラが初心者・副業向きな理由と出品で案件獲得するメリット
『クラウドソーシングはレッドオーシャン』と思ってやる前から諦めていませんか？今回はクラウドソーシングで有名なココナラを使って短期間で成果を出した方にインタビューしました。実は初心者や副業向きな理由など
ステマ規制対策とアフィリエイト広告・PR表記方法(WordPressブログで解説)
今回はステマ規制についてWordPressテーマ4種類で広告・PR表記する方法を解説します。対策をしないと案件の提携解除など不利益な事態になる可能性があるので、アフィリエイトをしている人はステマ規制対
CSSでテキストや画像などの要素を中央揃えにする方法について解説しています。有名な方法から古い方法、新しい方法などいろんな方法をサンプル付きで解説しています。中央寄せはコーディング初心者が躓きやすいポ
【CSS Grid Layoutの基本】display: gridの使い方を解説
横並びでよく使うCSSのプロパティはFlexboxだと思いますが、HTMLが複雑になりやすく縦横両方の方向に並べることはできません。そこ今回はHTMLをシンプルにグリッドレイアウトが作れるdispla
Twitter(現X)で稼ぐ！営業0で自動集客して案件獲得する方法
Twitterを活用して稼ぐには、自動集客で案件を獲得するという方法があります。今回はTwitterから安定して仕事を受注している方にインタビューしました。営業が苦手な人におすすめの記事となっています
「ブログリーダー」を活用して、じゅんぺいさんをフォローしませんか？
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
コーディングの第一歩目となるHTMLの基本的な書き方をサンプルのコードとデモを使って解説。よく使うタグや属性、classとidについても解説しています。
CSSの基本的な書き方をコードとデモのサンプル付きで解説。CSSで出来ることから、セレクタ・プロパティ・値の書き方や記述方法についても解説。
jQueryの基本的な書き方について解説。セレクタ、メソッド、イベント処理などをサンプルコードで解説。デモもあり。本体の読み込み方は別記事で解説。
WordPressオリジナルテーマ（自作テーマ）とは何かについて解説。メリット・デメリット、特徴から必要なスキルやおすすめの学習方法や教材も紹介。
HTML / CSSで角が丸いtable（テーブル）の作り方をコードとサンプルで解説。border-radiusで角が丸くならない原因も解説しています。
CSSのborder-radiusを使って歪んだ手書き風の円を作る方法を解説。hoverアニメーションで動かす方法もサンプルとコードで解説しています。
フリーランス特化型のプログラミングスクール『ZeroPlus』の評判・口コミ・特徴などを解説。料金やコース、おすすめする人・おすすめしない人も解説。
キャリアに特化したコーチングサービス、ポジウィルキャリアの評判・口コミ・特徴などを解説。転職エージェントとの違いも比較して解説しています。
バリ島の英語留学（語学留学）、バリリンガル4週目のレポート記事です。レッスン内容（カリキュラム）や体験談、レビューや評価などを知りたい、ワーホリ前に英語力をアップさせたいという人は参考にしてみて下さい
Web制作で低単価案件に消耗していませんか？当記事では、低単価になる人の特徴や高単価案件を獲得する方法、Web制作の相場について解説します。
コーダーとはどんな仕事か知りたい人のために、仕事内容や必要なスキル、案件の流れや平均年収などを解説。Web制作でリモートワークをしたい人は必見です。
Web制作はオワコンと言われることがありますが、今でも十分稼ぐことはできます。当記事では、Web制作がオワコンと言われる理由とそうではない理由について解説します。
バリ島の英語留学（語学留学）、バリリンガル2周目のレポート記事です。レッスン内容（カリキュラム）や体験談、レビューや評価などを知りたい、ワーホリ前に英語力をアップさせたいという人は参考にしてみて下さい
バリ島の英語留学・語学留学のバリリンガルの体験談を詳しく解説。評判やレビュー、レッスン内容や現地の生活についても書いています。ワーホリ前の英語力・英会話力アップをしたい人にもおすすめです。
バリ島の英語留学（語学留学）、バリリンガル2周目のレポート記事です。レッスン内容（カリキュラム）や体験談、レビューや評価などを知りたい、ワーホリ前に英語力をアップさせたいという人は参考にしてみて下さい
ノマドワーカーが集うオフ会『ノマド合宿』。東南アジアを中心にNomad Placeが主催するイベントですが、これまで全て参加している私が体験談と詳細について解説。ノマド仲間が欲しいリモートワーカー必見
バリ島の英語留学（語学留学）、バリリンガルのレポート記事です。レッスン内容（カリキュラム）や体験談、レビューや評価などを知りたい、ワーホリ前に英語力をアップさせたいという人は参考にしてみて下さい。私は
Web制作おすすめ教材と案件獲得サービス 当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。 こちら ...
ラジオボタンのデザインをデフォルトの状態から自由にカスタマイズする方法と、色だけ変える簡単な方法をご紹介します。Contact Form7の場合は別の記事で解説しています。アクセシビリティも意識してで
tableタグを使ってテーブルを作るときに列の幅がバラバラで困ったことはありませんか？今回は左の列だけ幅を指定して、他の列の幅は均等にする方法を解説します。もちろん全ての列の幅を均等にすることも可能で
ラジオボタンのデザインをデフォルトの状態から自由にカスタマイズする方法と、色だけ変える簡単な方法をご紹介します。Contact Form7の場合は別の記事で解説しています。アクセシビリティも意識してで
tableタグを使ってテーブルを作るときに列の幅がバラバラで困ったことはありませんか？今回は左の列だけ幅を指定して、他の列の幅は均等にする方法を解説します。もちろん全ての列の幅を均等にすることも可能で
パソコンとスマホで要素の順番を変えたいとき、HTMLでパソコン用とスマホ用を書く以外に、Flexboxを使って変えることができます。縦並び・横並びで順番を逆にしたり、指定した順番に並べ替えたりすること
コーディングでよくあるレイアウトが、お知らせ欄などのニュースセクション。日付・カテゴリーラベル・記事タイトルが横並びになっているデザインが多く、今回はこのコーディング方法を解説。少しパターンを変えたり
CSSだけで実装できるテキストのホバーアニメーションを20種類ご紹介。コピペ可能なコードとサンプルのデモもあるので、実際にどんな動きになるか確認できます。アンダーライン(下線)アニメーションは別の記事
会社のホームページなどで資料などのダウンロードをさせたい場合、aタグのdownload属性を使えばファイルをダウンロードさせることが可能です。HTMLだけで完結するので簡単ですが、注意点もあるのでしっ
テキストにストライプ柄のマーカー風のアンダーライン(下線)を引く方法を解説。ただのマーカーではないので、ストライプの太さ、高さ、間隔、色、色の数など様々なカスタマイズが可能です。コピペで使えるコードと
YouTubeの埋め込み動画をレスポンシブ対応にする方法を2つご紹介します。1つはaspect-ratioを使う方法、もう1つはpaddin-topを使う方法です。どちらもアスペクト比を保ちながらレス
Googleマップの埋め込み地図をレスポンシブ対応にする方法を2つご紹介します。1つはaspect-ratioを使う方法、もう1つはpaddin-topを使う方法です。どちらもアスペクト比を保ちながら
Web制作おすすめ教材と案件獲得サービス 当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。 こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教
パララックスという視差効果を実装できる、Rellax.jsというJavaScriptのライブラリの使い方を解説。コードとデモを載せているので、コピペで実装できます。パララックスの記事は他にもあるので、
テキスト(文字)の色を半分ずつ違う色にする方法をコードとデモ付きで解説します。左右に半々、上下に半々、斜めに半々、2行で半々と4種類のデモを用意しています。同じ要領でテキストをグラデーションにすること
CSSアニメーションの@keyframesを使って背景色をゆっくりじんわりと変化させる方法を解説。自然にループさせるには注意点があるので、そこだけ注意しましょう。コピペ可能なコードとサンプルのデモを使
CSSアニメーションを使い、グラデーションをアニメーションで動かす方法をコードとデモを使って解説。速くしすぎずに、隣同士の色も近いものを選ぶことで、自然なグラデーションにすることができます。
メガメニューはクリックまたはマウスオーバーで開くドロップダウンメニューの一種で、今回はHTMLとCSSだけで作れるメガメニューをコードとデモを使って解説。フェードや上からスライドするタイプなど、シンプ
マウスカーソルの動きに合わせて追いかけてくる丸い影。これはマウスストーカーと言います。今回は、5種類のマウスストーカーの作り方をjQueryとJavaScriptの両方で解説していきます。デモもあるの
WordPressブログに投げ銭システムを導入できる『OFUSE』というサービスの登録方法や、ボタンの設置方法を画像を使って丁寧に解説しています。ブログで稼ぐ方法の1つとして、試してみるのもいいかと思
スクロールを促すCSSアニメーション『スクロールダウン』を7種類ご紹介。コピペ可能なコードとデモを載せています。HTMLは単純で、アニメーションはCSSだけで作れます。今回解説するのはシンプルで使用頻
アクセシビリティの観点から消さない方がいいかも知れませんが、input要素をクリック・タップした時の青い枠線を消す方法について解説。iPhoneのSafariやChrome、パソコンのSafari・C
埋め込んだ動画を自動再生することはできますが、ページの途中にある場合、スクロールして表示された時点である程度動画が進んでいるか、終わっている可能性があります。今回は、動画をスクロールして画面内に表示さ
