【index.ts】そのVSCodeタブ名、わかりづらくない？【page.tsx】
はじめに VSCodeで、index.tsやpage.tsxなど、同名のファイルを複数同時に開いてしまい、わからなくなってしまったことはありませんか？ 実はよく見ると同一名称のファイルを開いているときには右側にディレクトリ名も表示されているのですが、薄い文字かつ、目線移動が必要で分かりづらいです。 この記事では、VSCodeの設定を変更することで、タブ表示名にディレクトリ名を含めて表示する方法を紹介します。 設定方法 VSCodeの設定ファイルsettings.jsonに以下の設定を追加します。 "workbench.editor.customLabels.patterns": { "**/index.*": "${dirname} .../${dirname(1)}", "**/{page,layout,template,route,actions,hooks,components,ut
CSSのこの新機能、すごく楽しみ！ UI要素にさまざまなアニメーションを簡単に実装できるようになります
朗報です！！！ 今までJavaScriptや複雑なCSSを使用しないと実装できなかったアニメーションが、簡単なCSSだけで実装できるようなります！ たとえば現在のCSSではtransitionでdisplayは機能しませんが、CSSの新機能を使用すると、下記のようなCSSで表示・非表示のアニメーションを実装できるようになります。 このCSSの新機能により、UI要素にさまざまなアニメーションを簡単に実装できるようになります。 Google ChromeのデベロッパーUna氏（@Una）によると、transitionプロパティでdisplayが使用できるようになり、要素の表示・非表示、ポップオーバーなどのアニメーションが簡単なCSSで実装できるようになるとのことです。 👀 An early look at transitioning to and from display: none in
VS Codeの新機能がすごく便利！ JavaScriptやCSSの関数やクラスなどを上部に固定させる「スティッキー スクロール」
8/5にアップデートされた、VS Code v1.70で「スティッキー スクロール」を使用できるようになったので、紹介します。 JavaScriptやCSSで作業しているときに、関数やクラスなどが自動でスティッキーされ、エディタの上部にくっつきます。行数のある長いコードに便利ですね。 VS Codeの新機能「スティッキー スクロール」 「スティッキー スクロール」はVS Code v1.70でプレビュー機能として実装された新機能で、スクロール中にどのスコープにいるのかが分かかります。 エディタの上部にクラス/インターフェイス/名前空間/関数/メソッド/コンストラクタがスティッキーされ、常にコード内の場所を把握することができます。 Visual Studio Code July 2022 (version 1.70) 「スティッキー スクロール」を使用するのは、簡単です。 VS Codeの設
ダークモードの検証が簡単にできるようになった！Chrome 79 デベロッパーツールの新機能
ダークモード対応のサイトを制作する時に面倒なのが、ダークモードとライトモードでの表示確認方法です。OSでモードを切り替えたり、2つ用意するのは面倒です。 Chrome 79 デベロッパーツールの新機能で、簡単にダークモードの検証ができるようになりました。下記のようにOS（ブラウザ）がライトモードでも、Webページをダークモードで表示できます。 画像はダークモード対応サイト: Tom Brow ダークモードの実装については、当ブログの以前の記事をご覧ください。 CSSのメディアクエリ「prefers-color-scheme」でダークモード対応にする方法と注意点 Chrome 79 デベロッパーツールで、prefers-color-schemeとprefers-reduced-motionの設定がシミュレートできるようになりました。 What's New In DevTools (Chrom
stylelintを使い始めたので設定例など (2016年9月更新) - yuw27b’s blog
※2016年9月13日更新：stylelintのアップデートに伴い、ルールの記述方法が古くなっていたものがありましたので、訂正しました。 stylelintって？ 名前のとおりCSSのlintツールです。 設定したルールから外れた書き方をすると警告してくれます。 CSSを書くにあたって、インデントにタブを使うのかスペースを使うのか、スペースなら何文字分にするのか、「{」の前にスペースを空けるかどうか、といった「書き方」を統一する目的で使います。バリデーション（CSSの標準仕様に準拠しているかどうかの判定）は行いません。 公式サイト：http://stylelint.io/ 日本語情報だとこちらが分かりやすかったです：CSSのLintをstylelintにする - Qiita stylelintの特徴 ルールのカスタマイズができる ルールセットの使い分けも簡単 CSSのlintツール自体は他
Wordのルーラーが揃わない場合の対処
Wordのルーラーが揃わない場合の対処方法を紹介します。 １．問題点 Wordには段落の1行目と2行目以降の開始位置を指定するためのルーラーが用意されています。 ▽が段落の1行目の開始位置、△が2行目以降の開始位置、その下の□で全体の開始位置を指定します。 が、行によっては▽と△が一致せず、開始位置が不揃いになる場合があります。 ということで、ルーラーが揃わない場合の対処方法を紹介します。 ２．ルーラーが揃わない場合の対処方法 ルーラーはマウスでドラッグすると一定間隔でしか移動できないのですが、Altキーを押下しながらドラッグすることで微調整ができるようになります。 ルーラーの表示も切り替わります。 コツは下記の手順で実施することです。 Altキーを押しながらルーラーをドラッグ 位置が揃った時点でマウスのクリックを離す Altキーを離す 2と3の手順を逆にすると（＝先にAltキーを離すと）
IEでドキュメントモードの既定値を変更する方法
IEでドキュメントモードの既定値を変更する方法を紹介します。 １．問題点 会社のあるシステムを使っていると、IEで次のようにレイアウトが崩れてしまいました。 具体的には「承認者」の下にあるボタンがテーブルの中に入り込んでしまっています。 原因はブラウザのドキュメントモードらしいので、F12を押下して、開発者モードを表示。 （クリックで拡大） ドキュメントモードの「7」が既定値になっているので、最新の「Edge」を選択。 これでレイアウト崩れが解消しました。 が、このページを正常に表示させるには毎回この操作を行わなければならないのですが、常に「Edge」を既定値にする方法はないでしょうか。 ということで、ドキュメントモードの既定値を変更する方法を紹介します。 ２．ドキュメントモードの既定値を変更する ドキュメントモードの既定値を変更するには、「ツール」→「互換表示設定」をクリック。 「イント
YoutubeやVimeoの動画を背景に指定できるjQueryプラグイン・OKFocus video
YoutubeやVimeoの動画を手軽に背景指定できる、というスクリプトのご紹介。jQueryに依存しています。既に同等のものが存在しますが、使いやすそうだったので備忘録。 動画を手軽に背景指定出来る、というもの。 動作サンプルです。 背景なので重ねたレイヤーの背景を透過すればマスクっぽく出来ますね。 <script src='jquery.js'></script> <script src='okvideo.js'></script>本体とスクリプトを読み込みます。 $(function(){ $.okvideo({ source: 'http://vimeo.com/*****', volume: 0 }) });VimeoまたはYoutubeの動画のURLを貼るだけ。これで背景に動画が流れます。ミュートはvolumeを0に指定します。 他にもオプションいろいろ。詳細は以下でご確認下さ
グーグルの検索結果に「著者」として自分の名前と写真を出すGoogle Authorship Markupの設定方法 | Web担当者Forum
「Google Authorship Markup（グーグル・オーサーシップ・マークアップ）」は、自分が著作したコンテンツと著作者情報を紐付けることで、グーグル検索でそのコンテンツがヒットした際に、検索結果ページ（SERP）に著作者の情報（写真や名前）を含んだリッチスニペットを出す仕組みだ。 上図は、「アトリビューション 本」で検索した際に表示される筆者のサイトの表示例だ。赤枠で囲んだ結果が私のブログページへのリンクである。写真など、他の結果と比べても違う表示がされていることがわかるだろう。日本では、まだあまり設定例が多くないと思われるので、見たことがない人もいるかもしれない。 検索マーケティングというと、検索順位をアップさせたりキーワードを選んだりということに注目が集まりがちだが、こうした新しい技術を採用して検索結果ページで検索ユーザーの視線を留めさせるのも、検索マーケティングでは重要な
[JS]行送りにも対応、テキストを一文字ずつタイプライターのように表示するスクリプト -Typist
日本語にも対応、行送りや一時停止、タイプスピードの緩急も調整できる、テキストを一文字ずつタイプライターのようにアニメーションで表示するjQueryのプラグインを紹介します。 行送りしてるとこ Typistの使い方 実装は3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 ※スタイルシートは特に必要ありません、デザインはオプションで設定します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.typist.js"></script> Step 2: HTML テキストを表示するターミナルを配置します、p, div要素などで。 <p id="terminal">
Firefoxで3Dが表示されない場合の対処
Firefox 11以降では3D表示（ページインスペクタ機能を利用）が可能です。が、どういうわけか3Dにできないケースもあるようです。私がそうでした。 ということで、Firefoxで3Dが表示されない場合の対処方法について紹介します。 １．3D表示する 対処方法は後回しにして（笑）、まずは3Dの表示方法から説明します。 メニューから「Web開発」→「調査」を選択。または画面を右クリックして「要素を調査」を選択。 ブラウザ右下に表示された「3Dビュー」をクリック。 これで3Dビューに切り替わります。マウスでドラッグすれば方向を変えられ、ホイールでズームイン・ズームアウトができます。 ２．問題点 ところが、冒頭で述べたとおり、私の環境では「3Dビュー」ボタンが表示されませんでした。 ネットを検索しても、 「3Dこんな風に表示されました！すごい！最高！」 という、まったく苦労せずに表示されました
Movable Typeのコメントにimg要素を許容する
Movable Typeの投稿コメントに、例えば「この画像です」みたいな感じで、別サイトにある画像のimg要素を挿入されても、デフォルトの設定ではコメントに反映されません。 コメント 投稿されたコメント 本エントリーでは、次のように、コメントに設定したimg要素を反映する方法を紹介します。 投稿されたコメント １．img 要素を許容する img 要素を許容するには、管理画面のナビゲーションから「設定」→「コミュニケーション」をクリックし、移動したページにある「HTMLを許可」がチェックされていることを確認し、さらに「HTMLタグを制限」の項目から「カスタム設定」を選択します。 そして「カスタム設定」のテキストフィールドに「img src」を設定し、「変更を保存」をクリックします。 「標準の設定」にある内容をコピーすれば、他のHTML要素も許容されるので、必要な要素をカンマ区切りで追加します
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Googleスプレッドシートを見やすく整形して任意のWebサイトに表示出来る・「Awesome-Table」