web development resources
1.0.0

Webデザイナーと開発者向けのオープンソースのフロントエンドツールとリソースのリスト。
| 名前 | 説明 |
|---|---|
| W3C標準 | W3C標準は、開発者が任意のデバイスで利用できる膨大なデータストアを搭載したリッチなインタラクティブエクスペリエンスを構築できるようにするための前例のないアプリケーション開発のためのオープンWebプラットフォームを定義しています。 |
| CSSDB | CSS機能の包括的なリストと、実装されたWeb標準になるプロセスにおけるその位置。 |
| MDN Webドキュメント | 開発者によるリソース。 |
| Google Web開発者 | 次世代のWebエクスペリエンスを構築します。 |
| w3schools | オンラインWebチュートリアル。 |
| CSS-tricks | CSS、HTML、JavaScript、およびWebデザインと開発に関連するすべてのものに関する毎日の記事。 |
| スマッシングマガジン | Webデザイナーと開発者向け。 |
| webglossary.info | Web開発および設計用語の広範な用語集。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| HTML5ボイラープレート | Webで最も人気のあるフロントエンドテンプレート。 |
| ブートストラップ | Bootstrapは、Web上でレスポンシブなモバイルファーストプロジェクトを開発するための最も人気のあるHTML、CSS、およびJSフレームワークです。 |
| 財団 | 世界で最も高度なレスポンシブフロントエンドフレームワーク。 |
| - | - |
| ベース | 堅実で応答性の高いHTML/CSSフレームワーク。 |
| Basscss | 低レベルのCSSツールキット。 |
| ブルマ | FlexBoxに基づく最新のCSSフレームワーク。 |
| 簡潔なフレームワーク | 膨満感なしに多くの優れた機能を提供する軽量のフロントエンドフレームワーク。 |
| 枢機卿 | Cardinalは、パフォーマンスとスケーラビリティを念頭に置いて構築されたモジュール式の「モバイルファースト」CSSフレームワークです。 |
| ひどいCSS | 先進的なCSSマイクロフレームワーク。 |
| ジュース | FlexBox CSSフレームワーク。 |
| マテリアルデザインライト | バニラCSS、JS、およびHTMLにおける材料設計コンポーネントの実装 |
| 実現します | 材料設計に基づく最新のレスポンシブフロントエンドフレームワーク。 |
| 光子 | シンプルなHTMLとCSSを使用して美しい電子アプリを構築する最速の方法。 |
| プライマーCSS | GitHub Design Systemsチームは、プライマーを構築および維持します。 |
| 純粋な | すべてのWebプロジェクトで使用できる小さなレスポンシブCSSモジュールのセット。 |
| 応答性 | レスポンシブWebサイトを構築するための強力でアクセスしやすい開発者フレンドリーなフレームワーク。 |
| セマンティックUI | 人間に優しいHTMLを使用して、美しく応答性の高いレイアウトを作成するのに役立つ開発フレームワーク。 |
| スケル | wwwの軽量レスポンシブフレームワーク。 |
| スケルトン | 死んだシンプルで応答性の高いボイラープレート。 |
| Tailwind CSS | カスタムデザインを迅速に構築するためのユーティリティファーストCSSフレームワーク。 |
| uikit | 高速で強力なWebインターフェイスを開発するための軽量でモジュラーのフロントエンドフレームワーク。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| ONSEN UI | HTML5ハイブリッドおよびモバイルWebアプリを開発する最も美しく効率的な方法。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| フォームストーン | Formstoneは、フロントエンドコンポーネントのコレクションです。 |
| LEワゴンUIコンポーネント | - |
topに戻ります
| 名前 | 説明 |
|---|---|
| ブートストラップスターター | プロジェクトをキックスタートするための無料のブートストラップスターターテーマとテンプレート。 |
| HTML5空白のWordPressテーマ | Adobe、Smashing Mag、.Net Magで注目されている最高のHTML5 WordPressボイラープレートテーマ。 |
| html5 up! | レスポンシブHTML5およびCSS3サイトテンプレート。 |
| ブートストラップを開始します | Bootstrapテーマとテンプレートを無料でダウンロードできるライブラリ。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| ハムル | HTML抽象マークアップ言語 |
| マークダウン | Webライター向けのテキストからHTMLへの変換ツール。 |
| スリム | 軽量のテンプレートエンジン。 |
| ジェイド | ノードテンプレートエンジン。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| 少ない | ノードCSSプリプロセッサ |
| SCSS / SASS | 世界で最も成熟し、安定した、強力なプロのグレードCSS拡張言語。 |
| スタイラス | 表現力豊かで、動的、堅牢で、機能が豊富なCSSプリプロセッサ。 |
| postcss | JavaScriptでCSSを変換するためのツール。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| coffeescript | JavaScriptにコンパイルする小さな言語。 |
| Livescript | JavaScriptにコンパイルする言語。 |
| タイプスクリプト | スケーリングするJavaScript。 |
| バベル | 次世代のJavaScriptを書くためのコンパイラ。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| バーボン | SASS用のシンプルで軽量のミックスライブラリ。 |
| コンパス | オープンソースCSSオーサリングフレームワーク。 |
| スージー | SASS用のカスタムレイアウトエンジン。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| npm | JavaScriptのパッケージマネージャー。 |
| - | - |
| browserify | ブラウザサイドはrequire() |
| うなり声 | JavaScriptタスクランナー |
| ガルプ | ストリーミングビルドシステム |
| 小包 | 燃えるような高速、ゼロ構成Webアプリケーションバンドラー。 |
| ロールアップ | 次世代ESモジュールバンドラー。 |
| webpack | JavaScriptと友人のためのバンドラー。 |
| - | - |
| eslint | JavaScriptコードで問題を見つけて修正します。 |
| きれい | Prettierは、意見のコードフォーマッタです。 |
| stylelint | エラーを回避し、スタイルの慣習を実施するのに役立つ強力でモダンなリナー。 |
| commitlint | ?リントはメッセージをコミットします |
| リンクネーター | 非常にシンプルなサイトクローラーと壊れたリンクチェッカー。 |
| - | - |
| browsersync | Webサイトを構築するときは、複数のブラウザとデバイスを同期させます。 |
| http-server | シンプルでゼロ構成コマンドラインHTTPサーバー。 |
| 仕える | 静的ファイルのサービングとディレクトリリスト。 |
| server.js | node.js用のシンプルで強力なサーバー |
| - | - |
| チョキダー | node.js fs.watch / fs.watchfile / fsevents周辺の効率的なラッパー。 |
| ノデモン | node.jsアプリケーションの変更を監視し、サーバーを自動的に再起動します - 開発に最適です。 |
| onchange | グローブパターンを使用してファイルセットを監視し、何かが追加、変更、削除されたときにコマンドを実行します。 |
| - | - |
| 同時に | 同時にコマンドを実行します。 npm run watch-js & npm run watch-lessしかしより良い。 |
| npm-run-all | 複数のNPM-Scriptを並列または順次実行するCLIツール。 |
| 平行シェル | シェルコマンドを並行して実行するための超単純なNPMモジュール。 |
| - | - |
| concat | 複数のファイルを連結します。 |
| cpy-cli | ノードのファイルをコピーします。 |
| del | グローブを使用してファイルとディレクトリを削除します。 |
| 急行 | ノード用の高速で感染していないミニマリストのWebフレームワーク。 |
| ノードサス | これにより、.scssファイルを信じられないほどの速度でCSSにネイティブにコンパイルし、接続ミドルウェアを介して自動的にコンパイルできます。 |
| NPM-Check-Updates | Package.json依存関係を最新のバージョンにアップグレードし、指定されたバージョンを無視します。 |
| Purgecss | Purgecssは、未使用のCSSを除去するためのツールです。 |
| rimraf | ノード用のUNIXコマンドrm -rf 。 |
| - | - |
| Bower [減価償却] | Webのパッケージマネージャー。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| jquery | 書き込みが少なく、JavaScriptライブラリ。 |
| Modernizr | Modernizrは、HTML、CSS、およびJavaScriptがユーザーのブラウザが提供するものの機能を説明します。 |
| - | - |
| bliss.js | バニラJSを使用したいが、ネイティブAPIは少し扱いにくいものを見つけたいですか?至福はあなたのためです。 |
| 傘JS | dom操作とイベントのための軽量JavaScriptライブラリ。 |
| Zepto JS | Zeptoは、主にjQuery互換性のあるAPIを備えた最新のブラウザ向けのミニマリストのJavaScriptライブラリです。 |
| 現金JS | 最新のブラウザ向けの不条理な小さなjQueryの代替品。 |
| キビJS | 小さなJavaScriptマイクロライブラリー |
topに戻ります
| 名前 | 説明 |
|---|---|
| anchor.js | ドキュメントに深いアンカーリンクを追加します。 |
| Anime.js | Anime.js(/ˈæn.ə.meɪ/)は、シンプルでありながら強力なAPIを備えた軽量のJavaScriptアニメーションライブラリです。 CSSプロパティ、SVG、DOM属性、JavaScriptオブジェクトで動作します。 |
| chart.js | デザイナーと開発者向けのシンプルで清潔で魅力的なチャート。 |
| chartist.js | シンプルなレスポンシブチャート。 |
| (a)darkMode.js (b)ダークモードスイッチ | ?数秒でウェブサイトにダークモード /ナイトモードを追加する |
| Velocity.js | 加速JavaScriptアニメーション。 |
| favico.js | バッジ、画像、またはビデオでお気に入りを利用してください。 |
| fluidvids.js | Fluid幅(レスポンシブ)ビデオモジュール、1KB、カスタムプレーヤー、動的要素/XHRサポート。 |
| highlight.js | Highlight.jsは、JavaScriptで書かれた構文ハイライターです。 |
| headroom.js | 必要になるまでヘッダーを隠します。 |
| Holder.js | クライアントサイド画像プレースホルダー。 |
| lazysizes.js | 画像(応答性と正常)、IFRAMEなどのための高性能とSEOフレンドリーなレイジーローダー。 |
| Littlefoot.js | Littlefootは、例外的な脚注を作成する軽量のJavaScriptライブラリです。 |
| lunr.js | ブラウザでの簡単なフルテキスト検索。 |
| nprogress.js | ナノスコープの進行状況バー。 |
| pace.js | 自動Webページの進捗バー。 |
| prism.js | プリズムは、軽量で堅牢でエレガントな構文を強調表示するライブラリです。 |
| React-Burger-Menu | CSS遷移とSVGパスアニメーションを使用して、エフェクトとスタイルのコレクションを備えたオフキャンバスサイドバー反応コンポーネント。 |
| レスポンシブナビゲーション | ライブラリの依存関係がなく、高速のタッチスクリーンサポートを備えたレスポンシブナビゲーションプラグイン。 |
| Slideout.js | モバイルWebアプリのタッチスライドアウトナビゲーションメニュー。 |
| smartcrop.js | コンテンツ認識画像のトリミング。 |
| Tabella.js | レスポンシブテーブル。 |
| テザー | 絶対に配置された要素を効率的に配置するためのJavaScriptライブラリは、ページ上の別の要素の隣にとどまります。 |
| tippy.js | 軽量のバニラJavaScriptツールチップライブラリ。 |
| tooltip.js | Tooltip.jsは、様式可能なツールチップを作成するためのJavaScriptおよびCSSライブラリです。 |
| Turbolinks | turbolinks®により、Webアプリケーションをより速くナビゲートできます。 |
| タイプセット | ゼロクライアント側のJavaScriptを使用するHTMLの誤字前プロセッサ。 |
| Zeroclipboard.js | テキストをクリップボードにコピーする簡単な方法。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| フォームストーン - 背景 | フルフレームの画像とビデオの背景のためのjQueryプラグイン。 |
| bigfoot.js | 脚注を強化するためのjQueryプラグイン。 |
| bigslide.js | 大きな夢のある小さなスライドパネルナビゲーションjQueryプラグイン。 |
| FitVids.js | 流動的な幅のビデオ埋め込み用の軽量で使いやすいJQueryプラグイン。 |
| fullpage.js | 1ページのスクロールセクションサイトプラグイン。 |
| 怠zyな負荷 | Lazy Loadは、長いWebページの画像の遅延の負荷です。 |
| lity | 画像、IFRAME、インラインコンテンツを箱から出してサポートする超軽量でアクセスしやすく、応答性の高いライトボックスプラグイン。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| テルサー | ? ES6+用のJavaScriptパーサー、マングラー、コンプレッサーツールキット |
| uglifyjs | uglifyjsは、JavaScriptパーサー、ミニファイヤー、コンプレッサー、およびビューティファイアーキットです。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| animate.css | CSSアニメーションのクロスブラウザーライブラリ。 |
| cssgram | InstagramフィルターをCSSフィルターとブレンドモードで再作成するための小さな(<1kb gzipped!)ライブラリ。 |
| CSSフィルタープレイグラウンド | 新しいCSS3フィルター効果で再生します。 |
| EQCSS | CSSのコンテナスタイルの要素クエリ構文の仕様。 |
| フレックスグリッド | Flex Displayプロパティに基づくグリッドシステム。 |
マスター:nth-child | CSS3擬似クラスおよび:nth-child ranges。 |
| Eric Meyer CSSリセット | Eric Meyer CSSリセット |
| グラフ | 設計用の純粋なCSSグリッドオーバーレイ。 |
| ハンバーガー | おいしいCSSアニメーションハンバーガー。 |
| ミューラーグリッドシステム | コンパスに基づいて、レスポンシブ/適応型および非応答性レイアウト用のモジュラーグリッドシステム。 |
| remormize.css | CSSリセットのモダンなHTML5対応の代替品。 |
| rtlcss | 左から右(LTR)カスケードスタイルシート(CSS)を右から左(RTL)に変換するためのフレームワーク。 |
| トースト | 非常識な、ナンセンスなCSSグリッド。 |
| csswand | それは本当にほんの一握りのシンプルで純粋なCSSベースのアニメーションライブラリです |
| water.css | シンプルなWebサイトを作成するためのスタイルのコレクション |
| レーズンCSS | ユーティリティCSSのみライブラリ。 |
| スペクトルCSS | 内部および第三者向けのスペクトル設計言語の標準CSS実装 |
| box-shadows.css | ボックスシャドウに基づいてマイアン |
topに戻ります
| 名前 | 説明 |
|---|---|
| SVGアイコンの操作方法 | - |
| SVGアイコンをテキストに合わせて、フォントアイコンに別れを告げる | - |
| - | - |
| ブートストラップアイコン | ブートストラップアイコンはSVGであるため、迅速かつ簡単にスケーリングし、CSSでスタイルを整えることができます。それらはブートストラップ用に構築されていますが、どのプロジェクトでも機能します。 |
| Creative Commonsライセンスアイコン | サイトで使用するSVG、EPS、およびPNG Creative Commonsライセンスアイコンをダウンロードしてください。 |
| Flaticon | PNG、SVG、EPS、PSD、およびベース64形式で利用可能な無料アイコンの最大のデータベース。 |
| フェザー | フェザーは、単に美しいオープンソースのアイコンのコレクションです。 |
| フォント素晴らしい | 象徴的なフォントとCSSツールキット。 |
| font-awesome-svg-png | Node.jsベースのジェネレーターとともに、さまざまなサイズの個々のSVGおよびPNGファイルへのAwesome Split。 |
| fontforge | 仲間のタイプ愛好家のコミュニティによってあなたにもたらされた無料のオープンソースのフォントエディター。 |
| フォンテロ | サイト用のカスタムアイコンフォントを簡単に作成する簡単な方法。大規模なコレクションから画像を選択し、ワンクリックでWebFontパックを作成します。 |
| Icomoon | Icomoonは、カスタムアイコンフォントまたはSVGスプライトを作成するための無料のHTML5アプリとともに、ベクターアイコンのパッケージを提供します。数千のピクセルの完璧なアイコンを閲覧するか、独自のベクトルをインポートします。 |
| イオニコン | イオンフレームワーク用のプレミアムアイコンフォント。 |
| マテリアルデザインアイコン | コミュニティからすべてのマテリアルデザインアイコンなどを表示します。 |
| CSS-Triksによるフラットアイコンとアイコンフォントの大きなリスト | そのようなまとめがたくさんあります。これは私のものです。 |
| 名詞プロジェクト - すべてのアイコン | グローバルコミュニティによって作成された100万人近くのキュレートアイコン。 |
| オクティコン | githubが<3で手作りしたスケーラブルアイコンフォント。 |
| 完璧なアイコン | 解像度の独立したソーシャルアイコンを作成する最も簡単な方法。 |
| 単純なアイコン | 人気ブランド向けの無料のSVGアイコン。 |
| SVG-ICON | 究極のSVGアイコンコレクションが正しく行われました。 |
| SVGアイコン | WebにSVGアイコンを使用する準備ができました。 |
| ベクトルアイコンのラウンドアップ | 人気のあるアイコンフォント間の並んで比較。 |
| アイコンフォントが大好きです | 無料およびオープンソースのアイコンは、テスト目的でホスティングサービスをフォントにします。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| tinyjpg | SMART WEBP、JPEGおよびPNG圧縮 |
| PNGを圧縮します | - |
| jpegを圧縮します | - |
| gifを圧縮します | - |
topに戻ります
| 名前 | 説明 |
|---|---|
| chartspree | 数秒でチャートを作成します。 |
| formspree | 静的サイトの機能的なHTMLフォーム。 |
| gridspree | Googleスプレッドシートを使用して、静的サイトでStaticサイトに必要なスプレッドシートデータを表示します。 |
| Jotform | フォームビルダー |
| WTF、フォーム? | フレンドリーなHTMLフォームは、小さなCSSマジックでコントロールします。 IE9+、および最新のChrome、Safari、Firefox用に設計されています。 |
| ウーフー | クラウドストレージデータベースを備えたオンラインフォームビルダー。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| 抽象API | 電子メールの検証、ユーザーアバタージェネレーター、画像圧縮など、開発者向けのシンプルで強力なユーティリティAPIのスイート。すべてのAPIには無料版があります。 |
| オートドロー | みんなのための高速描画。 AutoDRawは、才能のあるアーティストからの図面と機械学習をペアにして、速く物を描くのに役立ちます。 |
| バイナリ翻訳者 | 無料のバイナリコード翻訳者、バイナリコードをテキストに翻訳します。 |
| base16 | 16色のベースを使用して、慎重に選択された構文強調表示に基づいてテーマを構築するためのアーキテクチャ。 |
| ブートストラップ5チートシート | ブートストラップ5のクラス、変数、ミキシンのインタラクティブなリスト。 |
| colors.css | Webのより良いデフォルトの色。より高速なプロトタイピングと見栄えの良いサイトのためのスキンクラスのコレクション。 |
| カラーヘックスカラーコード | Color-Hexは、カラーモデル(RGB、HSL、HSV、CMYK)、トライアドの色、単色の色、カラーページで計算された類似の色を含む色に関する情報を提供します。 |
| カラーハント | 毎日更新された美しい色のキュレーションコレクション。 |
| CSS3ジェネレーター | CSS3クラシック |
| cssmat | Webデザイナー向けの究極のCSSツール。 |
| draw.io | Draw.ioは、フローチャート、プロセス図、ORGチャート、UML、ER、ネットワーク図を作成するための無料のオンライン図ソフトウェアです。 |
| 平らな色 | 2,300以上のフラットカラーパレットで11,000以上のフラットカラーを閲覧します。それらをコピーするか、Photoshopで使用するために.ACOファイルをダウンロードしてください。 |
| フロントエンドドグマフロントエンド開発ツール | 分析と探索のために、ウェブサイト開発者と所有者向けのキュレーションされたWebベースのツール。 |
| グラデーションの背景 | インターネット上の最高のグラデーションウェブサイトのキュレーションされたリストとして、グラデーションの背景を使用すると、何百もの美しいブレンドカラーパレットから探索し、試してみることができます。 |
| スタイリングウィザード:GoogleマップAPI | 色、道路、ラベルなどをカスタマイズします。次に、Google Maps Platform Projectでカスタムスタイルを使用します。 |
| おしゃれな地図 | Webデザイナーと開発者を対象としたGoogleマップのさまざまなスタイルのリポジトリ。 |
| ソーラライズ - 機械と人の精密な色 | Solarizedは、ターミナルおよびGUIアプリケーションで使用するために設計された16のカラーパレット(8つの単調、8つのアクセントカラー)です。 |
| SRI HASHジェネレーター | SRIの使用は、サードパーティのソースからライブラリがロードされるたびに、ベストプラクティスとして推奨されます。 |
| スーパードメイン | ドメインの可用性を確認してください。 |
| ラテックステーブルをオンラインで作成します | オンラインジェネレーターを使用して、複雑なラテックステーブルをすばやく作成します - セルのマージは、境界編集と一緒にサポートされます。 |
| uiradients | デザイナーと開発者向けの美しい色のグラデーションの厳選されたコレクション。 |
| 不均一に | JavaScript、CSS、およびHTMLコードを解除する(解凍、deobfuscate)無料のオンラインツールを使用して、読みやすくてきれいにします。 |
| Webコードツール | CSS3、HTML5、Microdata、Open GraphおよびTwitterカードジェネレーター |
| 私の画面の解像度は何ですか | 任意のディスプレイデバイスの画面解像度を確認するためのオンラインツール。 |
| Web勾配 | ウェブサイトのどの部分でもコンテンツの背景として使用できる背景グラデーションの無料コレクション。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| bootstrapcdn | Bootstrap、Font Awesome、Bootswatch用の推奨CDN。 |
| cdnjs | Web関連のライブラリ用の無料およびオープンソースCDNがWebサイトを高速化してください! |
| coralcdn | Webプロキシと名前サーバーの世界的なネットワークで構成される、ピアツーピアテクノロジーに基づいた無料のオープンコンテンツ配信ネットワーク。 |
| fontcdn | Google Webフォントの検索ツール。 |
| Googleフォント | Web向けに最適化された数百の無料のオープンソースフォント。 |
| Googleホストライブラリ | 最も人気のあるオープンソースのJavaScriptライブラリのための安定した、信頼性が高く、高速で世界的に利用可能なコンテンツ配信ネットワーク。 |
| jsdelivr | 開発者とウェブマスター向けの無料の超高速CDN。 |
| Microsoft Ajax CDN | JQueryなどの人気のあるサードパーティのJavaScriptライブラリを使用すると、Webアプリケーションに簡単に追加できます。 |
| オープンソースソフトウェアCDN | maxcdnによるオープンソースソフトウェアCDN。 |
| Yandex CDN | ServiceホストJavaScriptライブラリは、サイト開発者にYandexコンテンツ配信(CDN)へのアクセスを提供し、YandexサーバーのさまざまなオープンソースJavaScript-FrameWorksおよびライブラリを処理できます。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| 使用できますか | CSS3およびHTML5プロパティのブラウザ互換性を確認してください。 |
| プレフィックスが必要です | 新しいCSSプロパティに必要なプレフィックスを表示するだけです。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| 私は反応しますか? | デスクトップ、ラップトップ、iPad、iPhoneでサイトの外観をご覧ください。 |
| browserstack | ブラウザデバイステスターを使用して、VMのインターネットエクスプローラー画像をダウンロードします。 |
| deviceponsive | MacBook、iPad、iPhoneなどのさまざまなデバイス解像度に対するWebサイトの応答性のクイックプレビューを表示します。このプレビューをクライアントと共有します。 |
| 応答的にアプリ | より迅速なレスポンシブWeb開発のために、Web開発者向けの必須のDevtool。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| Google PagesSpeedツール | PageSpeedツールは、Webベストプラクティスに従ってサイトを分析および最適化します。 |
| webpagetest | 実際のブラウザを使用して、実際の消費者接続速度で世界中の複数の場所から無料のWebサイト速度テストを実行します。 |
| ウェブサイトの速度テスト | この無料のWebサイト速度テストを使用して、Webサイトの負荷速度を分析し、それらをより速くする方法を学びます。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| jsonplaceholder | テストとプロトタイピングのための偽のオンラインREST API |
| Lorem Ipsum | Lorem Ipsumは、印刷および型版画業界のダミーテキストです。 |
| lorempixel | すべてのケースのプレースホルダー画像。 |
| Placehold.it | 迅速でシンプルな画像プレースホルダーサービス。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| Placeit | プロジェクトを任意のデバイスコンテキストでドロップするのに最適なもの。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| ファビコンジェネレーター | オンラインファビコンジェネレーター。実際に。 |
| ピン留めのサイトを構築します | サイト用のカスタムWindowsスタート画面タイルを1分以内に作成するオンラインツール。 |
| Windowsのピン留めされたサイトの強化 / IE11 Webサイト用のカスタムタイルの作成 | ライブタイルとWindowsの通知をセットアップします |
| AppleのWebアプリケーションの構成 | HTMLとCSSを使用して、SafariおよびWebKitに効果的なWebコンテンツを作成する概念情報とテクニック。 |
| Android / Manifestファイル形式のChromeでWebアプリをマニフェストするインストール可能なWebアプリ | Webアプリマニフェストを使用して、Webアプリの起動方法を制御します。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| codemyui | Webプロジェクトで使用できる厳選されたコードスニペット。コードサンプルでWebデザインのインスピレーションを見つけます。 |
| コーディハウス | HTML、CSS、JSナゲットの無料ライブラリ。 |
| コドロップ | Codropsは、最新のWebトレンド、テクニック、新しい可能性に関する記事やチュートリアルを公開するWebデザインおよび開発ブログです。 |
| HTTPSに移動します | HTTPからHTTPSに簡単に移行します。 |
| Navnav | 大量のCSS、jQuery、およびJavaScriptレスポンシブナビゲーションの例、デモ、およびWeb全体からのチュートリアル。 |
| Papersizes.io-紙のサイズに最適なリソース | メトリックと帝国の紙のサイズの国際基準を見つけるためのシンプルで無料のリソース。 |
| PDFキャンディ | PDFキャンディを使用してPDFファイルを編集 - 無料のオンラインPDFエディター。 PDFをWord、PDFにJPGに変換し、PDFをマージし、PDFを分割し、PDFを圧縮します。 |
| スコッチ | プログラミング、開発、Web、および生活のすべてを議論するWeb開発ブログ。 |
| スマッシングマガジン | プロのWebデザイナーと開発者向けのオンラインマガジン。有用なテクニック、ベストプラクティス、貴重なリソースに焦点を当てています。 |
| W3SchoolsオンラインWebチュートリアル | 世界最大のWeb開発者サイト。 |
topに戻ります
| 名前 |
|---|
| Mozilla Webドキュメント |
| CSS dev docs |
| CSSプロパティインデックス |
| CSSリファレンス |
| CSSリファレンス - コドロップ |
| レイアウト: |
| FlexBox -CSSトリック |
| CSSグリッド-CSSトリック |
| GABIによるCSS FlexBox Playground |
| FlexBox Froggy |
| CSSグリッドガーデン |
| CSSアニメーション: |
| CSSアニメーションを使用-MDN |
| アニメーション-CSSトリック |
topに戻ります
| 名前 | 説明 |
|---|---|
| ブラウザセーフフォント | Windows&Mac同等物のすべてのバージョンへの一般的なフォント。 |
| CSSフォントスタック | Web Safe CSSフォントスタックの完全なコレクション。 |
| CSSアウトラインプロパティ - アウトライン:なしと概要:0 | CSSアウトラインプロパティはアクセシビリティ要件ですが、多くの場合、多くのWebデザイナーに虐待されていることがよくありますが、なぜそれを行うのですか? |
| CSSセレクターリファレンス | CSSでは、セレクターは、スタイリングする要素を選択するために使用されるパターンです。 |
| CSS特異性 | CSS特異性。 CSS特異性は、スタイルの競合がある場合に比較するために、セレクターの数値表現を割り当てます。 Webポスターには、Stanley Kubrickの「The Shining」映画のアイコンでCSSの特異性が表示されます。 |
| 例別のグリッド | CSSグリッドレイアウトを学習するために必要なすべて。 |
| グリッドガーデン | CSSグリッドを学習するためのゲーム。 |
| グリディ | CSSグリッドを学びましょう! |
| ブラウザウィンドウをヘッドバットしないハッシュタグリンク | Chris CoyierによるCSS-Tricks投稿。 |
| CSSグリッドを学習します | CSSグリッドの学習ガイド。 |
| CSSグリッドを学習します | ジェン・シモンズによる多くの素晴らしいリソース。 |
| CSSレイアウトを学びます | このサイトは、あらゆるWebサイトのレイアウトで使用されるCSSの基礎を教えています。 |
| デフォルトのテキスト選択色をCSSでオーバーライドします | Chris CoyierによるCSS-Tricks投稿。 |
| よりスマートなリンクは、すべてのWebサイトに基づいています | Adam Schwartzによる投稿。 |
| テキストを選択する際のブラウザデフォルトの背景色は何ですか? | スタックオーバーフローに答えます |
| なぜ私はより少ないものからSASSに切り替えたのですか? | Hugo Giraudelによる投稿。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| ホームオフィスのポスター | さまざまなトピックをカバーするポスターのホームオフィスリポジトリ - 調査、アクセスのニーズ、アクセス、デザイン。 |
topに戻ります
| 名前 |
|---|
| ウェブを賞賛してください |
| ああ |
| 彼 |
| 最高のウェブサイトギャラリー |
| Codepen |
| CSSギャラリー |
| CSSの勝者 |
| デザイン冷蔵庫 |
| DeviantArt |
| ドリブル |
| お気に入りのウェブサイト賞(FWA) |
| グッドゥイ |
| Googleデザイン |
| HTMLインスピレーション |
| 検索UI効果のインスピレーション |
| 1ページの愛 |
| 私が好きな素敵なもの |
| siiimple |
| 最高のデザイン |
| とても素敵なサイト |
| Webデザインのインスピレーション |
| webdesign -tumblr検索 |
topに戻ります
| 名前 | 説明 |
|---|---|
| レスポンシブタイプスケールの調査 | あなたの(適切な、マルチデバイスと垂直)リズムを見つける |
| フォントペア | フォントペアは、デザイナーがGoogleフォントを組み合わせてペアリングするのに役立ちます。美しいGoogleフォントの組み合わせとペア。 |
| StackSwellでタイプスケールを生成します | StackSwellの最新リリースで時間を節約し、数秒でタイプシステムを作成してください! |
| マテリアルデザインタイプシステム | タイポグラフィを使用して、デザインとコンテンツを可能な限り明確かつ効率的に提示します。 |
| モジュラースケール | モジュラースケールを計算、視覚化、および学習します。 |
| 接続を入力します | タイプ接続は、書体をペアにする方法を学ぶのに役立つゲームです。 |
| 開発者向けのタイポグラフィ | これは、開発者がWebタイポグラフィを学ぶための実用的なガイドとして意図されています。 |
| Typewolf | タイプのトレンドは何ですか |
| タイプスケール - 視覚計算機 | プロジェクトに適したタイプスケールをプレビューして選択します。フォントサイズ、スケール、さまざまなWebフォントを試します。 |
| WhatFont -Chrome Extension | Webページでフォントを識別する最も簡単な方法。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| schema.org | インターネット、Webページ、電子メールメッセージなどで構造化されたデータのスキーマを作成、維持、宣伝するというミッションを伴う共同のコミュニティ活動。 |
| マイクロフォーマット | HTMLで構造化された情報をマークアップする最も簡単な方法。 |
| 構造化されたデータの仕組みを理解してください | このドキュメントでは、Google検索に特別な意味を持つ構造化されたデータに必要なプロパティ、推奨、またはオプションのプロパティについて説明します。 |
| Googleによる構造化データテストツール | Google構造化データテストツール。 |
| GoogleによるPagesSpeed Insights | すべてのデバイスでWebページを速くします。 |
| データをリンクするJSON | データは乱雑で切断されています。 JSON-LDはそれを整理して接続し、より良いWebを作成します。 |
| json-ld | ウィキ |
| 緯度と経度ファインダー | 緯度と経度は、地理的座標系の座標を表す単位です。検索するには、場所、都市、州、または住所の名前を使用するか、マップ上の場所をクリックしてLAT LONG座標を見つけます。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| ソフトウェアパッケージ管理システムのリスト | これは、最初にパッケージ形式(バイナリ、ソースコード、ハイブリッド)、次にオペレーティングシステムファミリによって分類されたソフトウェアパッケージ管理システムのリストです。 |
| apt | DebianベースのLinux OSパッケージマネージャー。 |
| ヤム | FedoraベースのLinux OSパッケージマネージャー。 |
| ホームブリュー | HomeBrewは、AppleのMacOSオペレーティングシステムとLinuxにソフトウェアのインストールを簡素化するパッケージ管理システムです。 |
| ウィンゲット | Windows Package Manager(別名Winget)は、Microsoft Windows 10向けに設計された無料のオープンソースパッケージマネージャーです。 |
| チョコレート | Chocolateyは、Windowsプラットフォーム用に構築されたソフトウェアパッケージ用のマシンレベルのパッケージマネージャーおよびインストーラーです。 |
| goenv | Goenvは、可能な限りシンプルであり、PyenvとRbenvのすでに確立された成功したバージョン管理モデルに従うことを目指しています。 |
| npm | NPM(元々はノードパッケージマネージャーの略)は、JavaScriptプログラミング言語のパッケージマネージャーです。 |
| nodenv | nodenvを使用してアプリケーション用のノードバージョンを選択し、開発環境が生産と一致することを保証します。 |
| pyenv | Pyenvを使用すると、Pythonの複数のバージョンを簡単に切り替えることができます。 |
| 糸 | 糸はNPMに代わるものです。 |
| RVM | RVMは、通訳者から宝石のセットまで、複数のRuby環境を簡単にインストール、管理、および作業できるコマンドラインツールです。 |
| rbenv | Rbenvを使用して、アプリケーション用のRubyバージョンを選択し、開発環境が生産と一致することを保証します。 |
topに戻ります
| 名前 | 説明 |
|---|---|
| netlify | Netlifyを使用して最新の静的Webサイトを展開します。 CDN、継続的な展開、1クリックHTTPS、および必要なすべてのサービスを取得します。無料で始めましょう。 |
| staticgen | トップオープンソースの静的サイトジェネレーターリスト。 |
| staticman | Staticmanは、ユーザーが生成したコンテンツを受信し、GitHubおよび/またはGitLabリポジトリにデータファイルとしてアップロードするnode.jsアプリケーションです。 |
| gitalk | Githubの問題とPreactに基づく最新のコメントコンポーネント。 |
| 発話 | GitHubの問題に基づいて構築された軽量コメントウィジェット。ブログのコメント、WikiページなどにはGitHubの問題を使用してください! |
topに戻ります
| 名前 |
|---|
| TLDRページ |
| tldr inbrowser.app |
| tldr-book.pdf |
| Brew Basic Commands -devsheet |
| cheat.sh |
| devhints |
| ホームブリューのチートシート |
| マニュアルGithub CLI |
| マークダウンチートシート |
| github-cheat-sheet |
| cheatheet.md |
| TwitterのOctonator:「他のサイトに埋め込むのに適したHTMLのみのバージョンを取得するために、任意のGIST URLの最後に.Pibbを追加します。http://t.co/hytfqbm2do "/twitter |
topに戻ります
| 名前 | 説明 |
|---|---|
| 56ユニークなLorem Ipsumジェネレーター | これらの陽気なLorem Ipsumジェネレーターで、フィラーのテキストとデザインプロジェクトを盛り上げます。 |
| HTTPステータスコードの要約ガイド | HTTPステータスコードのリストと説明 |
| 素晴らしい | 素晴らしいリストのキュレーションされたリスト。 |
| 素晴らしい素晴らしさ | 驚くほど素晴らしい素晴らしさのキュレーションされたリスト。 |
| 素晴らしい素晴らしい | 多くのトピックの素晴らしいキュレーションリストのキュレーションリスト。 |
| Start Bootstrapによるブートストラップリソース | ブートストラップと関連するリソースの包括的なリスト。 |
| ブートストラップによるブートストラップスニペット | ブートストラップ4コードスニペットのキュレーションされたライブラリ。テーマ全体をダウンロードせずにプロジェクトにドロップするのに最適です! |
| デザインの必需品、githubコレクション | このデザインライブラリのコレクションは、ウェブ上で最高のものであり、見事な製品を設計するためのツールセットを完成させます。 |
| 開発者向けの設計リソース | ストックフォト、テンプレート、フレームワーク、UIキット、オンラインツールなど、開発者向けの無料デザインとUIリソースのキュレーションリスト。 |
| Github-オープンソースショーケース | あなたが最も興味を持っているトピックに基づいて、人気のあるリポジトリを閲覧します。 |
| グラデーションの背景 | インターネット上の最高のグラデーションウェブサイトのキュレーションされたリストとして、グラデーションの背景を使用すると、何百もの美しいブレンドカラーパレットから探索し、試してみることができます。 |
| JavaScriptプラグインリポジトリ | jQueryなしで強力なWebアプリケーションを作成するためのバニラJSツール。 |
| JavaScriptの領土 | jster javascriptカタログ。 |
| Javascripting | JavaScriptライブラリ、フレームワーク、プラグインのデータベース。 |
| Libraries.io | オープンソースディスカバリーサービス。 |
| HTTPステータスコードのリスト | ハイパーテキスト転送プロトコル(HTTP)応答ステータスコードのリスト。 |
| ソーシャルシェアURL | このプロジェクトは、コード内のソーシャルメディアでの共有を統合するのに役立つことを目的としています。 |
| 吸わないストック写真 | 最高の無料ストックフォトを見つけるための場所のリスト。 |
| テキスト編集者、Githubコレクション | 驚くほど素晴らしいオープンソースエディターのショーケース。 |
| heap | カテゴリに分類されたjQueryプラグインの整頓されたリポジトリ。 |
topに戻ります