ビデオ: 【プログラミング】 2019年に使うべき HTML / CSS フレームワークとは!? 【Webデザイン】 2026
ウェブ開発の世界では、「フロントエンド」と「バックエンド」という言葉がかなり頻繁に出会っています。リフレッシュするだけで、フロントエンドの開発はすべて、ユーザーが見るウェブサイトの部分に関するものですが、バックエンドは、「裏の場面」機能に関するものです。
フレームワークを使用してウェブサイトのフロントエンドを構築すると、多くの利点があります(そして起動するのはかなり簡単です)。フロントエンドのフレームワークが何であるか、なぜそれらをあなたのWeb開発作業に組み込むべきなのかを考えてみましょう。
フロントエンドフレームワークとは何ですか?
「CSSフレームワーク」とも呼ばれ、ファイルやフォルダにあらかじめ記述された標準化されたコードを含むパッケージです。彼らは、最終的なデザインに柔軟性を持たせながら、あなたに基礎を築きます。
通常、フロントエンドフレームワークには次のコンポーネントが含まれます。
<!あなたのウェブサイトのデザイン要素を整理するのを簡単にするグリッド-
定義されたフォントスタイルとその機能(見出しと段落の異なるタイポグラフィなど)によって異なるサイジング >サイドパネル、ボタン、ナビゲーションバーなどの事前構築されたWebサイトコンポーネント
-
選択したフレームワークによっては、さらに多くの機能があります。
-
なぜ私は1つを使うべきですか?
すべてのコードをゼロから始めるのではなく、フロントエンドフレームワークを使用する理由はたくさんあります。時間を節約しましょう!明らかに、自分でコードを1行ずつ記述しているのであれば、ウェブサイトを起動するのにもっと時間がかかるでしょう。フレームワークを使用すると、基本を開始するのに役立ちます。
他にないかもしれない余分なコンポーネントを追加します。特別な手間をかけることなく、別のボタンをタックするオプションがあるのはいつも素晴らしいことです。
-
コードが動作することを確認します。独自のコードを書くだけでは動作しない(またはWebブラウザの60%に対応していない)ことを発見するのに多くの時間を費やす代わりに、事前にテストされた機能コードを使用していることがわかります。
-
前に進む前に、フロントエンドフレームワークを使用する方法についても説明したいと思います。コードビルドスキルの代わりにそれらを扱っても、あなたには何の恩恵もありません。まずHTMLとCSSに慣れ親しんで、
-
、
を使ってショートカットを使い始めることができます。あなたのフレームワークを松葉杖ではなく助手として扱いましょう。 フロントエンドフレームワークの例 すべてのCSSフレームワークが等しく作成されるわけではありませんので、独自のニーズに最も適したフレームワークについて調査してください。トップ5の概要を以下に示します。 ブートストラップ:最も人気のあるブートストラップです。 Githubにたくさんの星があり、あなたの質問に答えさせるためのたくさんのリソースがあります。使いやすいものの1つですが、非常に特徴的な "ブートストラップ"の外観を持っていると言う人もいます。 財団:多くの柔軟性とカスタマイズ性を提供します。フロントエンドの開発経験があり、多くの創造的なコントロールを維持しながら基本をカバーしたい人には向いています。
Stylus:表現力豊かでスタイリッシュなCSS言語。このフレームワークはノードでのみ使用できます。 jsアプリケーション。
セマンティックUI:簡潔で直感的で、コードを素早く簡単にデバッグできます。デザインの自由度が増し、ニーズに適応します。
UIキット:iOSアプリケーションの開発に興味がある場合に使用するフレームワーク。
独自のサイトの外観を簡単に作成できる基本スタイルを備えています。
結論
フレームワークはフロントエンド設計のための非常に有益なツールです。特に、その面を頻繁に開発している仕事がある場合は特にそうです。これらは、品質や機能性を犠牲にすることなくワークフローをスピードアップし、生産性を向上させます。コーナーを切る方法としてではなく、あなたのスキルを補うためのツールとしてそれらを使うことを忘れないでください!