タグ スニペット
人気順 5 users 50 users 100 users 500 users 1000 usersNode.jsで型安全な環境変数を扱うスニペット
2024/08/24
74 users
node.js
環境変数
playwright
起動
テスト
Node.js で型安全な環境変数を扱うスニペットを作りました。 next devのようなアプリケーションの起動、Playwright でのテストなどコマンドごとに渡したい環境変数のセットが異なるケースがあります。 この場合に環境変数をまとめたものを定義して、それをコマンドごとに読み込むセットを変えたいことがあります。 次の... 続きを読む
ChatGPTでジェネレーティブアートジェネレータ - ABAの日誌
2023/03/12
12 users
Aba
chatgpt
プロンプト
出力
日誌
ChatGPTに特定の機能を持つコードのスニペットを書くように頼むのはよくある使い方だ。ただChatGPTは回答の長さに制限があるので、あまり長いコードの出力をお願いするのは現実的ではない。プログラム全体の仕様をプロンプトで投げて、そのコードを返してもらう、みたいな使い方はまだ難しい。 でもジェネレーティブアー... 続きを読む
VSCode全書 - おすすめ拡張機能・設定・ショートカットキー・キーバインド・Emmet・スニペットの紹介
2023/01/30
11 users
エメット
Emmet
vscode
コーダー
設定
コーダーやフロントエンドエンジニア向けのVSCodeの環境や機能を紹介していきます。かなりボリューミーなので是非参考にしてみてください。 こちらの6項目に分けて紹介します。 おすすめの拡張機能 設定 覚えておきたいショートカットキー キーバインド Emmet（エメット） スニペット おすすめの拡張機能 拡張機能は以下... 続きを読む
Markdown（マークダウン）をVSCodeの拡張機能とスニペットで効率良く書く - Qiita
2022/09/17
130 users
Markdown
Qiita
vscode
エディタ
前提
Markdownをはやく効率よく書くために 前提として、マークダウンを編集するエディタはVSCodeを使います。 Markdownファイルを使って記事を管理している場合、マークダウンを効率良く書けるかどうかは生産性に直結します。 VSCodeの拡張機能と基本設定（スニペット）を使ってマークダウンを速やかに編集する方法について書... 続きを読む
【PowerShell】デスクトップ通知のスニペット【トースト通知】 - Qiita
2022/08/16
162 users
Qiita
PowerShell
デスクトップ通知
$bodyText = 'A single string wrapped across a maximum of three lines of text.' $ToastText01 = [Windows.UI.Notifications.ToastTemplateType, Windows.UI.Notifications, ContentType = WindowsRuntime]::ToastText01 $TemplateContent = [Windows.UI.Notifications.ToastNotificationManager, Windows.UI.Notific... 続きを読む
set -eのもとで特定のコマンドの終了ステータスを変数に入れるシェルスクリプトのスニペット - Islands in the byte stream
2021/12/15
11 users
シェルスクリプト
set
変数
タスク
コマンド
課題編 シェルスクリプトで「あるグローバルな状態を変える操作を行い、その結果をチェックし、状態をもとに戻す」みたいなタスクをするときに「その結果をチェックし」のところでコマンドの終了ステータスを変数に入れて置きたいみたいなことがあります。例えば、次のようなコマンド操作です。 set -e # グローバルな状... 続きを読む
head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS
2021/10/01
218 users
レンダリング
CSS
head
head内
要因
Webページのレンダリングを妨げる要因、<head>タグ内でレンダリングをブロックしているCSSやJavaScript、サードパーティーのリソースなどを表示して、どこを修正すればよいか教えてくれるCSSのスニペットを紹介します。 ちなみに下記のグリーンは問題なし、レッドはエラーで対応が必要、オレンジは特定のシナリオで問題... 続きを読む
Webの進化が止まらない、コピペ可な最新HTMLスニペット40個まとめ - PhotoshopVIP
2021/07/07
17 users
snippet
PhotoshopVIP
切れ端
断片
部品
この記事では、Webデザインの進化を体感できる、コピー＆ペーストで実装OKな最新HTML／CSSスニペットをまとめてご紹介します。 一般的に「切れ端、断片」といった意味をもつスニペット（英: Snippet）は、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品、コンポーネントを指します。 2020年に話題... 続きを読む
【保存版】CSS Flexboxでレスポンシブ対応のレイアウトを実装するHTMLとCSSのシンプルなコードのまとめ | コリス
2021/04/15
138 users
コリス
ナビゲーションバー
CSS
CSS flexbox
CSS Flexboxで実装するWebページでよく見かけるレスポンシブ対応のレイアウト、カードレイアウト、ナビゲーションバー、サイドバー、聖杯レイアウトなどのHTMLとCSSのコードを紹介します。 コードは非常にシンプルなので、テンプレートやスニペットとして再利用できます。 Master CSS Flexbox 2021 ?- Build 5 Responsi... 続きを読む
よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ | コリス
2021/02/18
748 users
UIコンポーネント
ナビゲーション
CSS Layout
Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね... 続きを読む
CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック | コリス
2020/08/24
175 users
コリス
inpu
button要素
input要素
CSS
検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト（アイコンも）を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。 ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinpu... 続きを読む
Vue.jsやReactなど、JavaScriptライブラリのコードスニペットを利用できるVS Codeの拡張機能 -Snipsnap | コリス
2020/06/23
39 users
React
コリス
ライブラリ
Vue.js
コードスニペット
サポートしているJavaScriptライブラリの一覧（上記以外にもたくさんあります） Snipsnapは現在のプロジェクトで使用している言語やパッケージに基づいて、ライブラリで使用可能なスニペットをナビゲートし、必要なスニペットを選択します。 Snipsnapのインストール Snipsnapのインストールは、VS Code Marketplaceから... 続きを読む
スニペットだけでWebサイトにSlackライクなチャットを導入できる「now」 - エンジニア・プログラマのソーシャルITメディア
2019/10/15
40 users
Slackライク
now
スラッグ
プログラマ
チャット
◆ now https://www.ekko.chat/en/now 紹介 「now」は、スニペットだけでWebサイトにSlackライクなチャットを埋め込みできるツールです。 事前登録 まずは、アカウント登録をします。 導入するWebサイトのURL・プロジェクト名を入力。 こちらは、スラックでいうチャンネルにあたるもの。5つまで自由に指定することができ... 続きを読む
Google、検索結果のスニペットを制御するための新しいrobots metaタグとHTML属性を導入 | 海外SEO情報ブログ
2019/09/25
17 users
metaタグ
属性
html属性
HTML
上級
[レベル: 上級] 検索結果に表示されるスニペットをより細かく制御する仕組みを提供することを Google は発表しました。 専用の robots meta タグおよび HTML 属性の 2 とおりの方法を利用できます。 スニペット制御用の robots meta タグ robots meta タグでスニペットをページレベルで制御できます。 以下の 3 種類のコ... 続きを読む
CSSで実装したレイアウトの構造や階層を簡単に確認できる、私のお気に入りのCSSハック -My favorite CSS hack | コリス
2019/09/10
86 users
コリス
Grid
Flexbox
階層
CSS
flexboxで実装したレイアウトはもちろん、floatでもgridでもCSSで実装したレイアウトの構造や階層を確認できるスタイルシートを紹介します。 ページ上の各要素のサイズ・マージン・パディングなどに不整合がないか簡単に確認でき、スニペットやブックマークレットに登録しておくと便利です。 My favorite CSS hack by Ga... 続きを読む
【調査データ】若者はスニペットとナレッジパネルから情報を得ており、検索結果をクリックしない | アイオイクスのSEO・CV改善・Webサイト集客情報ブログ｜SEO Japan
2019/06/03
28 users
流入
WEBマスター
Google
アイオイクス
ユーザー
「検索結果にGoogleが提供するコンテンツが増えるにつれ、自身のサイトへの流入が奪われる」といった意見はよく聞きます。 しかし、これらの意見はWebマスターやSEO担当者からの意見がほとんどであり、「実際のユーザーはどう思っているのか？」といった調査はありませんでした。 今回の記事は、実際のユーザーを対象に... 続きを読む
[CSS]テキストリンクやボタン、プリローダーなどで使えるCSSアニメーションのスニペット集 -CSSeffectsSnippets | コリス
2019/03/15
126 users
プリローダー
コリス
CSS
コピペ
CSSアニメーション
テキストリンクやボタン、プリローダーなどで使えるCSSのさまざまなアニメーションがコピペで簡単に利用できるCSSeffectsSnippetsを紹介します。 気になったアニメーションは、スニペットなどに登録しておくと便利...記事の続きを読む 続きを読む
Google検索のスニペットに適切な日付を表示するためのベストプラクティス | 海外SEO情報ブログ
2019/03/11
29 users
ベストプラクティス
中級
日付
前提
要因
[レベル: 中級] 検索結果のスニペットの先頭にそのコンテンツの公開日が表示されることが多くあります。 この日付を Google 検索に正しく伝えるためのベストプラクティスをウェブマスター向け公式ブログが解説しました。 前提: 日付は複数の要因で決定されるまず前提として知っておくべきことがあります。 スニペットの... 続きを読む
タイトルなし・スニペットなし・画像なしの検索結果をGoogleがテスト中、EU著作権指令への対応 | 海外SEO情報ブログ
2019/01/18
18 users
EU著作権指令
改正案
上級
著作権指令
Google
[レベル: 上級] Google は EU 圏内で、タイトルやスニペット、画像がない検索結果をテストしているようです。 昨年 9 月に可決され来週中にも施行されると報じられている EU 著作権指令の改正案に従ったものと思われます。 不具合のように見える検索結果こちらは Search Engine Land が入手した、テストが適用されている... 続きを読む
保存しておくと便利！CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集
2018/08/10
289 users
CSS
CSS flexbox
スニペット集
Flexbox
ヘッダでロゴを左寄せにしたり、検索窓を右寄せにしたり、画像をページの中央に配置したり、ページ上のあらゆる要素を揃え整列させるFlexboxをベースにしたスタイルシートのスニペットを紹介します。 サイトやブログの全体で利用できるユーティリティのclassとして、保存しておくと便利なスニペット集です。 Speed up al... 続きを読む
WordPress：アイキャッチ設定や記事内の画像有無によって、記事内ひとつ目の画像や代替画像を表示させるスニペット | NxWorld
2018/07/26
21 users
備忘録
アイキャッチ
NxWorld
動作
以下
WordPressでアイキャッチを利用するテーマの場合、登録されなかったときの処理として記事内にあるひとつ目の画像やあらかじめ用意しておいた代替画像をアイキャッチとして表示させることが多いのですが、そのようなときに使えるスニペットの備忘録です。 基本的な動作 以下では2通りの方法をあげますが、いずれも大まか... 続きを読む
CSSのスニペットに登録！背景にCSSグラデーションが変化するアニメーションを実装するスタイルシート | コリス
2018/06/21
68 users
スクリーン
HTML
Pure CSS
コリス
CSS
スクリーンいっぱいの背景にCSSグラデーションが変化するアニメーションを実装するスタイルシートを紹介します。 HTMLもCSSも非常にシンプルで、簡単に利用できます。 Pure CSS3 Gradient Backgro...記事の続きを読む 続きを読む
Google、長くしたスニペットを再び短く。meta descriptionタグは設定すべきか？ | 海外SEO情報ブログ
2018/05/14
16 users
all
おおよそ
meta descriptionタグ
拡張
[レベル: ALL] 検索結果に表示されるスニペットの文字数を Google は昨年12月に 倍の長さに拡張 しました。 ところが、以前とほぼ変わらない長さに戻しました。 120文字 ➡ 250文字 ➡ 130文字 スニペットはもともと日本語でおおよそ 120 文字前後の長さでした。 昨年12月に Google はこの文字数をおおよそ 250 文字程度まで増やしました。 スニペットとして使われるこ... 続きを読む
Hyper Collocation — arXiv に基づいた論文英語コロケーションデータベース
2018/02/15
79 users
arXiv
例文
コンピュータサイエンス
フレーズ
抽出
arXivの英語論文から入力された英単語やフレーズを検索し，前後に頻出する単語を集計するとともに使用箇所のスニペットを列挙するサービスです．Hyper Collocation とは？ arXiv に収録されている 811,761報 の 英語論文 から，入力された英単語やフレーズを検索し，前後に頻出する単語の集計と使用箇所からの例文の抽出を行うサービスです．数学・物理・コンピュータサイエンスの分野を... 続きを読む
Webサイトやスマホアプリでよく使う、JavaScriptの有用なコードのスニペットのまとめ | コリス
2018/02/07
65 users
コリス
３０秒
スマホアプリ
コード
JavaScript
JavaScriptの有用なコードのスニペットをまとめたサイトを紹介します。 一つひとつは30秒ほどで理解できるコードとなっており、膨大な数のスニペットがまとめられています。あれなんだっけ？ という時に、便利ですね。 3 ...記事の続きを読む 続きを読む