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

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

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

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

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

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

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

先日、AppleMusicでAmPmの曲の中で、聴いたことのない曲を聴いていたときに、On The Black and White という曲がとても印象的でした。 YouTube動画は、歌詞付...

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

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

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

SassはCSSを効率的に書くことのできる言語です。 ブレイクポイントとは、レスポンシブなサイトをコーディングする際に、どの画面幅でCSSを切り替えるのかを指定する値です。 本記...

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

moreは、あなたの可能性はもっとあるという思いが込められた曲名です。 You don't have to be somebody. あなたは他の誰かになる必要なんてない。 という...

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

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

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

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

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

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

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

無印良品に行くと、食品・家電・日用品など様々な商品を目にする。 これらの商品は、他のお店でも売られているものだ。 そこで、無印とそれ以外で、同じ種類の商品を比較してみたいと思った...

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

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

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

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

キャッシュは、ブラウザが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ヶ月楽しかった" と感じる。1年続けば、"今年も楽しかった...

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

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

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

数年前からよく耳にする「Shopify」についてまとめてみたいと思いました。(※音楽ストリーミングサービスのSpotifyではありません。) 実際にアカウントを作成して、14日間無料トライアル...

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

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