タグ スニペット
人気順 5 users 10 users 50 users 500 users 1000 usersMarkdown（マークダウン）を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... 続きを読む
head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS
2021/10/01
218 users
レンダリング
CSS
head
head内
要因
Webページのレンダリングを妨げる要因、<head>タグ内でレンダリングをブロックしているCSSやJavaScript、サードパーティーのリソースなどを表示して、どこを修正すればよいか教えてくれるCSSのスニペットを紹介します。 ちなみに下記のグリーンは問題なし、レッドはエラーで対応が必要、オレンジは特定のシナリオで問題... 続きを読む
【保存版】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... 続きを読む
[CSS]テキストリンクやボタン、プリローダーなどで使えるCSSアニメーションのスニペット集 -CSSeffectsSnippets | コリス
2019/03/15
126 users
プリローダー
コリス
CSS
コピペ
CSSアニメーション
テキストリンクやボタン、プリローダーなどで使えるCSSのさまざまなアニメーションがコピペで簡単に利用できるCSSeffectsSnippetsを紹介します。 気になったアニメーションは、スニペットなどに登録しておくと便利...記事の続きを読む 続きを読む
保存しておくと便利！CSS Flexboxでよく使用するコードがまとめられたCSSのスニペット集
2018/08/10
289 users
CSS
CSS flexbox
スニペット集
Flexbox
ヘッダでロゴを左寄せにしたり、検索窓を右寄せにしたり、画像をページの中央に配置したり、ページ上のあらゆる要素を揃え整列させるFlexboxをベースにしたスタイルシートのスニペットを紹介します。 サイトやブログの全体で利用できるユーティリティのclassとして、保存しておくと便利なスニペット集です。 Speed up al... 続きを読む
最新版！Webページを作成する時のベースになる、最小限の構成で記述されたHTML5のテンプレート | コリス
2018/01/18
309 users
コリス
テンプレー
テンプレート
最小限
ベース
HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 イラスト: Girls Design Materials HTML5 Boilerplate -GitHub HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレー... 続きを読む
機械学習ではじめるDocker - にほんごのれんしゅう
2017/12/16
156 users
Docker
れんしゅう
目次
角度
体系化
2017 - 12 - 16 機械学習ではじめるDocker 目次とお断り この資料をまとめるに当たって、実際に開発したり運用したりという経験の スニペット から、できるだけ編集して、自分なりに体系化したものです 様々な角度のデータが乱雑なっててわかりにくいかもしれませんが、ご了承いただけると幸いです "1. Dockerとは" "2. Dockerを用いるメリット" "3. docker... 続きを読む
CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール | コリス
2017/05/30
448 users
Facebook
OGP
コリス
Mic
CSS
CSSで面倒なコード、アニメーションやグラデーションやボックスシャドウなど、実装の結果を見ながら値を調整してコードを生成でき、HTML5の新要素やよく使うスニペット、FacebookのOGPやTwitterカードやmic ...記事の続きを読む 続きを読む
100種類の言語に対応したプログラマー向けノートアプリ「Boostnote」 ｜ ライフハッカー［日本版］
2017/02/05
371 users
Boostnote
シンタックスハイライト
ライフハッカー
「Boostnote」は 100種類の言語に対応したプログラマー向けノートアプリ です。Markdown形式のファイルも扱えますし、HTMLやJavaなど様々な言語に対応されています。シンタックスハイライトが有効なのでソースコードも見やすいですよ。また、よく使うスニペットを登録しておくと、すぐさま呼び出してコピーすることができます。起動時間も早くオールマイティに使えるノートアプリとなっていますよ。... 続きを読む
Apple風のかっこよくて美しいデザインの背景49種類を簡単に実装できるスタイルシート -HUE.css | コリス
2016/10/24
525 users
コリス
Hue
Apple風
スタイルシート
美しいデザイン
文字や画像をぽんっと配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景49種類をまとめたスタイルシートを紹介します。 コピペで簡単に利用できるので、CSSのスニペットに登録しておくと便利ですね。 HUE.css HUE.css -GitHub HUE.cssを使うと、簡単に美しい背景を作りだすことができます。 Appleのプレゼンテーションスタイルで、Hueを背景に使用... 続きを読む
ウェブ制作で差がつく！コピペ可能なHTML/CSSスニペット50個まとめ 2016年10月度 - PhotoshopVIP
2016/10/21
129 users
Ｒｕｎ
ホバーエフェクト
PhotoshopVIP
一味
工夫
ウェブ制作で差がつくテクニックを コピー&ペーストで利用できる HTML/CSS スニペット をまとめてご紹介します。最新のデザインテクニックを駆使したレイアウトやスライダー、ボタンエフェクト、ホバーエフェクトなど ユーザーがたのしむことができる 工夫のつまった作品が数多く公開されています。これらのスニペットを利用することで、他とは一味違うユニークなウェブサイトを制作してみてみましょう。 「Run... 続きを読む
テキスト周りのスタイリングに使えるCSSプロパティやスニペット | NxWorld
2015/11/25
309 users
NxWorld
CSSプロパティ
スタイリング
テキスト周り
ã¹ã¿ã¤ãªã³ã°ã¨ãã£ã¦ãè¦æ ãã大ããå¤ããã¨ãã§ã¯ãªããã»ã¨ãã©ããã ã®ããããã£èª¬æã¿ãããªæãã«ãªã£ã¦ãã¾ããããµã¤ãå¶ä½æã«è¦ã... 続きを読む
[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips | コリス
2015/10/23
424 users
jQuery
GitHub
コリス
MITライセンス
商用
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用... 続きを読む
CSSでよく使うコードのまとめ、ブレイクポイントの定義・Flexboxのグリッド・ボタン・フォーム・ユーティリティなど -Corpus | コリス
2015/10/15
243 users
corpus
コリス
ユーティリティ
グリッド
CSS
Webサイトやブログを作成する時にCSSでよく使うコード、ブレイクポイントの定義・Flexboxのグリッド・ボタン・フォーム・画像周り・ライン・ユーティリティ・アニメーションなどがまとめられたCorpusを紹介します。 スニペットに登録したり、ブックマークしておくと便利ですね。 Corpus Corpusでは、作者自らが新しいプロジェクトを始める時によく使用するコードのセットをまとめており、汎用的... 続きを読む
[CSS]スニペットに登録しておくべし！繊細で美しいグラデーションをコピペで利用できる -GRADIENTS | コリス
2015/09/30
128 users
コリス
CSS
コピペ
美しいグラデーション
aqua .bg-aqua-gradient { background: rgba(127,219,255,1); background: -webkit-linear-gradient(top, rgba(127,219,255,1) 0%, rgba(82,140,163,1) 100%); background: linear-gradient(to bottom, rgba(127,219... 続きを読む
[CSS]スニペットとしてストックしておきたい、レスポンシブ対応のパンくずとステップを実装するチュートリアル | コリス
2015/07/27
232 users
コリス
NAV
チュートリアル
CSS
gallery
レスポンシブ対応のパンくずとマルチステップのナビゲーションを紹介します。 HTMLもCSSも非常にシンプルで、カスタマイズ性にも優れた有用なスニペットとしても利用できます。 デモページ HTML HTMLの基本構造です。 <nav> <ol class="cd-breadcrumb"> <li><a href="#0">Home</a></li> <li><a href="#0">Gallery<... 続きを読む
Clipy - Clipboard extension app for Mac OS X
2015/07/03
230 users
Clipy
プレーンテキスト
定型文
クリップボード
ソース
Clipboard extension app for Mac OS X主な機能 プレーンテキストや画像といった複数の形式に対応したクリップボード拡張アプリです。 ショートカットキーで自由にメニューを呼び出すことができ、いつでもクリップボードの履歴を参照できます。 また、スニペットとして定型文を登録しておくことで、いつでも定型文をペーストできます。 オープンソース Clipyはオープンソースで公開... 続きを読む
WordPressでしっかり設定しておきたいセキュリティやメンテナンスに役立つ.htaccessのまとめ | コリス
2015/07/03
484 users
コリス
htaccess
htaccessファイル
第三者
WordPressでブログやサイトを運営する前、そして運営している時にしっかり設定しておきたいWordPressのセキュリティやメンテナンスに役立つ.htaccessの設定を紹介します。 .htaccessファイルを守る 最初に行うことは、.htaccessをあなた以外の無許可のアクセスから守ることです。下記のスニペットは第三者があなたの.htaccessファイルにアクセスするのを阻止します。 ル... 続きを読む
Web制作者はブックマークしておくと便利！HTMLやCSSやOGPやTwitterカードなどのコードを生成できるオンラインサービス | コリス
2015/07/01
587 users
OGP
コリス
metaタグ
シャドウ
CSS
CSSの面倒なコード、アニメーションやグラデーションやシャドウなど、表示結果を見ながらコードを生成でき、HTML5のよく使うスニペットや新要素、MetaタグやOGPやTwitterカードなどのコードを簡単に生成できるオン...記事の続きを読む 続きを読む
フォーム周りで覚えておくと便利なCSS Snippets | NxWorld
2015/03/26
872 users
プロパティ
CSS
NxWorld
ブラウザ
普段
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのも幾つかあるので参考にしてみてください。 ※紹介している内容はブラウザ（特に... 続きを読む
JavaScriptで構築している箇所もHTMLと同等にGoogleにインデックスされつつある - F.Ko-Jiの「一秒後は未来」
2015/03/08
141 users
users
F.Ko-Ji
ウェブマスターツール
記述
箇所
久しぶりに Google のウェブマスターツールにある「コンテンツ キーワード」でこのブログのキーワードを確認していたら、なぜか2位に「users」というキーワードがあるのを見つけました。 試しに Google でサイト内検索してみると、サイドバーに表示している「はてブ数順 人気エントリー」の部分が検索結果のスニペットに表示されていました。 ↑ この「471 users」などの記述は、 ↑ サイド... 続きを読む
レスポンシブコーディングのスニペットいろいろ - やっぱりWebが好き - Writing Mode
2015/03/03
358 users
コーディング
レスポンシブコーディング
立場
気分転換
web
コーディングを自身でやることは少なくなってきたけれど、勘が廃れないように今でも時々デザインしたり、コーディングしたりってのも大事にしてます。たまにデザインやコーディングをするのは気分転換にもなるし、新しいテクニックを知っておくことだってまだまだ大切だと思うし。 今の僕は、作る仕事はできる限り任せる立場だと思うので、あくまでもやり過ぎない程度に、って考えてますけど。というわけで、最近覚えたスニペット... 続きを読む