テキスト校正くん - Visual Studio Marketplace
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. テキスト校正くん VS Code上でテキストファイル・Markdownファイル・Re:VIEWファイルの日本語の文章をチェックする拡張機能です。該当のファイルを開いた時、更新した時に自動で校正のチェックを行い、文章内の問題のある箇所をマーキングし問題パネルにエラー内容を表示します。 メールの文章を作成する際やブログ記事の文章を作成する際などに、ご使用いただくと便利です。 ウェブ業界の専門用語を含め、一般的な文章のルールに沿って主に以下のようなチェックを行います。 「ですます」調と「である」調の混在 誤検出の回避のため「である調」の判定は明らかに常体な「〜である」のみとなっています。 ら抜き言葉 二重否定 同じ助詞の連続使用（※初
【知らなかった】iPhoneって「背面タップ機能」があるの!? めちゃめちゃ便利じゃないか…!!
» 【知らなかった】iPhoneって「背面タップ機能」があるの!? めちゃめちゃ便利じゃないか…!! 特集 恥ずかしながら、最近やっと知りました……iPhoneの『背面タップ』という機能を。これ、地味にめちゃめちゃ便利だなぁ。なにより「画面の裏側（背面）をタップする」という操作方法がナナメ上すぎるぜ。 この機能のことをご存じの方は多いだろうが、まだ知らないiPhoneユーザーもいるかもしれないので、今回はその設定方法をご紹介したい！ ・背面タップとは 背面タップは読んで字のごとく、iPhoneの背面を「トン、トン」と2～3回タップすることで、色んなアクションができる機能のこと。 iOS14から追加された機能で、iPhone8 以降の機種から対応しているようだ。……iOS14って2020年9月にリリースされているので、情報強者の方は半年前からコレを使ってたんですね～ハハハハハ（涙目）。 では
html10行、js no need、css (と画像少し) だけでこんなことができるコレクション - Qiita
動機 Webフロントエンド開発で役立つサービスまとめ#Codepen および CSS Art Resourcesを読んだ。Codepenは、 HTML、CSS、JavaScriptによるコード実行環境を提供するサービスです。このサービスの特徴の1として、CSSの作品がアートワークのように多く投稿されており、世界中のCSS職人による素晴らしいギャラリーを堪能することができます。その技術はもはや 変態 職人の域に達しているものが多く、より高いレベルのCSSを組みたい場合に勉強になるでしょう。 というもの。そんなCodepen の https://codepen.io/tag/css-animation から、 CSSだけでできるあんなことこんなこと に倣い、Html10行、js no need, cssだけでこんなことができるんだ、すっげー、という私の眼力だけで選出した。役に立つかは知らない。
HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css
棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。 Charts.css Charts.css -GitHub Charts.cssの特徴 Charts.cssのデモ Charts.cssの使い方 Charts.cssの特徴 Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。 HTMLとCSSだけで実装 セマ
ダミーのテキスト、画像、動画をそれぞれURLで提供する・「ipsm.io」
ipsm.ioはダミーのテキスト、画像、動画をそれぞれURLで提供するダミーコンテンツ生成サービスです。 各々、とてもシンプルで手軽に使えますし、フォーマットも分かりやすいので生成されるURLのルールさえ覚えてしまえばipsm.ioにアクセスせずとも使えるようになりそうです。 以下サンプルです。 URLのルールはipsm.io/api/コンテンツの種類/オプション/オプション/フォーマット といった具合です。分かりやすくて良いですね。 個人的にダミー生成ツールは割といい頻度で使うので覚えておこうかと思います。 ipsm.io
大量のコンポーネントが用意されたTailwindベースのUIキット・「TUK」
TUKは大量のコンポーネントが用意されたTailwindベースのUIキットです。Tailwind.cssで設計された様々な手プレートやコンポーネントが用意されており、開発をサポートしてくれます。 全てのコンポーネントは主要ブラウザを含む、マイナーなものまで60以上の環境で動作テストが行われており、クロスブラウザにもしっかり対応されています。 無償版は65のコンポーネントが用意されていますが、有償版では600以上のコンポーネントやテンプレートが用意されている他、react、angular、vueなどでもすぐに利用可能できるようになっているそうです。ライセンス料はサブスクリプションではなく買いきりみたいですね。プロジェクトは無制限だそうなので一度買ってしまえば使い回しが効く、というもののようです。 TUK
)
Hyperlinkr - URLからリンクを生成するPWA
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました PWA（Progressive Web App）はローカルアプリケーションをWebに置き換える技術群を指し示す用語です。ローカルにインストールしたり、通知を出したり、オフラインやストレージなどがPWAで大事な機能になります。 今回紹介するHyperlinkrはPWAで特定のURLをMarkdownやHTML形式でコピーします。 Hyperlinkrの使い方 クリップボードへのアクセスを許可します。 URLをコピーしていると自動的に入力されます。 そしてMarkdown、HTMLでのリンクが生成されます。 正直この手のWebブラウザ機能拡張は多数あります。Hyperlinkrが面白いのは任意のWebサイトについてHTMLのタイトルが取得できていることでしょう。答えはService W
)
svgasm - アニメーションGIFをSVGに変換してサイズ軽減
アニメーションGIFを作成したり、利用してWebサイトのコンテンツに使っている人たちは多いです。しかしアニメーションGIFは画像をつなぎ合わせたもので、長い時間や大きい画像だと、あっという間に肥大化してしまいます。 そこで使ってみたいのがsvgasmです。アニメーションGIFをSVG化することで、サイズの小さくできます。 svgasmの使い方 実行結果。SVGなので線がベクター調になってしまいます。 ちゃんとアニメーションします。 svgasmは元画像サイズにもよりますが、GZipすることで半分〜1/4程度までサイズを軽減できます。元のアニメーションとどれくらい変わるかは実行してみないと分かりませんが、オプションも多いので、最適な変換にすることで良好な結果を得られるでしょう。 svgasmはC++製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 tomkwok
)
Browser Image Compression - Webブラウザで画像サイズを軽減
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサービスでユーザに画像をアップロードしてもらう機能を付けることは良くあります。最近ではスマートフォンカメラの解像度が上がり、ファイルサイズも大きくなっています。プロフィールアイコンのために数MBのアップロードをしてもらうのはサービス、ユーザ双方にとって負担です。 そこで使ってみたいのがBrowser Image Compressionです。Webブラウザ上で画像の圧縮を行えます。 Browser Image Compressionの使い方 デモです。オプションでファイルサイズや画像の大きさを指定できます。 アップロード例。殆ど違いは見えませんが、サイズは2.46MBから0.9MBに軽減しています。 Browser Image Compressionを使えば画像サイズ（容量、大
コピペ可能！ナビメニューやリンクの参考にしたいCSSホバーエフェクト集まとめ
この記事では、ナビゲーションメニューやテキストリンクを魅力的にするCSSホバーアニメーションをまとめています。 どれもHTMLスニペットとして公開されているので、CSSコードをコピー、貼り付けるだけで利用できる点もポイントです。 コピペ可能！ナビメニューやリンクの参考にしたいCSSホバーアニメーションまとめ 100 underline/overlay animations | The ultimate CSS collection 🥇 今回特にオススメしたいリンク用ホバーアニメーション集で、基本的なものから3Dなどユニークなエフェクトまで100種類が揃います。 SVGやJS，疑似要素、@keyframeなどは使われておらず、クラス名を追加するだけでスタイリングできます。 基本となるベーシックタイプ7種類。 See the Pen The basic by Temani Afif (@t_
画像の解像度を「2倍」にするPhotoshopの新機能「スーパー解像度」の使い方＆仕組みはこんな感じ
Photoshopには、RAWファイル現像プラグイン「Camera Raw」が付属しています。2021年3月にリリースされた「Camera Raw13.2」には、カメラで撮影した画像の解像度を2倍にする機能「スーパー解像度」が追加されているので、実際に使ってみました。 新機能「スーパー解像度」の活用方法 https://blog.adobe.com/jp/publish/2021/03/10/cc-photo-from-the-acr-team-super-resolution.html ◆「スーパー解像度」の使い方 実際に「スーパー解像度」を使って、画像の解像度を2倍にしてみます。まずは、Camera Rawで編集したい画像のRAWファイルを読み込みます。なお、「スーパー解像度」は記事作成時点では、最大で長辺6万5000ピクセル、あるいは総画素数500メガピクセルまでの画像に対応していま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Conic.css - nice, simple conic gradients