2022年5月の記事

2022.05.27（更新日: 2025.06.28）
YouTubeのポップアップモーダルを作成する方法
現在取り組んでいるLPコーディングで、YouTubeをポップアップモーダルで表示するという仕様を実現したので、それについて書いていきます。 「modaal」というモーダルウインドウのプラグインを使用しました。 デモサイト デモサイトはこちらです。 デモサイトにある画像をクリックすると、以下のような、YouTubeのポップアップモーダルが表示されます。 以下の手順で作成しました。 ...
2022.05.25（更新日: 2025.06.29）
Easy Table of Contentsでスクロールの高さを調整するには？
先ほど、ブログページの目次をクリックした時に、ヘッダーの高さを考慮してスクロールの高さを調整しました。 どうやって調整したのかについて書いていきます。 目次には、WordPressのプラグイン「Easy Table of Contents」を使用しました。 手順1: 設定画面に移動する まずは、設定 > 目次をクリックして、プラグイン設定画面に移動します。 設定 > ...
2022.05.22（更新日: 2023.06.24）
仕事は楽しいかね？
ずっと前からタイトルを見て気になっていた本でした。サンタクロースのおじさんの表紙の本です。 私はたまに気分転換にセントレア空港までいきながら、途中の本屋で買った本を読んでいます。 今回は「仕事は楽しいかね？」を読みました。 どんなお話か？ 「チーズはどこへ消えた？」のような物語形式でストーリーが進んでいきます。 35歳の会社員と金持ちの老人が空港で出会ってから対話していくという ...
2022.05.20（更新日: 2023.08.17）
AmPm / On The Black and White feat. Doul
先日、AppleMusicでAmPmの曲の中で、聴いたことのない曲を聴いていたときに、On The Black and White という曲がとても印象的でした。 YouTube動画は、歌詞付きPVとリミックスバージョンの2種類あります。 個人的にはリミックスバージョンの方が好きです。 歌詞付きPV ゆっくりとしたテンポで、途中にラップが入っています。 黒はみんなから嫌われるけ ...
2022.05.20（更新日: 2025.10.08）
SWOT分析をしてみた
SWOT分析とは、強みと弱み、機会と脅威を分析するマーケティングフレームワークです。 私は普段、フリーランスのWEB制作のエンジニアとして活動しています。 今後の方向性を決めるために、SWOT分析をしたいと思います。 Strength(強み) 実務経験 2019年末にTECH::EXPERTを受講して以来、以下の実務経験を積んできました。 スキルセット 以下のスキルセットがあり ...
2022.05.18（更新日: 2023.01.05）
Sassでブレイクポイントを指定する方法
SassはCSSを効率的に書くことのできる言語です。 ブレイクポイントとは、レスポンシブなサイトをコーディングする際に、どの画面幅でCSSを切り替えるのかを指定する値です。 本記事では、Sassでブレイクポイントを指定する方法について書いていきます。 結論のコード まずはブレイクポイントを定義して、$breakpointに代入します。 ブレイクポイントの値は、bootstrap ...
2022.05.17（更新日: 2025.07.03）
AmPm / more feat. DedachiKenta & FUNTYME
moreは、あなたの可能性はもっとあるという思いが込められた曲名です。 You don’t have to be somebody. あなたは他の誰かになる必要なんてない。 というメッセージは、自己肯定感が下がってしまった時に、自分を元気付けてくれます。 結局、自分以外にはなれないから、自分の潜在的な可能性を信じて発揮していこうよということを歌っているようにも思えま ...
2022.05.16（更新日: 2023.01.05）
twigの文法
私は普段、EC-CUBEというオープンソースのECシステムで作成されたサイトの改修を行なっています。 EC-CUBEでは、twigというPHPのテンプレートエンジンが使用されています。 拡張子は、.twigです。 そんなtwigの文法について(フロントエンドのみ)書いていきます。 変数定義 シンプルに代入したい場合 例えば、商品の名前をfooという変数に入れたい場合は、下記のよ ...
2022.05.15（更新日: 2024.08.08）
TypeScript 学習 part10
こちらの本でTypeScriptの学習を進めています。 前回は、本書のchapter3が完成しましたので、今回は、chapter4の「ブラウザで動くアプリケーションを作ってみよう」に入っていきました。 コミット履歴はこちら chapter4で作るアプリ chapter4で作るアプリは、ブラウザで動くTO DOアプリです。 ブラウザで動くアプリの留意点 アプリの規模が大きい場合は ...
2022.05.14（更新日: 2022.12.27）
BEMについて
BEMは、クラス名をどのように付けていったらいいのかについての考え方です。 BEMの前に、HTMLとCSSについて書いていきます。 HTMLとCSSについて WEBサイトのデザインは、HTMLとCSSによって成り立っています。 HTMLについているクラスに対して、CSSを記述することで、WEBサイトのデザインが表示されています。 例えば、MUJI HOTELのサイトのこちらのメ ...
2022.05.13（更新日: 2023.06.12）
無印と他社製品との違い
無印良品に行くと、食品・家電・日用品など様々な商品を目にする。 これらの商品は、他のお店でも売られているものだ。 そこで、無印とそれ以外で、同じ種類の商品を比較してみたいと思った。 カレー ここで紹介するカレーは、レトルトカレーだ。 無印 無印のカレーはこちら。世界中のカレーを研究して商品開発していると聞いたことがある。 not 無印 ファミリーマートに売っていたカレーはこちら ...
2022.05.12（更新日: 2024.08.08）
TypeScript 学習 part9
こちらの本でTypeScriptの学習を進めています。 前回は、ユーザーがゲームを選択できるようにしました。今回は、その続きです。 コミット履歴はこちら 行ったこと ゲーム終了後にゲームを変更できるようにした ゲーム終了後に、最初に選んだゲームを変更することが出来なかったので、ゲーム変更ができるようにしました。 before 【ゲーム開始時】 hit and blowか、jan ...
2022.05.12（更新日: 2023.01.01）
XDデザインデータからの1ページ静的サイトコーディング
クラウドワークスで応募して1ページ静的サイトのコーディングを任せていただけました。 AdobeXDのデザインデータからで、レスポンシブ対応で構築しました。 画像はWebp対応を行いました。 公開サイト こちらが公開されたサイトです。 使用した技術 メインスライドやページ内リンク、スマホハンバーガーメニューにjQueryを使用しました。
2022.05.11（更新日: 2025.10.10）
キャッシュについて
キャッシュは、ブラウザがCSSや画像などのデータを一時的に保存しておく仕組みです。 キャッシュが残っていると、CSSや画像を変更しても、「以前のデータが残っていて、変更が反映されない」といったことが起こります。 ブラウザの強制リロードを行いキャッシュを削除するという方法もありますが、全てのユーザーにそれをさせるのは現実的ではありません。 本記事では、ユーザーが何もしなくても、W ...
2022.05.10（更新日: 2023.06.11）
名鉄にある無印（MUJI）のコワーキングスペースについて書きます。
名鉄メンズ館8階の無印良品にコワーキングスペースがあるので、レビューしたいと思います。 2023年6月追記 今日行ってみたら、コワーキングスペースが無くなっていました。 値引きした商品の販売場所になっていました。 基本情報 使用可能時間は、10:00〜20:00です。(名鉄の開館時間と同じ) 席は、8席です。 使用料は、無料です。 景色 目の前は、空が開けているので快適です。 ...
2022.05.09（更新日: 2025.06.29）
デザインカンプ固有のフォントをCSSで再現する方法
先日LPコーディングを行った際に、XDのデザインデータで指定されていたフォントを完全に再現することが出来なかったので、CSSでデザインのフォントを再現するにはどうすればいいのかについて書いていきます。 今回再現できなかったフォントと代替フォント 今回再現できなかったフォント 今回、デザインデータで指定されていたフォントは、FOT-筑紫B丸ゴシック Stdです。 XDでの表示 代 ...
2022.05.08（更新日: 2023.01.05）
愛・地球博記念公園
愛・地球博記念公園に行ってきたので、ブログを書いていきます。 ちょうど、万博が開催されていたときに小学校の遠足で行きました。それ以来となります。 経路(電車) 以下の経路を使用しました。料金は、片道670円でした。 「意外と近いな」と思いました。 見たもの 愛・地球博記念館 無料の展示が行われていました。 愛・地球博についての説明などもありましたが、世界中から募集した中で厳選し ...
2022.05.08（更新日: 2022.12.27）
LPコーディングで使用した「jQuery」
先日、クラウドワークスの「XDデータからのLPコーディング案件」に応募したところ、ありがたいことに、ご依頼いただけました。 納品完了したので、今回使用した技術について書いていきます。長くなりそうなので、今回は、jQueryに絞って書いていきます。 ページスクロール ナビゲーションをクリックしたときに、特定のセクションに飛ぶようにしました。 「aタグをクリックしたら、変数elmH ...
2022.05.07（更新日: 2023.06.24）
毎日を楽しめる人の考え方
「人生は楽しむためにある」というのが、この本の著者 樺沢さんの主張です。私もその意見に完全に同意します。 楽しい1日が毎日続けば、”1ヶ月楽しかった” と感じる。1年続けば、”今年も楽しかった” となる。そして、一生続けば、”楽しい人生だった” となる。 本記事では、楽しむことについて、本書と私の体験を踏ま ...
2022.05.03（更新日: 2025.10.03）
HTML / CSSで実現可能なこと
No image
おはようございます。フリーランスWeb制作エンジニアの柴田浩貴です。今回は、「HTML / CSSで実現可能なこと」というテーマで記事を書いていきます。 画面を構築することができる【HTML / CSS】 HTMLは、マークアップ言語と呼ばれ、画面の骨格を規定する言語です。一方、CSSはスタイルシート言語と呼ばれ、画面の見た目を規定する言語です。 例えば、下記サイトでは、Ado ...
2022.05.02（更新日: 2023.01.01）
Shopifyとは？実際に試してみた
数年前からよく耳にする「Shopify」についてまとめてみたいと思いました。(※音楽ストリーミングサービスのSpotifyではありません。) 実際にアカウントを作成して、14日間無料トライアルしてみて分かったことをまとめていきます。 最初に行うこと テーマのカスタマイズ、ページ追加、メニューの整理、ロゴ作成、最初の商品追加、ドメインの追加など、初期設定をする必要があります。これ ...
2022.05.01（更新日: 2024.08.08）
TypeScript 学習 part8
こちらの本でTypeScriptの学習を進めています。 前回は、ユーザーが想定外の難易度を入力した時の対処を行いました。今回は、その続きです。 コミット履歴はこちら 行ったこと ユーザーがゲームを選択できるようにしました 新たにジャンケンゲームを追加して、ゲーム開始時にユーザーが、「ヒット・アンド・ブロー」か「ジャンケン」のどちらで遊ぶかを選択できるようにしました。 実行の様子 ...

タグ一覧

タグ

年月

↑

↑