現在取り組んでいるLPコーディングで、YouTubeをポップアップモーダルで表示するという仕様を実現したので、それについて書いていきます。 「modaal」というモーダルウインドウのプラグインを使用しました。 デモサイト デモサイトはこちらです。 デモサイトにある画像をクリックすると、以下のような、YouTube...

現在取り組んでいるLPコーディングで、YouTubeをポップアップモーダルで表示するという仕様を実現したので、それについて書いていきます。 「...

先ほど、ブログページの目次をクリックした時に、ヘッダーの高さを考慮してスクロールの高さを調整しました。 どうやって調整したのかについて書いていきます。 目次には、WordPressのプラグイン「EasyTableofContents」を使用しました。 手順1:設定画面に移動する まずは、設定>目次をクリックして、...

先ほど、ブログページの目次をクリックした時に、ヘッダーの高さを考慮してスクロールの高さを調整しました。 どうやって調整したのかについて書いてい...

背景のアニメーションをいくつか作成してみました。 「動くWebデザイン」を参考にしました。 star 星のアニメーションです。サンプルサイトはこちら confetti 紙吹雪のアニメーションです。サンプルサイトはこちら snow 札幌に雪を降らせてみました。サンプルサイトはこちら...

背景のアニメーションをいくつか作成してみました。 「動くWebデザイン」を参考にしました。 star 星のアニメーションです。サン...

ずっと前からタイトルを見て気になっていた本でした。サンタクロースのおじさんの表紙の本です。 私はたまに気分転換にセントレア空港までいきながら、途中の本屋で買った本を読んでいます。 今回は「仕事は楽しいかね？」を読みました。 どんなお話か？ 「チーズはどこへ消えた？」のような物語形式でストーリーが進んでいきます。 ...

ずっと前からタイトルを見て気になっていた本でした。サンタクロースのおじさんの表紙の本です。 私はたまに気分転換にセントレア空港までいきながら、...

先日、AppleMusicでAmPmの曲の中で、聴いたことのない曲を聴いていたときに、OnTheBlackandWhiteという曲がとても印象的でした。 YouTube動画は、歌詞付きPVとリミックスバージョンの2種類あります。 個人的にはリミックスバージョンの方が好きです。 歌詞付きPV https://ww...

先日、AppleMusicでAmPmの曲の中で、聴いたことのない曲を聴いていたときに、OnTheBlackandWhiteという曲がとても印象的でし...

SWOT分析とは、強みと弱み、機会と脅威を分析するマーケティングフレームワークです。 私は普段、フリーランスのWEB制作のエンジニアとして活動しています。 今後の方向性を決めるために、SWOT分析をしたいと思います。 Strength(強み) 実務経験 2019年末にTECH::EXPERTを受講して以来、...

SWOT分析とは、強みと弱み、機会と脅威を分析するマーケティングフレームワークです。 私は普段、フリーランスのWEB制作のエンジニアとして活動...

SassはCSSを効率的に書くことのできる言語です。 ブレイクポイントとは、レスポンシブなサイトをコーディングする際に、どの画面幅でCSSを切り替えるのかを指定する値です。 本記事では、Sassでブレイクポイントを指定する方法について書いていきます。 結論のコード まずはブレイクポイントを定義して、$br...

SassはCSSを効率的に書くことのできる言語です。 ブレイクポイントとは、レスポンシブなサイトをコーディングする際に、どの画面幅でC...

moreは、あなたの可能性はもっとあるという思いが込められた曲名です。 Youdon'thavetobesomebody. あなたは他の誰かになる必要なんてない。 というメッセージは、自己肯定感が下がってしまった時に、自分を元気付けてくれます。 結局、自分以外にはなれないから、自分の潜在的な可能性を信じて発揮して...

moreは、あなたの可能性はもっとあるという思いが込められた曲名です。 Youdon'thavetobesomebody. あなたは他の...

私は普段、EC-CUBEというオープンソースのECシステムで作成されたサイトの改修を行なっています。 EC-CUBEでは、twigというPHPのテンプレートエンジンが使用されています。 拡張子は、.twigです。 そんなtwigの文法について(フロントエンドのみ)書いていきます。 変数定義 シンプルに代入し...

私は普段、EC-CUBEというオープンソースのECシステムで作成されたサイトの改修を行なっています。 EC-CUBEでは、twigというPHP...

こちらの本でTypeScriptの学習を進めています。 前回は、本書のchapter3が完成しましたので、今回は、chapter4の「ブラウザで動くアプリケーションを作ってみよう」に入っていきました。 コミット履歴はこちら chapter4で作るアプリ chapter4で作るアプリは、ブラウザで動くTOD...

こちらの本でTypeScriptの学習を進めています。 前回は、本書のchapter3が完成しましたので、今回は、chapter4の「...

BEMは、クラス名をどのように付けていったらいいのかについての考え方です。 BEMの前に、HTMLとCSSについて書いていきます。 HTMLとCSSについて WEBサイトのデザインは、HTMLとCSSによって成り立っています。 HTMLについているクラスに対して、CSSを記述することで、WEBサイトのデザインが表...

BEMは、クラス名をどのように付けていったらいいのかについての考え方です。 BEMの前に、HTMLとCSSについて書いていきます。 HT...

無印良品に行くと、食品・家電・日用品など様々な商品を目にする。 これらの商品は、他のお店でも売られているものだ。 そこで、無印とそれ以外で、同じ種類の商品を比較してみたいと思った。 カレー ここで紹介するカレーは、レトルトカレーだ。 無印 無印のカレーはこちら。世界中のカレーを研究して商品開発...

無印良品に行くと、食品・家電・日用品など様々な商品を目にする。 これらの商品は、他のお店でも売られているものだ。 そこで、無印と...

こちらの本でTypeScriptの学習を進めています。 前回は、ユーザーがゲームを選択できるようにしました。今回は、その続きです。 コミット履歴はこちら 行ったこと ゲーム終了後にゲームを変更できるようにした ゲーム終了後に、最初に選んだゲームを変更することが出来なかったので、ゲーム変更ができるよう...

こちらの本でTypeScriptの学習を進めています。 前回は、ユーザーがゲームを選択できるようにしました。今回は、その続きです。 ...

クラウドワークスで応募して1ページ静的サイトのコーディングを任せていただけました。 AdobeXDのデザインデータからで、レスポンシブ対応で構築しました。 画像はWebp対応を行いました。 公開サイト こちらが公開されたサイトです。 使用した技術 メインスライドやページ内リンク、スマホハンバーガーメニ...

クラウドワークスで応募して1ページ静的サイトのコーディングを任せていただけました。 AdobeXDのデザインデータからで、レスポンシブ対応で構...

キャッシュは、ブラウザがCSSや画像などのデータを一時的に保存しておく仕組みです。 キャッシュが残っていると、CSSや画像を変更しても、「以前のデータが残っていて、変更が反映されない」といったことが起こります。 ブラウザの強制リロードを行いキャッシュを削除するという方法もありますが、全てのユーザーにそれをさせるのは現実的では...

キャッシュは、ブラウザがCSSや画像などのデータを一時的に保存しておく仕組みです。 キャッシュが残っていると、CSSや画像を変更しても、「以前...

名鉄メンズ館8階の無印良品にコワーキングスペースがあるので、レビューしたいと思います。 2023年6月追記 今日行ってみたら、コワーキングスペースが無くなっていました。 値引きした商品の販売場所になっていました。 基本情報 使用可能時間は、10:00〜20:00です。(名鉄の開館時間と同じ) 席は、8...

名鉄メンズ館8階の無印良品にコワーキングスペースがあるので、レビューしたいと思います。 2023年6月追記 今日行ってみたら、コワーキン...

先日LPコーディングを行った際に、XDのデザインデータで指定されていたフォントを完全に再現することが出来なかったので、CSSでデザインのフォントを再現するにはどうすればいいのかについて書いていきます。 今回再現できなかったフォントと代替フォント 今回再現できなかったフォント 今回、デザインデータで指定されていたフォント...

先日LPコーディングを行った際に、XDのデザインデータで指定されていたフォントを完全に再現することが出来なかったので、CSSでデザインのフォントを再...

愛・地球博記念公園に行ってきたので、ブログを書いていきます。 ちょうど、万博が開催されていたときに小学校の遠足で行きました。それ以来となります。 経路(電車) 以下の経路を使用しました。料金は、片道670円でした。 地下鉄東山線名古屋駅乗車→終点:藤が丘駅下車(310円) リニモ東部丘陵線八草行き...

愛・地球博記念公園に行ってきたので、ブログを書いていきます。 ちょうど、万博が開催されていたときに小学校の遠足で行きました。それ以来と...

先日、クラウドワークスの「XDデータからのLPコーディング案件」に応募したところ、ありがたいことに、ご依頼いただけました。 納品完了したので、今回使用した技術について書いていきます。長くなりそうなので、今回は、jQueryに絞って書いていきます。 ページスクロール ナビゲーションをクリックしたときに、特...

先日、クラウドワークスの「XDデータからのLPコーディング案件」に応募したところ、ありがたいことに、ご依頼いただけました。 納...

「人生は楽しむためにある」というのが、この本の著者樺沢さんの主張です。私もその意見に完全に同意します。 楽しい1日が毎日続けば、"1ヶ月楽しかった"と感じる。1年続けば、"今年も楽しかった"となる。そして、一生続けば、"楽しい人生だった"となる。 本記事では、楽しむことについて、本書と私の体験を踏まえて、書いていきます。 ...

「人生は楽しむためにある」というのが、この本の著者樺沢さんの主張です。私もその意見に完全に同意します。 楽しい1日が毎日続けば、"1ヶ月楽しか...

おはようございます。フリーランスWeb制作エンジニアの柴田浩貴です。今回は、「HTML/CSSで実現可能なこと」というテーマで記事を書いていきます。 画面を構築することができる【HTML/CSS】 HTMLは、マークアップ言語と呼ばれ、画面の骨格を規定する言語です。一方、CSSはスタイルシート言語と呼ばれ、画面の見た...

おはようございます。フリーランスWeb制作エンジニアの柴田浩貴です。今回は、「HTML/CSSで実現可能なこと」というテーマで記事を書いていきます。...

数年前からよく耳にする「Shopify」についてまとめてみたいと思いました。(※音楽ストリーミングサービスのSpotifyではありません。) 実際にアカウントを作成して、14日間無料トライアルしてみて分かったことをまとめていきます。 最初に行うこと テーマのカスタマイズ、ページ追加、メニューの整理、ロゴ作成、最初の商品...

数年前からよく耳にする「Shopify」についてまとめてみたいと思いました。(※音楽ストリーミングサービスのSpotifyではありません。) ...

こちらの本でTypeScriptの学習を進めています。 前回は、ユーザーが想定外の難易度を入力した時の対処を行いました。今回は、その続きです。 コミット履歴はこちら 行ったこと ユーザーがゲームを選択できるようにしました 新たにジャンケンゲームを追加して、ゲーム開始時にユーザーが、「ヒット・アンド・...

こちらの本でTypeScriptの学習を進めています。 前回は、ユーザーが想定外の難易度を入力した時の対処を行いました。今回は、その続...

当サイトのトップブログセクションのタグをクリックするとそのタグの記事のみが表示されます（本記事執筆時点） 例えば技術ブログの「#HTML/CSS」をクリックすると、HTML/CSSというタグを持つ記事のみが表示されます。 こんな感じで何かの要素をクリックしたときに、対象の要素の表示・非表示が切り替わる仕組みをJava...

当サイトのトップブログセクションのタグをクリックするとそのタグの記事のみが表示されます（本記事執筆時点） 例えば技術ブログの「#HTML/CS...

3連休の中日である本日。 名古屋駅前は人がかなり多かった。 人が多いだけではなく、デモの演説も行っていた。 また、暑かった。 不快な要素は、以下の3つだ。 人が多い うるさい 暑い よって、人が少なく、静かで、涼しい場所を探す旅に出た。 名古屋から名鉄でセントレアに向かう ...

3連休の中日である本日。 名古屋駅前は人がかなり多かった。 人が多いだけではなく、デモの演説も行っていた。 また、暑かった。 ...

使用しているフォームはWordPressのContactform7です。 以下2点に関して書いていきます。 functions.phpに記述する内容 例外 functions.phpに記述する内容 これで、都道府県の欄に日本語以外を入力した場合に「日本語で入力してください」というエラーメッセージが表示さ...

使用しているフォームはWordPressのContactform7です。 以下2点に関して書いていきます。 functions.php...