• グローバル・ナビゲーションへスキップ
  • メインコンテンツへスキップ
  • フッターへスキップ
TechLila ロゴ

テクリラ

ブリーディングエッジ、常に

  • ホーム
  • 概要:
  • お問い合わせ
  • お得な情報とオファー
テクリラ ロゴ
FacebookツイートするLinkedInピン
Microsoft WebMatrix3の紹介機能
次に

MicrosoftWebMatrixを使用してWeb開発を簡素化する

Yahoo!の純粋なCSSフレームワーク

テクリラ ウェブデザインと開発

純粋なCSS:Yahoo!の最も純粋なCSSフレームワーク

アビジット・N・アルジュナンの化身 アビジスNアルジュナン
最終更新日: July 21, 2013

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

Yahoo!の純粋な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サイトに一致する、多数のレイアウト例が含まれています。
  • 純粋なCSSレイアウト

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

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

    純粋なCSSの使用

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

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

    [html]

    [/ HTML]

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

    純粋なCSSリンクリスト

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

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

    ログインプレビューとサンプルコード

    結論

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

情報開示: TechLila で公開されたコンテンツは読者サポートです。 アフィリエイト リンクを通じて行われた購入に対して、追加費用なしでコミッションを受け取る場合があります。 私たちを読む 免責事項ページ 私たちの資金調達、編集方針、および私たちをサポートする方法についての詳細を知るために。

共有は思いやりです

FacebookツイートするLinkedInピン
アビジット・N・アルジュナンの化身

アビジスNアルジュナン

アビジスNアルジュナン はケララ州出身の情熱的なライター兼ブロガーであり、トレンドテクノロジー、オタク向けのもの、ウェブ開発について書くときに究極の喜びを感じています。

カテゴリー

  • ウェブデザインと開発

タグ

CSS

リーダーの相互作用

人々が言っ​​ていること

  1. ラケッシュクマール

    純粋なCSSのこの素晴らしいレビューを投稿していただきありがとうございます。 私はコミュニティのために独自のワードプレステーマを開発しようとしているので、yahoo.comからのこの新しいcssは私に大いに役立つと思います。

    返信
  2. ハリー

    とても便利だと思います。 後でそれらのそれぞれを探索します。

    返信
  3. キャシー

    わお。 これは本当に面白いです。 この情報を共有していただきありがとうございます。

    返信
  4. レイモンドサム

    この時点で、BootstrapまたはFoundationよりもPureをお勧めしますか? Bootstrapは、初めて使用するユーザーとして最適に文書化されているとは言えません。

    返信
  5. サジェシュ

    こんにちはAbhijithN Arjunan、私はあなたが素晴らしい仕事をしたことをあなたに言わなければなりません、そして私の知識とスキルを啓発してくれてありがとう。

    返信
  6. Santoshさん

    素晴らしい記事Abhijit。 PureCSSを使用して、PyroCMSと呼ばれる新しいコンテンツ管理システムのテーマを作成しました。 [PyroPure]をご覧ください)。

    テーマの開発はとても楽しかったです。 他のフレームワークよりもはるかに軽量だったと思います。 スタイリングも非常にカスタマイズ可能です。

    返信
  7. アーウィン

    うわー..これは学ぶのが面白いことです。私はプログラミングとデザインの才能がないことを知っていますが、それをするのは面白かったです。 PureCSSはおそらく私が必要としているものです。

    返信
  8. アダム

    こんにちは私は3つのプロジェクトでYahooの(PureCss)純度を使用していますが、これは本当に素晴らしいライトフレームワークです。つまり、BootstrapやFoundationと比較すると、そのライトとデザインを開発者に戻し、300kbのUIキットに依存していることに焦点が当てられています。とにかく要素の70%を使用しないこと、そしてBootstrapからパーツを取り出す場合でも、Javaが必要であるということです。それはまだ200kbのセクションにあります。 すべてのWebサイトがBootstrappyに見えることは言うまでもありません。そのため、Bootstrapを使用してWebサイトやZurbの基盤を構築することは決してありません。また、12列のグリッドを使用する必要があります。 私はそれらがすべて素晴らしくてかっこいいウェブサイトを見ます、しかしそれらはただとても箱型でよく見えますBootstrap-foundation、Yahoo PureCssは驚くべきUIキットで、軽くて使いやすく、そして何よりもWordPressをテーマとして非常に速く動作します! YUI PureCssを使用した4つのWordPressプロジェクトに使用しましたが、Bootstrapから切り替えた後、クライアントは驚いていました。最初に気付いたのは、サイトの速度で、XNUMX番目はデフォルトで美しいFLATデザインです。

    返信

コメントを追加 返信をキャンセル

あなたのメールアドレスは公開されません。 必須フィールドは、マークされています *

フッターロゴ フッターテキストのロゴ

フッター

概要:

こんにちは。TechLilaへようこそ。TechLilaは、基本をマスターするための豊富な記事を見つけることができる有名なテクノロジーブログです。

TechLilaの主な目標は、品質のヒントやコツ、チュートリアル、Windows、Macintosh、Linux、Android、iPhone、セキュリティに関するハウツーガイド、レビューなどのその他のサブトピックなど、独自の情報を提供することです。

リンク

  • 概要:
  • お問い合わせ
  • 責任の否認
  • プライバシーポリシー
  • ご利用規約

続きます

GenesisFrameworkを使用したカスタムテーマ

Cloudwaysによるクラウドホスティング

言語設定

©著作権2012–2023 テクリラ。すべての内容は著作権を有します。

x
x