JavaScriptで簡単な開閉メニュー
・はじめに JavaScriptとCSSを利用して簡単なアコーディオンメニューを作ったのでそれを記録する記事です。もっとこうすればいいよなどのアドバイスがあればよろしくお願いいたします。 ・コード…
View Article【CSS】【position】height100%,width100%の親要素の高さを子要素が検知しない時の魔法
条件 １. position:relativeで親要素にwidth:100%,height:100%を設定している。 2.left,right,top,bottomなどで子要素がうまく配置できない。 解決…
View Articleブラウザゲーム制作：赤と青のブロックを選べ！
目次 記事の内容 なぜ記事を書こうと思ったのか 開発環境について 本編 スタート画面の見た目 ゲーム画面の見た目 動くブロックの作り方 複数の動くブロックの作り方 選択機能と時間表示を追加 開始画面…
View Article【CSS】CSSだけでスクロールに合わせたアニメーションがつくるscroll-driven animationsを触ってみた。
はじめに みなさんは、scroll-driven animationsを知ってますか？ scroll-driven animationsは、Chrome 115でCSSだけで、スクロールに合わせたア…
View ArticleNext.jsでcss
Next.jsでcss 1. Next.jsのGlobal CSSの使用例: Next.jsでは、Global CSSは特定の方法で使用する必要があります。以下にその一例を示します。 まず、プロジェ…
View ArticleCSSでなるべく子孫セレクターなどの結合子を用いたセレクター使わない方が良い理由
これは何 CSSでなるべく子孫セレクターなどの結合子を用いたセレクター使わない方が良い理由を整理しました。 結合子とは や>でセレクターを繋ぐことで、特定のタグやクラスの子要素や後にくる要素にスタイ…
View ArticleCSS だけでモーションブラー風のエフェクトをつける
この記事の概要 アニメーションにおいて、モーションブラーという概念があります。 現実世界で動いているものを撮影すると残像が尾を引くので、それを再現した効果です。 同じ速度・動き方でも、モーションブラ…
View Article【CSS】CSSだけでパララックスを再現する
はじめに みなさんは、パララックス（parallax）と聞いたことがあるでしょうか？ 最近のサイトは、要素がふわっとフェードインしたり、要素の移動速度が違ったり、 スクロールに応じて色々なアニメーシ…
View Article色を毎回指定せず、currentColor をベースにちょっと薄くしたり濃くしたりしたいんだよなあ……そうだ！
この記事の概要 CSS の currentColor は、その要素の color を引き継いで色を指定することができます。 文字とまったく同じ色のボーダーを引きたいとか、アイコンの色指定をしたい、と…
View Article【CSS】flex-growを使おう
はじめに 問題 早速ですが、こんな時どう実装しますか？ 少し前までの私 Headerは、height: 100pxでpadding: 10pxということは上下のpaddingを足して120px Fo…
View Article某プロフィールサイトより早いサイトをGitHub Pages縛りで作りたかった
概要 インターネット史上、最速のサイトとして名高い某男優のプロフィールサイトを超えるため、Lighthouseのスコア改善に取り組んだメモです。 私の経験としては、サイトの速度改善はおろか、フロント…
View Article【JavaScript】Webページ内にタブ切り替えイベントを実装してみた
背景 Webサイトに載せるコンテンツが1ページで収まり切れないけど、１ページ内に詰め込み過ぎるとUXが下がってしまうときがあると思います。 このような場合、ページ内にタブ切り替えを実装する事でUXが…
View ArticleSCSSのランダム関数を用いてテーマカラーをランダムに生成したい
概要 SCSSにrandom()という関数があり、CSSにコンパイルした時にランダムな値が数値されます。 ランダム値の生成のタイミングは、ブラウザリロードではなくCSSコンパイル時です。 今回は、ラ…
View Article非エンジニア（クリエイター）が挫折しないためのコーディング初学者向け無料学習サービスを使ってみた感想。
自己紹介 経営学部卒の非エンジニア（クリエイター）が、これまでディレクションを中心に活動をしてきていましたが、ご縁あってエンジニアの方と近い距離でお仕事をすることになりました。元々コーディングの基礎…
View Article非エンジニア（クリエイター）のはじめてのコーディング学習で挫折を支えるCSSセレクタチートシート一覧。
自己紹介 経営学部卒の非エンジニア（クリエイター）が、これまでディレクションを中心に活動をしてきていましたが、ご縁あってエンジニアの方と近い距離でお仕事をすることになりました。元々コーディングの基礎…
View ArticleアイコンフォントならPhosphor Iconsがおすすめ
Webサイトを作る際に、気軽にアイコンフォントを導入したいときがあるかと思います。 そういったとき、最近はPhosphor Iconsを気にって使っているのですが、 誰も話題に挙げていないので、他の…
View Article私はロボットでありません(reCAPTCHA)のレイアウトのものを作成「ネタ枠」
はじめに 最近暇だったのでインターネットでよく見るあなたはロボットではありませんを自作したと思いネタで作成した。この本のネタはGoogleが提供しているreCAPTCHAというものである。以下のコー…
View Articlebeatmania IIDXをブラウザで練習できるようにしたぞ！！
目次 記事の内容 なぜ記事を書こうと思ったのか なぜ作ろうと思ったのか 本編 画面の見た目 JS部分の説明 要素取得 保存データ適用 同時に落ちるノーツ数の決定 重複なしの場合のノーツが落ちる場所を…
View Article備忘録：下向きの三角でセクションを区切りたい
未だに「三角といえばborder！」が通説だが、borderプロパティでの三角形描画には違和感がある。 もっとスマートな手段が無いか調べたら実装方法はすぐ出てきたが、数が少なかったので 備忘録として…
View Article