find this code : null!==localStorage&&"dark"==localStorage.getItem("theme")&&(document.querySelector("html").className="dark-mode"); replace with this : null==localStorage.getItem("theme")&&(localStorage.setItem("theme","dark"),document.querySelector("html").className="dark-mode"),&

はてなブログでは記事がない、カテゴリーがないときに「404 Not Found」ページが表示されますが、オリジナルのメッセージや画像を表示するようにカスタマイズしてみました。 今まではこんな感じでJavaScriptを使っていましたが、簡単なものならCSSだけでなんとかなるのではと、また新しく作りなおしました（バージョン3です）。 完成したものはこちら → 404 Not Found ページ （デザイン→カスタマイズ→「デザインCSS」にコードを入力） CSS .no-entry h1 { font-size: 0; margin: -2px 0 0 !important; } .no-entry h1:before { font-size: 19px; content: "お探しのページは見つかりませんでした"; } .no-entry p { font-size: 0; margin:

はてなブックマークをよく見るんだけど、Anonymous Diary（増田）とTogetterは本当にどうでもいいエントリが多いなと思う。 本当はそれを「ブコメしたいだけ」つってブックマークする質の低いユーザーが問題なんだけどそれはさておき、これらのサイトを丸ごと無視しておきたい。 そこでUserStyleを使う。 MacとiOSのSafariではこの拡張で使えるようになる↓のでインストール Userscripts Justin Wasack開発ツール無料apps.apple.com こんなスタイルを書く。 /* ==UserStyle== @name hatebu-css @description This is your new file, start writing code @match https://b.hatena.ne.jp/* ==/UserStyle== */ li[c

以下の公開計測会でやったものを個別に解説してみる。 細かいテクニックが多いのだが、それを可能な限りテキストとスクショで解説したい。使い方の解説が中心で、どういう意味があるかは解説しない。 Chrome131時点のスクリーンショットで、後で読む場合は頻繁にUIが変わっている点に注意。大事なのは意図。 宣伝: これを御社のサイトで解説する仕事をやっています。 デモのURL これに意味はなく、今日偶然見ていただけで意図はない。関係ないがエッジランナーズは最高のアニメ。 DevTools を開く F12 or 右クリックから「検証」 DevTools > Lighthouse この状態で計測 このとき、新しいプロファイルを作ったりして、可能な限り Chrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。 Lighthouse レポートの読み方 点数部分にマウス

見た目もすごく良いんだよなぁ。 こちらの不思議なかたちをした板｢オトノハ｣は、不要な反射音を抑える音響拡散体というもの。いったいどれほど聞こえ方が変わるのか、東京楽器博2024にて実際に試聴してきました。 イコライザーいじった？ ボーカルがよく通る！2台のスピーカーの後ろに｢オトノハ｣を置いた状態と置いていない状態を比較試聴してみましたが、結論として…確かに音が違う！ ｢オトノハ｣を置くと、キックの中低域ぼ厚みが減衰し、ボーカルがより聞こえやすくなりました。YOASOBIの『アイドル』、Creepy Nutsの『Bling-Bang-Bang-Born』を試聴しましたが、女声男性問わず効果を感じましたね。吸音材のように残響感が変わったわけではなく、イコライザーで低域のこもりをちょい下げしたような印象。 にしても、どうして｢オトノハ｣を置いただけで聞こえ方が変わったのか。｢オトノハ｣の独特な

はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <

CSSの@starting-styleが先日リリースされたFirefoxでもサポートされ、これでデスクトップ・スマホのすべてのブラウザでサポートされました。 @starting-styleはアニメーション化させる要素に対して開始時のスタイルを設定でき、display: none;からアニメーション化する要素に対して必須となります。 Now in Baseline: animating entry effects by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSの@starting-styleとは allow-discreteで離散アニメーションを有効にする アニメーションさせる要素に対して開始値を設定するデモ 終わりに はじめに Four ne

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 今回は記事1本で初心者が必要な知識を全て学べるGitチュートリアルを紹介していきます。 世の中にはたくさんのGitに関する教材があります。しかし、真に良いと思える教材はありません。 もちろん私も4年前はGitという言葉を知らない状態から、書籍などで学習をしました。 しかし、書籍で知識を得たとしても実際にコマンドを使って実践的に学んだわけではなかったのでほとんど身になりませんでした。 私が思う世の中にあるGitの教材のイケてない点は2つです。 結局ほとんどの

YouTubeの「トピック」チャンネルは、合法です！ こういうジャケット画像＋音楽のやつは、「アートトラック」という、YouTube公式のしくみです！ あやしく見えるかもしれませんが、これはYouTube Musicにアーティストが楽曲を登録したとき、YouTube上に公式MV（ミュージックビデオ）などがない場合に自動生成される動画です！ YouTube Musicと同じく、再生数に応じてアーティストに収益が還元されます！ Spotifyみたいなものです！ 超合法＆超健全です！ なので……なので…… もう許してください…… 違うんです……非公式転載じゃないんです……これは公式のしくみを使って記事に載せてるだけなんです…… 知ってます…… いや、もちろん法律を暗記してるわけじゃないから、詳しくはないんだろうけど、ある程度知ってるつもりだから公式のしくみを利用しています…… 怪奇！ 公式ないし

Chrome DevTools（以下、開発者ツール）は開発者にとって欠かせないツールですが、改めて使い方を調べたことは少ないのではないでしょうか？ この記事では開発者ツールの便利な機能をまとめて紹介します！筆者はChromeをメインで使用しているのでChrome DevTools前提ですが、一部拡張機能や他のブラウザの便利な機能を含みます。 スクリーンショットをキャプチャする 端末の機能でもスクリーンショットをキャプチャすることはできますが、開発者ツールではより便利なスクリーンショットの機能が提供されています。 特定のノードのスクリーンショットをキャプチャする Elementsパネルからスクリーンショットをキャプチャしたいノードを選択します ノードを右クリックして「Capture node screenshot」をクリックします 選択したノードのスクリーンショットがダウンロードフォルダに保

この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。 どのボタンも基本、HTMLとCSS（JSもすこし）で作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在。 ボタンをデザインするときに気をつけたいポイントをチェックしておけば、より効果的なボタンの使い方ができますよ。有名サイトのボタンをコピペできるサービスもおすすめです。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット きらりと輝くコール・トゥ・アクションボタン すべてのモダンブラウザでサポートされるようになった@propertyを利用した新しいCSSの使い方エフェクト。細部まで洗練されあt、注目を集めるCTAボタン。

CSSはどんどん便利になっていますね！ これまではJavaScriptを使用しないとできなかったことがCSSで簡単に実装できるようになっています。 CSSのfield-sizing: content;でフォームのテキストエリアのサイズを入力された文字量に合わせて自動変更したり、テキストエリアの高さを行の高さで設定するlh単位を使ったCSSのテクニックを紹介します。 フォームのテキストエリアに使用するCSSのテクニックは、2つあります。 field-sizing: content;で、コンテンツに合わせてテキストエリアを自動的にサイズ変更する。 lh単位で、テキストエリアの高さを行の高さで設定する。 HTMLは、textareaを用意するだけです。

呪文(プロンプト)とは? 呪文(プロンプト)とはStable Diffusionをはじめとする画像生成AIに入力する文章のことです。呪文(プロンプト)は画像の特徴を表すようなキーワードや文章を,区切りで入力するのが一般的な呪文(プロンプト)です。呪文(プロンプト)は呪文と呼ばれることも多いです。 呪文(プロンプト)には次のようなキーワードが指定されることが多いです。 画像の品質、クオリティ(例: masterpiece, best quality) カメラフォーカス(例: sharp focus, depth of field, blur background, bokeh) ライト・ting) 構図(例: front view, full body) 人物(例: 20 years old woman, 15 years old actress) ポーズ(例: looking at vie

すまほん!! » Android » Android端末のレビュー » Pixelのレビューを信用するな！Googleべったりインフルエンサー以外を打ち切れる、不当な契約条項が明らかに Google忖度インフルエンサー以外は冷遇。 Googleが、Pixel 9のレビュー契約において技術系インフルエンサーに対し、競合製品よりもPixelを優遇していることを求めていたことが明らかになりました。実質的にインフルエンサーを脅迫しているとしてThe Vergeが報じています。 この問題は、Googleの招待制プログラム「Team Pixel」の参加者向け契約書に記載された新しい条項から発覚しました。契約書には、参加者はPixel製品を競合他社の端末と並べて紹介してはならず、他のブランドを優遇しているように見える場合は関係を終了すると明記されていたそうです。 この条項の存在が明らかになると、多くのク

これらの JavaScript エンジンのうち、以下では特に JavaScriptCore を扱います。 最適化の基本戦略 JavaScript をはじめとする動的言語は、主にインタープリタにおいて実行されます。しかし、インタープリタはコンパイルされたコードと比較して実行に時間を要するという欠点があります。そこで、インタープリタの最適化では、バイトコードの JIT コンパイルが最初に行われます。 しかし、コンパイルには当然時間がかかります。少しでも高速化されたコードを生成するには、より多くの時間をコンパイルにかけなければなりません。コンパイルによる速度向上とコンパイルのレイテンシはトレードオフの関係にあります。 そこで、多くの JavaScript エンジンは、インタープリタと多階層の JIT コンパイラの組み合わせで構成されています。次の図は、主要な JavaScript エンジンの設計