純粋なCSS：Yahoo！の最も純粋なCSSフレームワーク

ご存知のように、それはインターネットの誕生の時ではなく、人々はほとんどウェブサイトを忘れており、単一の段落のテキストといくつかのハイパーリンクを持っています。 現在のWeb標準に移行したい場合は、Webサイトを率直に表示するのではなく、楽しくする必要があります。 次のようなコーディング言語に関係なく HTML or PHP ユーザーインターフェイスの構築に使用され、 CSS ウェブページをスタイリッシュに見せるためのツールになります。 Webページを人体と比較すると、HTMLは骨として機能しますが、CSSは皮膚や筋肉に近いものであり、形や構造を与えるために作られています。

設計と開発の世界の他のすべてのものと同様に、CSSもマイナーアップデートとメジャーアップデートを取得して、HTML3が旅に伴うときの最良のペアであるCSS5に到達できるようにしました。 ただし、プレイの主役は、使用することを選択したCSSのトレンドまたはパターンです。 ご存知のように、さまざまな外観や機能を備えたさまざまなCSSフレームワークが利用可能です。 ブートストラップ, 郊外 本日ご紹介するのは 純粋なCSS、大手インターネット大手であるYahoo!の単純なクールグリッドベースのCSSフレームワーク。 幸いなことに、このフレームワークはXNUMXペニーも払わずに使用できます。

純粋なCSS

魅力的なWebページやWebサイトを構築するために、ZurbFoundationなどの他のフレームワークを使用した可能性があります。 CSSフレームワークを使用すると、分割、フォーム、メニューなど、ページ内のさまざまな要素のテンプレートを取得できるため、非常に便利です。これは、 Yahoo!による純粋なCSS ファイルをダウンロードして「CSS」フォルダーに追加するのではなく、PureCSSは次のように機能します。 Googleのフォント、フレームワークをHTMLに統合するために2行のコードを追加する必要があります。 フレームワークは最新のものであるため、完全に応答性があります。 何よりも、Pure CSSは、Webで見つけることができる最も単純なフレームワークのXNUMXつです。 ウェブサイトを強化するためのフレームワークを使用するか、フォームやメニューなどのスタイリングセクション用の特定のモジュールをダウンロードできます。XNUMXつの個別のモジュールが無料で利用できます。 Pure CSSのモジュールは次のとおりですが、抽出すると軽量（XNUMX Kb未満）のように見えます。

• ベース： 見出し、段落、タイポグラフィなどの基本Webページ要素
• ボタン： アクティブ、ホバーなどの効果を持つさまざまなボタン。
• テーブル： ボーダーなどで利用可能なベーステーブル。
• メニュー： 水平、垂直、ドロップダウン。
• グリッド： レスポンシブグリッド。
• フォーム： グループ化された入力、複数列など。

関連項目： 微妙なパターンのブックマークレット：Webサイトの背景パターンをプレビューする.

純粋なCSSを使用する理由

• 未使用の少ないコード： 他のcssフレームワークを使用すると、未使用のコードが多数表示されるのはごく普通のことです。 一方、Pure CSSの場合、特定のバージョンのフレームワークを使用してWebページの特定のセクションのスタイルを設定できるため、この問題に直面することはありません。 もちろん、コードが少なくても素晴らしいようです。
• オールインサイド： 少なくとも他のいくつかのフレームワークでは、視覚的な影響を改善するためにサードパーティのJavaScriptプラグインとコードを使用しています。 ただし、Pure CSSは、ドロップダウン効果で使用される場合を除いて、いかなる種類のJSプラグインも使用しません。 サードパーティのコードが少ないほど、ページの読み込みが速くなり、コードがすっきりします。
• テンプレート： あなたがあなたのウェブサイトのためにあなた自身のレイアウトをデザインする専門家でないならば、純粋なCSSはそのセクションで助けることができます。 このWebサイトには、マーケティング、ランディングページなど、さまざまな目的を持つWebサイトに一致する、多数のレイアウト例が含まれています。



• スキンビルダー： テンプレートとスタイルでクリエイティブデザイナーを満足させることができる場合は、PureCSSのスキンビルダーを使用して独自のスキンを作成できます。 ご想像のとおり、スキンビルダーはコーディングレベルの専門知識を考慮していません。



関連項目： アイコンフォント：Font AwesomeGeneratorの長所と短所.

純粋なCSSの使用

以前に指定されたように、純粋なCSSは、他のフレームワークと比較した場合、多くの有利な機能を備えています。 前に言ったことを思い出してください。GoogleFontsと同じ方法でPureCSSを使用できます。 Webページにスタイルをもたらすには、XNUMX行の外部ファイルリンクを追加する必要があります。 この機能は、単一ファイルのWebページを作成する必要がある場合や、すべてのcssファイルを配置するための十分なスペースがない場合に非常に役立ちます（これは決して発生しないと思います）。 Yahoo!としてプロジェクトの車輪を回してプロジェクトを回します。ロードエラーや技術的な失敗について緊張したくありません。

Pure CSSの完全なCSSテンプレートを使用する場合は、次のコードをメインWebページに追加できます。 CSSファイルのリンクをクリックしてCSSファイルをダウンロードして使用することもできます。

[html]

[/ HTML]

メニューやフォームなどの特定のCSSバージョンを利用したいだけの場合は、専用のCSSファイルとともに特別なコードを利用できます。 URLのリストは次のとおりです。



スキンビルダーページの直感的なコントロールボタンを使用して要素のプロパティを制御できるため、PureCSSのスキンビルダーを使用することも簡単な作業です。 ただし、要素の名前を理解するために、CSSファイルをダウンロードすることをお勧めします。 すでに述べたように、これらの2 Kb未満のファイルを配置しても、ディスク領域は消費されません。

Pure CSSのWebサイトは、初心者でもPureCSSベースの要素をWebサイトに挿入できるように設定されています。 左側にシンプルなサイドバーがあり、フォームやボタンなどのセクションが一覧表示されています。各ページには、その効果をWebサイトにもたらすためのHTMLコードとともにプレビューが用意されています。 したがって、そのような要素をWebページに挿入するのは非常に簡単です。 以下に示すのは、シングルログインタイプのフォームのプレビューとコードです。



結論

Pure CSSのすべての機能を分析する場合、これはYahoo!による最適な貢献のXNUMXつです。 デザインの世界へ。 Yahoo! 一般にYUIとして知られているユーザーインターフェイスは、純粋なCSSに添付されたすべての文字列をサポートし、比較がある場合にフレームワークを最適にします。 事前設定された要素を使用する以外に、PureCSSをカスタマイズすることもできます。 単純にコンパクトなフレームワークを使用して詳細を学ぶには、Pure CSSWebサイトにアクセスする必要があります。 例を確認してプロジェクトで使用した後、このフレームワークについてのご意見をお聞かせください。