先日アップデートされた、VS Code v1.86で、スティッキースクロールがツリービューでも使用できるようになったので、紹介します。 エディタのスティッキースクロール(紹介記事)ができるようになった時もその便利さに喜びましたが、ツリービューでもできるようになり、深い階層でもすべての親を常に表示しておくことができます。 ツリービューのスティッキースクロールを使用するには、デフォルトではオフになっているので、機能をオンにする必要があります。 ※オンになっている人もいるようですね。
![VS Codeの新機能がすごく便利! ツリービューのスティッキースクロール機能をオンにすると格段に使いやすくなります](https://cdn-ak-scissors.b.st-hatena.com/image/square/58a1a424e705b68f9d4c64d56ffc4fa493b4d291/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202401%2F2024020701%402x.gif)
先日アップデートされた、VS Code v1.86で、スティッキースクロールがツリービューでも使用できるようになったので、紹介します。 エディタのスティッキースクロール(紹介記事)ができるようになった時もその便利さに喜びましたが、ツリービューでもできるようになり、深い階層でもすべての親を常に表示しておくことができます。 ツリービューのスティッキースクロールを使用するには、デフォルトではオフになっているので、機能をオンにする必要があります。 ※オンになっている人もいるようですね。
Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi
高性能なテーブルを実装できる、シンプルで軽量のJavaScriptライブラリを紹介します。HTMLテーブル、ページネーション、検索機能、ソート機能、XMLやJSONからインポートなどに対応しています。 React、Angular、Preact、Vueなどの主要なフレームワークのプラグインとして動作するだけでなく、フレームワークなしのバニラJavaScriptでも使用できます。 Grid.js Grid.js -GitHub Grid.jsの特徴 Grid.jsのデモ Grid.jsの使い方 Grid.jsの特徴 Grid.jsは高性能なテーブルを実装できる12Kbの超軽量のJavaScriptです。 シンプルで軽量な実装。 人気が高いすべてのJavaScriptフレームワーク(React、Angular、Vueなど)で使用できます。 フレームワークなし(バニラJavaScript)でも使用
テレワークで困るのが、複数人でのミーティングやアイデア出しなどの意見を交わす場を持てないことです。Adobe XDの便利なプラグインが登場しました! Whiteboardの名の通りホワイトボードをはじめ、ブレインストーミング、カードソーティング、ワイヤーフレーム、フローチャート、マインドマップなど、Webサイトやスマホアプリのミーティングで使用するさまざまなツールが簡単に利用できます。 複数人での使用はもちろん、個人で使用するのにも便利です。 Adobe XDのビジュアル協業プラグイン「Whiteboard」 Adobe XDのプラグイン「Whiteboard」とは Adobe XDのプラグイン「Whiteboard」のダウンロード Adobe XDのプラグイン「Whiteboard」の使い方 Adobe XDのプラグイン「Whiteboard」とは Adobe XDはAdobeユーザーは
サイトのロード時間とパフォーマンスを改善するために再構築した結果、ロード時間が1.6秒に短縮され、Lighthouseのスコアで100を獲得した際に、実施した手順を紹介します。 HTMLとCSSベースの改善が主で、ロード時の数ミリ秒間の表示、スマホ用CSSファイルの分割など、いろいろなサイトやブログの改善にも役立つと思います。 当ブログにも改善すべき点があるのが分かったので、対応したいですね。 I rebuilt my portfolio🌻 Now it loads in 1.6s 🎉 Here's how I did by Saurabh Daware 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 要約 改善方法 1: リソースのプリロード 改善方法 2: CSSファイルの分割 改善方法 3: 画像の最適化 ボ
12/3にパシフィコ横浜で開催された「AdobeMAXJapan」に合わせて、Adobe XD用の便利なプラグインが登場しました! プラグインは通常、英語圏内に特化されたものが多いですが、「Quick Mockup」はなんと日本のデザイン現場向けに特化されたもので、簡単にワイヤーフレームやモックアップが作成できます。 日本のUXデザイン用に開発されたAdobe XD用プラグイン「Quick Mockup」 Quick Mockupの特徴 Quick Mockupのインストール Quick Mockupの使い方・動画 Quick Mockupの特徴 Quick Mocukupは、日本のデザイン現場で使用頻度の高いUI要素のサンプルから簡単にワイヤーフレームやモックアップを作成、さらにスタイル、ステート、コンテンツのカスタマイズで簡易プロトタイプをすばやく簡単に作成できます。 Quick Mo
ここ数年、PWA(プログレッシブウェブアプリ)が非常に注目されています。通常のWebページとスマホアプリそれぞれの利点を兼ね備えており、導入したサイトではコンバージョンやユーザーエクスペリエンスの改善が大きく見込めます。 WebサイトをPWAにする手順とその必要性を紹介します。 Turn Your Website into a PWA by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 PWA(プログレッシブウェブアプリ)とは なぜPWAを構築する必要があるのですか? すでにPWAを採用しているのはどこですか? PWAを作成する時に必要なもの Web App Manifest Service Worker PWAを5分で構築しよう 静的キャッシュ 動的キャッシュ 静的と動的のどちらを使用すべきですか
Visual Studio CodeでCSSを書きながら、CSS Flexboxのチートシートを利用できる機能拡張を紹介します。 justify-contentやalign-itemsはどう使うんだっけ? justify-contentの値は? など、Flexboxの各プロパティや値がどのように配置されるか、一目で分かります。 CSSを書きながらFlexboxのチートシートをVS Codeに表示中 CSS Flexboxのチートシートは、当ブログで翻訳したチートシートなどを参考にしているとのことで、Flexboxの各プロパティや値の挙動が簡単に分かります。 参考: CSS Flexbox の基礎知識と使い方を詳しく解説 機能拡張のダウンロードは、下記ページから。
去年あたりから、静的サイトジェネレーターの需要が増しています。 WordPressでは通常、ページを表示する際にデータベースに接続して、動的にページを生成して表示します。更新度の高いコンテンツでは便利ですが、更新度の低い、一度公開したらほとんど更新する必要のないようなコンテンツであれば、静的ページにしてしまう方がよいかもしれません。 日本語環境にも対応、WordPressで作成したサイトやブログを静的HTMLに変換する無料プラグインを紹介します。 StaticPress StaticPress -GitHub StaticPressの特徴 StaticPressのダウンロードとインストール StaticPressの活用方法 StaticPressの特徴 WordPressで作成したコンテンツを完全に静的なHTMLファイルに変換します。表示する際のデータベースへの接続も必要ありません。 注意
画像を使用せずに、リスト要素で実装したシンプルなHTMLで角丸のタブをより美しく実装するチュートリアルを紹介します。 (Better) Tabs with Round Out Borders [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ 実装 デモ デモはChrome, Safari, Firefox, Operaでご覧ください。 IEはたぶんIE10で対応するはずです。 デモページ 実装 まずは、HTMLから。 HTML タブをシンプルなリスト要素で実装します。 <ul class="tabrow"> <li>Lorem</li> <li>Ipsum</li> <li class="selected">Sit amet</li> <li>Consectetur adipisicing</li> </ul> [ad#ad-2] CSS CSSの実装は、少しずつキャプチャと
Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。 単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。 Honoka Honoka -GitHub 日本語フォントは、たくさんのフリーフォントがあります。 2017年用、日本語のフリーフォント 259種類のまとめ Honokaの特徴 Honokaのデモ Honokaのアプローチ -Bootstrapでの日本語表示最適化 Honokaの利用方法 Honokaの特徴 Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBo
Bootstrapで実装したページをスマホなどの幅が狭いスクリーンで表示した際に、横からオフキャンバスのナビゲーションをアニメーションでスライド表示させるJSとCSSのパックを紹介します。 Off Canvas -Bootstrap Bootstrap Offcanvasの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="../dist/css/bootstrap.offcanvas.min.css"/> </head> <body> ... <script src="../dist/js/bootstrap.offcanvas.js"></script> </body> Step 2: HTML まずは、オフキャンバスのナビゲーションを開くボタン。 <butt
スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示してみます。 デモページ:幅480pxで表示 skel.jsの使い方 jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="skel.js"></script> jQueryもスタイルシートも他のファイルは必要ありません。 Step 2: スクリプトのセットアップ スクリプトのセ
画像をはじめ、画像ギャラリー、そして動画、HTMLコンテンツ、外部サイトなど、あらゆるコンテンツを拡大表示するjQueryのプラグインを紹介します。 あらゆるコンテンツをサポートします。 画像、画像ギャラリー、動画(HTML5, YouTube, Vimeoなど)、Flash/swf, Google Maps, iFrame, AJAX, Alert/Confirm/Promptなど 主要なブラウザ全てをサポートします。 IE7/8/9/10, Firefox, Chrome, Safari, Opera iOS4+, Android 主要なデバイスを全てサポートします。 デスクトップ・タブレット・スマートフォン スワイプ操作やRetinaディスプレイもサポートしています。 iLightBoxのデモ デモではあらゆるコンテンツをiLightBoxで拡大表示します。 まずは、画像一枚を拡大表
先月くらいから、あちこちのサイトのAdSenseで見かける「Adobeソフト激安!」の広告が気になっていて、買ってみたら本当に激安で、お仕事にも利用できるのが分かったので、そのレポートです。 追記:2014/4/10 この記事を書いてから一年以上経ちますが、まったく問題なくPhotoshop CS6を利用できています。 4/25にパッケージ版の販売が終了しますが、記事はそのまま残しておきます。 MacにインストールしたPhotoshop CS6 Twitterなどで何人かの人に質問を受け、気になりつつも半信半疑なのも正直なところだと思うので、ざっとレポートします。 流行りのステマじゃないですよw 購入前に、半信半疑だったこと 確かに表記価格は、店頭やオンラインショップよりはるかに安いです。 Amazonで118,126円のPhotoshop CS6 Extendedが33,000円(Ama
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く