目次
Google HTML & CSS スタイル ガイド
Yahoo パターン ライブラリ
A List Apart Pattern Library
レスポンシブ Web デザイン パターン
Interaction Design Pattern Library ? Welie.com
MailChimp パターン ライブラリ
スターバックス スタイル ガイド
ホームページ ウェブフロントエンド htmlチュートリアル Web 開発スキルの向上に役立つ 7 つのパターン ライブラリ_html/css_WEB-ITnose

Web 開発スキルの向上に役立つ 7 つのパターン ライブラリ_html/css_WEB-ITnose

Jun 24, 2016 pm 12:05 PM
web 改善する モデル

言語スタイルガイドと同様に、パターンライブラリは 2 つの主な目的を果たします。まず、Web 開発チームが Web サイト全体に適用できる一連のコーディングまたはデザイン標準を提供し、一貫したコーディングの実践と外観を維持するのに役立ちます。第 2 に、Web デザインのベスト プラクティスを学ぶのに役立ちます。

この記事では、Web デザインと開発プロセスにおけるベスト プラクティスであり、学ぶ価値のある 7 つの Web デザイン スタイル ガイドとパターン ライブラリを紹介します。

Google HTML & CSS スタイル ガイド

私が皆さんに最初にお勧めするのは、開発者に HTMLCSS コードの書き方とフォーマット方法を説明する Google のコーディング提案です。初心者の場合、これは適切なコーディング スタイルを開発するのに役立ちます。

Yahoo パターン ライブラリ

これは真のデザイン パターン ライブラリであり、ナビゲーション、インタラクション、レイアウトを扱う Yahoo デザイナーを含む、すべての Web デザイナーが遭遇するであろう問題の解決策を提供しようとしています。

A List Apart Pattern Library

A List Apart はおそらく最も有名な Web デザイン ブログです。彼らは最近、Web サイトをオープンソースにする取り組みの一環として、独自のパターン ライブラリをリリースしました。パターン ライブラリには、この Web サイト デザインの解決策と HTML コード スニペットの問題が含まれています。

レスポンシブ Web デザイン パターン

レスポンシブ デザインの詳細をレイアウトからわかりやすいサンプル画像まで網羅したレスポンシブ デザイン パターン ライブラリです。

Interaction Design Pattern Library ? Welie.com

この Web サイトのデザインは古いですが、多数のデザイン パターン情報が提供されています。これは私がこれまでに見た中で最も包括的なパターン ライブラリであり、デザイナーが直面するあらゆる状況をカバーしています。

MailChimp パターン ライブラリ

MailChimp パターン ライブラリは、応答性が高く、柔軟で直感的なアプリケーションを作成するという著者の取り組みの副産物です。継続的な反復には、効率的なワークフローと、新しいテクノロジを追加したり設計したりすることなく、新しいユーザー インターフェイスを迅速に統合できる明確なアトミック要素セットの両方が必要です。

スターバックス スタイル ガイド

最後は、グリッド フレームワークの使用、レイアウトとコンポーネントの使用などを含む、スターバックス企業 Web サイトのスタイル ガイドです。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WeChat の「おやすみモード」は何をするのですか? WeChat の「おやすみモード」は何をするのですか? Feb 23, 2024 pm 10:48 PM

WeChat のサイレント モードとはどういう意味ですか? 現在、スマートフォンの人気とモバイル インターネットの急速な発展により、ソーシャル メディア プラットフォームは人々の日常生活に欠かせないものとなっています。 WeChat は中国で最も人気のあるソーシャル メディア プラットフォームの 1 つであり、ほとんどの人が WeChat アカウントを持っています。私たちは WeChat を通じて友人、家族、同僚とリアルタイムでコミュニケーションを取り、生活の瞬間を共有し、お互いの現在の状況を理解することができます。しかし、この時代では、特に集中力や集中力が必要な人々にとって、情報過多やプライバシー漏洩の問題にも必然的に直面します。

iPhoneのスリープモードは何に使用されますか? iPhoneのスリープモードは何に使用されますか? Nov 04, 2023 am 11:13 AM

iOS デバイスでは、ヘルスケア アプリを使用して睡眠パターンなどを追跡できるようになってきました。でも、寝ているときに通知が来ると煩わしくありませんか?これらの通知は無関係である可能性があるため、その過程で睡眠パターンが混乱します。おやすみモードは、睡眠中に気を散らすのを避けるための優れた方法ですが、夜間に受信する重要な電話やメッセージを見逃す可能性があります。ありがたいことに、ここでスリープモードが登場します。それについてさらに詳しく、そしてiPhoneでそれを使用する方法を学びましょう。 iPhone ではスリープ モードはどのような役割を果たしますか? スリープ モードは iOS 専用のフォーカス モードで、「ヘルスケア」アプリの睡眠スケジュールに基づいて自動的に有効になります。アラームを設定するのに役立ちます。

iPhoneでサイレントモードが機能しない:修正 iPhoneでサイレントモードが機能しない:修正 Apr 24, 2024 pm 04:50 PM

おやすみモードで電話に応答することさえ、非常に煩わしい経験になる可能性があります。名前が示すように、おやすみモードでは、すべての着信通知と電子メール、メッセージなどからの警告がオフになります。これらのソリューション セットに従って問題を修正できます。解決策 1 – フォーカス モードを有効にする 携帯電話でフォーカス モードを有効にします。ステップ 1 – 上から下にスワイプしてコントロール センターにアクセスします。ステップ 2 – 次に、携​​帯電話の「フォーカスモード」を有効にします。フォーカス モードでは、電話機のサイレント モードが有効になります。携帯電話に着信通知が表示されることはありません。解決策 2 – フォーカス モード設定を変更する フォーカス モード設定に問題がある場合は、修正する必要があります。ステップ 1 – iPhone の設定ウィンドウを開きます。ステップ 2 – 次に、フォーカス モード設定をオンにします

iPhone 15 Pro: ステータスバーのマナーモード記号を削除する方法 iPhone 15 Pro: ステータスバーのマナーモード記号を削除する方法 Sep 24, 2023 pm 10:01 PM

iPhone 15 Pro および iPhone 15 Pro Max モデルで、Apple は、音量ボタンの上にある従来の着信音/サイレント スイッチに代わる、物理的にプログラム可能なアクション ボタンを導入しました。アクション ボタンは、いくつかの異なる機能を実行するようにプログラムできますが、サイレント モードと着信モードを切り替える機能はなくなっていません。デフォルトでは、アクション ボタンを長押しするとデバイスが沈黙し、ボタンの触覚フィードバックが 3 回脈動します。どちらの iPhone 15 Pro モデルでも、ステータス バーの時刻の横に取り消し線のベル記号が表示され、サイレント/サイレント モードが有効になっていることを示します。また、アクション ボタンを再度長押ししてデバイスのミュートを解除するまで、この状態が維持されます。 iPhoneをマナーモードにしたい場合

「Notepad++ ダーク モード」と「Notepad++ ダーク テーマ」を有効にするにはどうすればよいですか? 「Notepad++ ダーク モード」と「Notepad++ ダーク テーマ」を有効にするにはどうすればよいですか? Oct 27, 2023 pm 11:17 PM

Notepad++ ダーク モード v8.0 にはパラメータがありません。Notepad++ は最も便利なテキスト エディタです。 Windows 10 で実行されるすべてのアプリはダーク モードをサポートしています。 Chrome、Firefox、Microsoft Edge などの Web ブラウザーに名前を付けることができます。 Notepad++ で作業している場合、デフォルトの白い背景が目を痛める可能性があります。開発者は Notepad++ のバージョン 8 にダーク モードを追加しました。これをオンにする方法は次のとおりです。 Windows 11/10 ++ ダーク モードのメモ帳を有効にする メモ帳 ++ を起動する 「設定」 > 「環境設定」 > 「ダーク モード」をクリックします 「ダーク モードを有効にする」を選択してメモ帳を再起動します

iOS 17でスタンバイモードを使用するためのガイド iOS 17でスタンバイモードを使用するためのガイド Aug 22, 2023 pm 04:01 PM

iOS17 ではスタンバイ モードが iPhone に導入されます。このガイドは、iPhone でこの機能を使用する方法を示すことを目的としています。スタンバイ モードは、iPhone をダイナミックな常時オンのスマート ディスプレイに変える画期的な機能です。充電中にiPhoneを横向きに置くとスタンバイモードになります。このモードでは、現在時刻、地域の天気予報、お気に入りの写真のスライドショー、さらには音楽再生コントロールなど、さまざまな便利なウィジェットが美しく表示されます。このモードの大きな利点は、通知を表示できることであり、ユーザーは iPhone を完全に起動しなくても通知を表示して操作できるようになります。スタンバイ モードの使用方法 スタンバイ モードが適切に機能するには、iPhone が実行されている必要があります。

Windows 10/11でSモードを終了する方法 Windows 10/11でSモードを終了する方法 Aug 03, 2023 pm 08:17 PM

S モードの Windows は、Microsoft Store からのアプリのインストールのみを許可することで、セキュリティとパフォーマンスが強化されるように設計されています。この機能はマルウェアを防止し、安全なコンピューティング環境を確保するのに役立ちますが、Microsoft Store 以外のソースからアプリケーションをインストールしたいユーザーが制限される可能性があります。このような状況に陥り、Windows 10/11 で S モードから切り替える方法を自問し続けている場合は、2 つの異なるモードを使用して Windows 10/11 で S モードから切り替える方法を説明するので、ここは正しい場所に来ています。 S モードに移行すると、どこからでもアプリを自由にインストールできるようになります。 Windows で S モードを終了する方法を学習します。

ウェブ標準とは何ですか? ウェブ標準とは何ですか? Oct 18, 2023 pm 05:24 PM

Web 標準は、W3C およびその他の関連組織によって策定された一連の仕様とガイドラインです。HTML、CSS、JavaScript、DOM、Web アクセシビリティおよびパフォーマンスの最適化の標準化が含まれます。これらの標準に従うことで、ページの互換性を向上させることができます。 、メンテナンス性とパフォーマンス。 Web 標準の目標は、Web コンテンツをさまざまなプラットフォーム、ブラウザー、デバイス上で一貫して表示および操作できるようにして、より優れたユーザー エクスペリエンスと開発効率を提供することです。

See all articles