はてなブックマーク

CSSのvisibilityプロパティを使って非表示の親要素の中で子要素だけ表示する方法を紹介しています。 See the Pen CSS | visibility by yochans (@yochans) on CodePen. 非表示の親要素の中で子要素だけ表示する CSSで要素を非表示にする方法は「display: none;」「opacity: 0;」などもありますが、これらは親要素で指定した場合は子要素で非表示を解除できません。 「display: none;」「opacity: 0;」は、親要素のプロパティであり、親要素が非表示になっている以上は子要素では解除できないからです。 親要素で非表示にして特定の子要素だけ表示したい場合は、visibilityプロパティを利用します。 visibilityプロパティも要素を非表示にすると、子要素も非表示になりますが、プロパティのスタイ

JavaScriptだけでスクロールで要素が画面内に入ったら実行するイベントを実装する方法を紹介しています。 jQueryの「on」イベントでいうところの「inview」と同じような動作になると思います。 スクロールで要素が画面内に入ったら実行するイベント スクロールで要素が画面内に入ったら実行するイベントの動作サンプルとJavaScriptのサンプルコードになります。 動作サンプルではターゲット要素が画面内に入った時に一度だけ実行するようにしていますので、再度動作チェックする場合は「Rerun」を押して下さい。 See the Pen JavaScript | Add css style to head by yochans (@yochans) on CodePen. サンプルのHTMLにはスクロールを確認する為に高さを持つ要素を並べています。 また、4つ目の要素を画面内に入ったらイベ

それぞれ適当に透過させたりしています。 特に難しい事はしていませんので簡単にカスタマイズできると思います。 .container { width: 100%; height: 260px; background: #000; } .fried-egg { position: relative; top: 0; left: 50%; width: 0; height: 100%; transform: scale(1); } .white { position: absolute; top: 130px; width: 260px; height: 170px; background: #d3d3d3; border-radius: 50% 50% 50% 70%/50% 50% 70% 60%; transform: translate(-50%, -50%); } .white::bef

CSSでtransform-styleのpreserve-3dを使って、3Dなサイコロを作成する方法を紹介しています。 See the Pen CSS | 3D Dice by yochans (@yochans) on CodePen. 主にダイスの目の設定などについて書いています。 角丸にしたり、隙間をあけたりと多少サイコロっぽく（努力は）していますが、サイコロデザインの元としている立方体の作成方法と殆ど同じです。 立方体の作り方は別記事で紹介しています。 3Dサイコロの作り方この記事はCSSの「transform-style」に「preserve-3d」を指定した立体的なサイコロの作成手順となります。 本体（コンテナ）側面×6サイコロの出目本体と側面については省略しますが、CSS | 3Dな立方体の作り方 | ONE NOTESにて書いていますので、宜しければ見てあげて下さい。 HT

Windows10 | 画面が一瞬黒くなり画面フリーズを起こす、ディスプレイアダプターの無効化でひとまず解決しました Windows10を使っていて画面が一瞬黒くなる現象が発生、終いには画面が表示されたままか黒い画面の状態でフリーズを起こすようになりました。 再起動後、Windowsのイベントビューアーで確認したところ、原因はグラフィックボードである事が確認できました。 スグにブラウザさえ開く事もままならなくなり、動画どころか画像のあるページが表示されようとするだけで黒くなったりフリーズしたりしてしまうようになりました。 PC環境は以下の通りです。 型番 HPE 390CPU core i7 980XGPU NVIDIA GeForce GTX 460 Windows10環境ですが、Windows11でも同様のエラーが発生する可能性があるものと考えられます。 グラフィックボードの寿命 グラ

テキストをクリップボードにコピーするテキストをクリップボードにコピーするボタンイベントを実装するJavaScriptのサンプルコードです。 サンプルではコピーボタンを設置して<p>タグにあるテキストをクリップボードにコピーします。 See the Pen JavaScript Get browser zoom level by yochans (@yochans) on CodePen. HTMLには、コピーするテキストのある<p>タグ、押したらコピーを実行する<button>タグ、結果を表示する用の<p>タグを作成しています。 <p id="copy-text">Copy text</p> <button id="copy-btn">Copy</button> <p id="output"></p>querySelector()でコピーするテキストのある要素を、textContentで内

JavaScriptでユーザーがブラウザの機能でズーム処理をした際にそのズーム値（ズームレベル）をパーセントの倍率で取得する方法を紹介しています。 一定の値以下または一定の値以上はズームさせたくない場合や、ズーム処理を取得したズーム値に合わせて別途実装する場合などに使えます。 スマートフォンのズーム操作にも別の処理で拒否していない限り対応しています。 ブラウザのズーム倍率で取得するブラウザのズーム倍率で取得する動作サンプルとそのJavaScriptコードになります。 このページを「Ctrl + マウスホイール」などで表示サイズを変更すれば、値が更新されます。 スマートフォンの場合も未確認ですが動いていると、思っています。 See the Pen JavaScript Canvas 2d animation by yochans (@yochans) on CodePen. サンプルでは取得

CSSのアニメーションを利用した徐々に要素の背景色を徐々に変化していくサンプルコードです。 2色バージョンと5色バージョンで紹介しています。 徐々に背景色を変更するCSSアニメーション（2色）背景色を変更させるCSSアニメーションのサンプルコードの2色バージョンです。 See the Pen CSS gradually change background color animation 2 by yochans (@yochans) on CodePen. <div class="container"></div>animationプロパティには20秒（アニメーション時間）、linear（開始から完了まで一定のアニメーション速度）、infinite（アニメーションを繰り返す）を指定しています。 @keyframesではbackground-colorにて背景色を変更、2色目を50％に指定し

シームレスな背景画像を使って無限スクロールする背景を作成するCSSアニメーションのサンプルコードです。 背景の無限スクロール CSSだけで横スクロールアクションゲームのように背景を無限スクロールさせるアニメーションのサンプルコードです。 See the Pen CSS | Soccer ball by yochans (@yochans) on CodePen. HTMLは背景画像を配置するコンテ用のdivタグを作成しています。 <div class="container"></div> サンプルに使う背景画像には以下のものを作成しました。 sample-bg.png (1333×889) 背景画像はCSSのbackground-imageのurl()で指定、今回は横スクロールですのでrepeat-xも指定しています。 background-sizeでサイズを調整する際、シームレスな画像で

角丸な三角形（Rounded triangle）をCSSで作成を紹介しています。 角が丸くない三角形の作り方は以下の記事で紹介しています。 角丸な三角形の作り方CSSの疑似要素、borderによる角丸、rotate()による回転を利用して角丸な三角形を作成する方法です。 See the Pen CSS | Rounded triangle by yochans (@yochans) on CodePen. 同色にしたものと、作業用にパーツごとに色を変更しているものを入れる要素を作成しています。 パーツに必要な3つのdivタグを追加します。 <div class="double-circle-1"> <div></div><div></div><div></div> </div> <div class="double-circle-2"> <div></div><div></div><div

Microsoft Edgeの機能で垂直タブが実装されましたが、これが思いのほか使いやすい。 他も悪くないですし、これだけでいよいよEdgeに本格移行しようかと検討する逸材となっています。 その上、上部の水平タブのあった部分、垂直タブでは完全にスペースの無駄遣いですが、これを今後のアップデードで非表示にできるようになるとか。 本家Google Chromeでも正式に実装してほしい機能ですが、垂直タブ表示を可能にする拡張機能を探してみました。 Microsoft Edgeの垂直タブには遠く及ばない結論から言うと、Microsoft Edgeの垂直タブには遠く及ばないものしか見つかりませんでした。 予想はしていましたが、拡張機能がChromeブラウザの上部タブを操作できる事はあり得ないといった部分に最大の理由があります。 要は、サイドバー的に垂直タブのリストを表示できたとしても、上部にあるデフ

borderで波状（波線）の線CSSのborderで作った波状の線です。 おそらく、このページにアクセスした殆どの方が「これじゃない」と思っていらっしゃる事でしょう。 私もそうです、もっと、こう、緩やかな波にしたい。 See the Pen CSS | Wavy line ｄesign 01 by yochans (@yochans) on CodePen. <div class="wavy-line"> <div></div><div></div><div></div><div></div> </div>.wavy-line { --wave-w: 50px; /* 波の大きさ */ --wave-h: 25px;　/* --wave-wの半分くらい */ display: flex; /* 波を横に並べる */ height: 100px; /* 必須ではない */ margin-le

円形に沿ったテキストを表示する方法と、そのCSSデザインサンプルを紹介しています。 CSSだけで簡単にテキストを円状に描画する良い方法はないか、たまに気になっていましたが、ようやく思いつきましたのでメモ的な記事です。 CSSで円形に沿ったテキストを表示するSee the Pen CSS | Circular text design by yochans (@yochans) on CodePen. HTMLは一文字ずつspanタグで括っています。 <div class="container"> <p class="circle-text"><span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><

Windows10を利用していると、突然ブルースクリーンになり「エラー（問題）が発生したため、PCを再起動する必要があります。エラー情報を収集しています。自動的に再起動します。」と表示されWindowsが再起動する事があります。 エラーコード・詳細を確認するブルースクリーン中にエラーの情報が表示されたりしていますが、エラー情報収集の進捗が早く終って再起動になると、何が書いてあったのか読む時間もありません。 バーコードも表示されますが、再起動が開始されるまでに用意して読み取るのは至難の技です。 とわいえ、ここで表示されているものは概ね共通のアナウンスとなっています。 エラーの詳細は、バグチェックというエラーコードにて確認可能です。 コントロール パネルから「システムとセキュリティ」ー「セキュリティとメンテナンス」にて「メンテナンス」にある「信憑性履歴の表示」に移動します。 過去のエラーログの

MsMpEng.exeはWindowsセキュリティ（Windows Defender）の実行プロセスファイルでWindows Defenderがデバイス内のファイルをスキャンする際に実行され、完了するまで起動します。 Windowsセキュリティ（Windows Defender）はMicrosoft Windows標準搭載のセキュリティソフトで、セキュリティソフトとしては十二分に軽量化されていますが、全スキャン中はPCのスペック不足やアップデートの影響でメモリ使用量が大きくなり、CPU使用率が100％に到達してしまうなど、PCの動作を遅くする原因のひとつとしても有名です。 Windowsセキュリティ（Windows Defender）はWindowsアップデート後に起動する事も多く、SearchIndexer.exeなど他のアプリケーションと同時に起動すると負荷の影響でPCの動作が重くなっ

Windows10パソコンでAppDataフォルダにアクセスしたい場合にUserフォルダ内にAppDataフォルダが無い、見えないという状況になって困る場合があります。 AppDataフォルダが無い、見えない原因は単純で、AppDataフォルダはデフォルトの設定で「隠しファイル」になっているからです。 AppDataはデフォルトで隠しファイルとなっているAppDataフォルダを表示するには主に以下の方法があります。 エクスプローラーの表示設定で「隠しファイル」を表示に切り替えるエクスプローラーのアドレスバーから場所を指定して移動するAppDataの属性「隠しファイル」を解除するショートカットを作成しておく エクスプローラーの表示設定で「隠しファイル」を表示に切り替えるエクスプローラーの「表示」設定で「隠しファイル」を表示に切り替える（チェックを付ける）ことで属性が「隠しファイル」になってい

Windows10を利用していてタスクバーで同じアプリアイコンがウィンドウの数だけ並んでしまう場合に、タスクバーのアプリアイコンをひとつに纏める方法を紹介しています。 タスクバーで同じアプリが並んで表示されてしまう タスクバーボタンをひとつに纏める同じアプリケーションのタスクバーボタンをひとつに纏めるように設定を変更します。 「設定」の「個人用設定」メニューにある「タクスバー」から「タスクバーボタンを結合する」の設定値を確認して「タスクバーに入り切らない場合」や「結合しない」が選択されていた場合は変更します。 タスクバーのボタンをアプリごとに纏める場合は「常に結合、ラベルを非表示」を選択します。 タスクバーボタンを結合する同じアプリをひとつに纏めた場合は以下のように表示されます。 同じアプリをひとつに纏めた場合の表示Windows10ではデフォルトで「タスクバーボタンを結合する」に設定され