検索

ホームページ >ウェブフロントエンド >jsチュートリアル >紹介：セマンティックUIコンポーネントライブラリ

紹介：セマンティックUIコンポーネントライブラリ

Christopher Nolan
Christopher Nolanオリジナル
2025-02-22 08:47:09146ブラウズ

紹介：セマンティックUIコンポーネントライブラリ

私たちのほとんどがおそらく知っているように、ブートストラップと財団は、フロントエンド開発フレームワークの中で現在のリーダーです。しかし、歴史は、最終的に何かがより良いものがやってくることを示しており、この場合はそれほど遠くないかもしれません。

この記事では、セマンティックUIと呼ばれるフレームワークランドスケープの新しい候補者を紹介します。

セマンティックUIは、Less and JQueryを搭載した最新のフロントエンド開発フレームワークです。洗練された微妙でフラットなデザインの外観があり、軽量のユーザーエクスペリエンスを提供します。 キーテイクアウト

セマンティックUIは、人間に優しいHTMLを強調する最新のフロントエンド開発フレームワークであり、BootstrapやFoundationなどの他のフレームワークと比較して、読みやすさと使いやすさを向上させるクラス名に自然言語を使用しています。

フレームワークは、UI要素、UIコレクション、UIビュー、UIモジュール、およびUI動作の5つの記述カテゴリを中心に構成されており、多様でインタラクティブなWebインターフェイスの構築に役立ちます。

セマンティックUIは、リアルタイムデバッグ出力やフィードやコメントなどの排他的なUIコンポーネントなど、他のフレームワークでは利用できないユニークな機能とコンポーネントを提供します。

最小限のニュートラルなデフォルトスタイリングを備えた広範なカスタマイズをサポートし、さまざまなデザインの好みに適応し、プロジェクト全体で柔軟な使用のためにコンポーネントがポータブルで自己完結型であることを保証します。
    セマンティックUIは十分に文書化されており、スタイルガイドが含まれており、初心者がアクセスできるようにし、経験豊富な開発者が効果的に効果的に学習して実装します。
    • 機能
    • セマンティックUIは2つの点で一意です。 1つ目は、フレームワークの構成方法です。 5つの説明カテゴリを使用して、再利用可能なUIコンポーネントを定義します。
    • UI要素は基本的なビルディングブロックです。単独で、または均一なグループに表示される可能性があります。たとえば、ボタンは独立したり、ボタングループに入れたりできます。
    • UIコレクションは、相互依存性のあるさまざまな種類の要素のグループです。たとえば、Webフォームには、ボタン、入力、チェックボックス、アイコンなどを備えています。
      • UIビューは、一般的なWebサイトコンテンツを表します。たとえば、フィードまたはコメントセクション。
      • UIモジュールは、インタラクティブなJavaScriptベースの機能を備えたコンポーネントです。例には、アコーディオン、調光器、モーダルなどが含まれます
    • UIの動作は、独立して存在することはできないコンポーネントですが、代わりに他のコンポーネントに機能を注入するために使用されます。たとえば、フォーム検証動作は、フォームコンポーネントの検証機能を提供します。
    • ほぼすべてのコンポーネントには、タイプ、状態、バリエーションがあります。たとえば、ボタンコンポーネントのタイプには、標準ボタン、アイコン付きボタン、アニメーションボタン、ボタンがアクティブ、無効、またはロード状態になります。最後に、ボタンのサイズと色は異なる場合があり、基本的、社会的、流動的、切り替えなどとしてフォーマットできます。このスキームは、コンポーネントの外観に大きな柔軟性を提供します。
    ご覧のとおり、セマンティックUIは、クラスの名前を付けるという点で意味があり、適切に構成されているだけでなく、コンポーネントの命名、定義、説明においても構成されています。この構造は、ブートストラップまたはファンデーションに見られるものと比較してはるかに意味的です。

    セマンティックUIの2番目のユニークなことは、他のフレームワークに存在しないいくつかの排他的な機能とコンポーネントを提供することです。たとえば、UIのフィードとコメントは、UIモジュールからコンポーネントまたはサイドバーとシェイプを表示します。また、セマンティックUIコンポーネントと対話すると、リアルタイムのデバッグ出力が得られます。 Webコンソールを開くだけで、コンポーネントが彼らがしていることを正確に伝えているのがわかります。

    セマンティックUIのもう1つの強さは、最小限のニュートラルなスタイリングを使用しており、カスタマイズを開いたままにしていることです。おそらく使用しない追加機能を除外しながら、重要で有用なものが含まれています。さらに、フレームワークのコンポーネントはポータブルで自己完結型であるため、必要なもののみをつかんで使用できます。

    フレームワークは、その要素にEMおよびREMユニットを使用しているため、あらゆるサイズに完全に応答し、適応します。ベースフォントを変更するだけで、他のすべての要素がそれに応じて調整されます。

    最後に、セマンティックUIは非常によく文書化されており、ウェブサイトはさまざまなコンポーネントの多くの例を提供します。さらに、コードの書き方に関するテクニックと指示を備えたスタイルガイドがあります。これはすべて、フレームワークの学習を痛みのない体験にします。

    セマンティックUIが他のプロジェクトやツールと統合する方法を見つけるには、統合ページをチェックしてください。

    セマンティックUIで構築されたウェブサイトがどのように見えるかを見るには、風変わりなものにアクセスできます。

    わかりました。ここまでは順調ですね。しかし、このセマンティックUIの概要は、手を少し汚さずに完全に完全にならないと思います。それでは、今すぐセマンティックUIの甘さを味わえましょう。さまざまなセマンティックUIコンポーネントを使用して、素晴らしいサインイン/サインアップフォームを作成する方法を紹介します。

    サインイン/サインアップフォームをセマンティックUIで作成する方法

    ユーザーが「サインイン」するか「サインアップ」するかに応じて、ビューを切り替えるフォームを作成します。ビューがどのように見えるかは次のとおりです

    紹介：セマンティックUIコンポーネントライブラリ

    紹介：セマンティックUIコンポーネントライブラリ最初にセマンティックUIをダウンロードし、ジップファイルを開き、「パッケージ化」と呼ばれるフォルダーを抽出します。 To Semantic UIフォームの例（または簡単に識別するために使用できる他の何か）の名前を変更します。

    フォームの動作デモを表示するには、完全なform.htmlファイルをダウンロードして、セマンティックUIフォームサンプルフォルダーに配置してください。ブラウザでform.htmlファイルを開き、フォームで再生して、その感覚を取得します。次に、関連するコードを表示および説明してフォームを再現する方法を紹介します。

    開始するには、ファイルをcomplete_form.htmlに変更し、form.htmlという空のファイルを作成します。それを開いて、次のHTMLを追加します：

    これは私たちの開始テンプレートです。 semantic.cssおよびsemantic.jsファイルにリンクし、jQueryライブラリへの参照を追加します。また、JavaScriptとCSSのスクリプトとスタイルタグも追加します。 JavaScriptとCSSは、学習目的でのみ内部的に含めています。これは、複数のファイル間でジャンプする必要がないためです。しかし、実際のプロジェクトでは、外部ファイルを常に使用する方が良いです。

    始める前に、セマンティックUIの仕組みを考えてみましょう。すべてのコンポーネント定義は、UIのクラスに続いてコンポーネントの名前で始まります。たとえば、ボタン要素を追加するには、UIボタンのクラスを指定します。状態やバリエーションを追加するには、必要なクラスを挿入するだけです。たとえば、ホバーで色を青に変更するボタンを作成するには、Hover Stateクラスと青色のバリエーションクラスを追加します。

    フォームに戻りましょう。クラスは多かれ少なかれ自己記述的であり、ドキュメントでそれらの意味についてもっと見ることができるので、私は各クラスが何をするかを説明するつもりはありません。 
<span><span><!DOCTYPE HTML></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><meta</span> charset<span>="utf-8"</span> /></span>
</span>  <span><span><span><title</span>></span>Semantic UI Sign In/Sign Up Form<span><span></title</span>></span>
</span>
  <span><span><span><link</span> href<span>="css/semantic.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>
</span>
  <span><span><span><style</span> type<span>="text/css"</span>></span><span>
</span></span><span><span>
</span></span><span><span>  </span><span><span></style</span>></span>
</span>
<span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>

  <span><!-- content will go here -->
</span>

  <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-1.10.2.min.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span><script</span> src<span>="javascript/semantic.js"</span> type<span>="text/javascript"</span>></span><span><span></script</span>></span>
</span>
  <span><span><span><script</span> type<span>="text/javascript"</span>></span><span>
</span></span><span><span>
</span></span><span><span>  </span><span><span></script</span>></span>      
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>
最初に行う必要があるのは、フォームを含むセグメント要素を追加することです。これを行い、UI上昇したセグメントSigninのクラスでDivタグを追加します。フォームのタイトルには、UIの逆青色ブロックヘッダーのクラスを備えたH3タグを使用します。次に、列の間に垂直の仕切りを備えた2列のグリッドを作成します。最初の列には、Form elementsを保持するUIブルースタッキングセグメントのクラスを備えたDIVを追加します。下部には、別の仕切り要素とフッターのクラスを備えたDivを配置します。
<span><span><!DOCTYPE HTML></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><meta</span> charset<span>="utf-8"</span> /></span>
</span>  <span><span><span><title</span>></span>Semantic UI Sign In/Sign Up Form<span><span></title</span>></span>
</span>
  <span><span><span><link</span> href<span>="css/semantic.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span> /></span>
</span>
  <span><span><span><style</span> type<span>="text/css"</span>></span><span>
</span></span><span><span>
</span></span><span><span>  </span><span><span></style</span>></span>
</span>
<span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>

  <span><!-- content will go here -->
</span>

  <span><span><span><script</span> src<span>="https://code.jquery.com/jquery-1.10.2.min.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span><script</span> src<span>="javascript/semantic.js"</span> type<span>="text/javascript"</span>></span><span><span></script</span>></span>
</span>
  <span><span><span><script</span> type<span>="text/javascript"</span>></span><span>
</span></span><span><span>
</span></span><span><span>  </span><span><span></script</span>></span>      
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

ここで、いくつかのスタイリングを追加する必要があります。現在空のスタイルのタグ内にコードを置きます。

<span><span><span><div</span> class<span>="ui raised segment signin"</span>></span>
</span>  <span><span><span><h3</span> class<span>="ui inverted blue block header"</span>></span> SIGN IN <span><span></h3</span>></span>
</span>  <span><span><span><div</span> class<span>="ui two column grid basic segment"</span>></span>
</span>    <span><span><span><div</span> class<span>="column"</span>></span>
</span>      <span><span><span><div</span> class<span>="ui blue stacked segment"</span>></span>
</span>           <span><!-- form here -->
</span>      <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="ui vertical divider"</span>></span> OR <span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="center aligned column"</span>></span>
</span>      <span><!-- Facebook button here -->
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="ui divider"</span>></span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="footer"</span>></span>
</span>    <span><!-- text plus button here -->
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

次に、最初の列（HTMLコメントが「ここにフォーム」と書かれている）で、フォームのコードを追加します。フォームを作成するには、UIフォームのクラスでDivタグを追加します。次に、フィールドのクラスを備えた2つのDivタグを、インラインフィールドのクラスを備えたもう1つ、そして最後にUI Red Submit Buttonのクラスを備えた1つを配置します。最初の2つのフィールドは、usernameおよびパスワードの場合です。インラインになるようにフォーマットされている3番目のDIVで、チェックボックスを配置します。

クラスセンターアラインド列を備えた2番目の列（HTMLコメントに「Facebookボタンがここにある」と書かれています）で、H4の見出しを使用して、セマンティックUIのFacebookソーシャルボタンを追加します：
<span>body<span>, .ui.vertical.divider</span> {
</span>  <span>color: #696969;
</span><span>}
</span>
<span><span>.ui.vertical.divider</span> {
</span>  <span>margin: 0 4px;
</span><span>}
</span>
<span><span>.ui.raised.segment</span> {
</span>  <span>background-color: #fffacd;
</span>  <span>width: 600px;
</span>  <span>margin-top: 0;
</span>  <span>position: fixed;
</span>  <span>left: 10px;
</span>  <span>top: 10px;
</span><span>}</span>

テキストとサインインからサインアップにフォームを切り替えるアニメーションボタンを追加して、フッターを完成させます。次のHTMLが追加されます。HTMLコメントが「こちらのテキストプラスボタン」と書かれています：
<span><span><span><div</span> class<span>="ui form"</span>></span>
</span>  <span><span><span><div</span> class<span>="field"</span>></span>
</span>    <span><span><span><label</span>></span> Username <span><span></label</span>></span>
</span>    <span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span>
</span>      <span><span><span><input</span> type<span>="text"</span>></span>
</span>      <span><span><span><i</span> class<span>="user icon"</span>></span><span><span></i</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="field"</span>></span>
</span>    <span><span><span><label</span>></span> Password <span><span></label</span>></span>
</span>    <span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span>
</span>      <span><span><span><input</span> type<span>="password"</span>></span>
</span>      <span><span><span><i</span> class<span>="lock icon"</span>></span><span><span></i</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="inline field"</span>></span>
</span>    <span><span><span><div</span> class<span>="ui checkbox"</span>></span>
</span>      <span><span><span><input</span> id<span>="remember"</span> type<span>="checkbox"</span>></span>
</span>      <span><span><span><label</span> for<span>="remember"</span>></span> Remember me <span><span></label</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="ui red submit button"</span>></span> Sign In <span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

また、フッターを適切にレンダリングするためにスタイリングを追加する必要があります。スタイルタグ内の既存のCSSの下に次のCSSを追加します。 

<span><span><span><h4</span> class<span>="ui header"</span>></span> Sign in with: <span><span></h4</span>></span>
</span><span><span><span><div</span> class<span>="ui facebook button"</span>></span>
</span>  <span><span><span><i</span> class<span>="facebook icon"</span>></span><span><span></i</span>></span>
</span>  Facebook
<span><span><span></div</span>></span></span>
今、最初の側（「サインアップ」）の準備ができました。 2番目を作成しましょう。以下のコードは、すでにカバーしているコードに似ています。このHTMLは、既存のすべてのHTMLのすべての下に追加されます：

<span><span><span><div</span> class<span>="text"</span>></span> Not a member? <span><span></div</span>></span>
</span><span><span><span><div</span> class<span>="ui vertical animated blue mini button signup"</span>></span>
</span>  <span><span><span><div</span> class<span>="visible content"</span>></span> Join Us <span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="hidden content"</span>></span>
</span>    <span><span><span><i</span> class<span>="users icon"</span>></span><span><span></i</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>
次に、セグメント要素内のフォームのコードを追加しました。HTMLを追加しました（HTMLコメントに「ここにフォーム」と書かれています）。クラスUIエラーメッセージ付きのDIVは、後で追加するフォーム検証動作がユーザーにエラーを表示する必要があるため、フォームの最後に配置されます。

上記のHTMLの各フィールド要素には、それぞれに追加するフォームのどの部分を示すコメントがあります。今すぐやってみましょう。
<span><span>.footer</span> {
</span>  <span>text-align: right;
</span><span>}
</span>
<span><span>.text</span> {
</span>  <span>display: inline;
</span><span>}</span>

ここに

username
<span><span><span><div</span> class<span>="ui raised segment signup inactive"</span>></span>
</span>  <span><span><span><h3</span> class<span>="ui inverted blue block header"</span>></span> SIGN UP <span><span></h3</span>></span>
</span>  <span><span><span><div</span> class<span>="ui blue stacked segment"</span>></span>
</span>       <span><!-- form here -->
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="ui divider"</span>></span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="footer"</span>></span>
</span>    <span><span><span><div</span> class<span>="text"</span>></span> Already a member? <span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="ui vertical animated blue mini button signin"</span>></span>
</span>      <span><span><span><div</span> class<span>="visible content"</span>></span> Log In <span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="hidden content"</span>></span>
</span>        <span><span><span><i</span> class<span>="sign in icon"</span>></span><span><span></i</span>></span>
</span>      <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>
フィールドのコードがあります：

これが emailフィールドのコードです： 

<span><span><span><div</span> class<span>="ui form"</span>></span>
</span>  <span><span><span><div</span> class<span>="two fields"</span>></span>
</span>    <span><span><span><div</span> class<span>="field"</span>></span>
</span>      <span><!-- Username here -->              
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="field"</span>></span>
</span>      <span><!-- Email here -->
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="two fields"</span>></span>
</span>    <span><span><span><div</span> class<span>="field"</span>></span>
</span>      <span><!-- Password here -->        
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="field"</span>></span>
</span>      <span><!-- Confirm Password here -->
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="inline field"</span>></span>
</span>    <span><!-- checkbox here -->
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="ui red submit button"</span>></span> Sign Up <span><span></div</span>></span>
</span>  <span><span><span><div</span> class<span>="ui error message"</span>></span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>
ここに、

パスワードのコードがありますフィールド： 

<span><span><span><label</span>></span> Username <span><span></label</span>></span>
</span><span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span>
</span>  <span><span><span><input</span> id<span>="username"</span> placeholder<span>="e.g., Tarzan"</span> type<span>="text"</span>></span>
</span>  <span><span><span><i</span> class<span>="user icon"</span>></span><span><span></i</span>></span>
</span>  <span><span><span><div</span> class<span>="ui corner label"</span>></span>
</span>    <span><span><span><i</span> class<span>="asterisk icon"</span>></span><span><span></i</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>
ここに、パスワードを確認する

のコードフィールド：があります 

<span><span><span><label</span>></span> Email <span><span></label</span>></span>
</span><span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span>
</span>  <span><span><span><input</span> id<span>="email"</span> placeholder<span>="e.g., tarzan@jungle.org"</span> type<span>="text"</span>></span>
</span>  <span><span><span><i</span> class<span>="mail icon"</span>></span><span><span></i</span>></span>
</span>  <span><span><span><div</span> class<span>="ui corner label"</span>></span>
</span>    <span><span><span><i</span> class<span>="asterisk icon"</span>></span><span><span></i</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>
およびチェックボックスのコード：

また、リンクにスタイリングを追加します： 

<span><span><span><label</span>></span> Password <span><span></label</span>></span>
</span><span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span>
</span>  <span><span><span><input</span> id<span>="password"</span> placeholder<span>="e.g., !@#$%^&amp;*()_+:)"</span> type<span>="password"</span>></span>
</span>  <span><span><span><i</span> class<span>="lock icon"</span>></span><span><span></i</span>></span>
</span>  <span><span><span><div</span> class<span>="ui corner label"</span>></span>
</span>    <span><span><span><i</span> class<span>="asterisk icon"</span>></span><span><span></i</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>
フォームの2つの部分の準備が整ったので、フォームの片側からもう片方に切り替えるためのコードを追加する必要があります。次のコードを空のスクリプトタグに入れます。

<span><span><span><label</span>></span> Confirm Password <span><span></label</span>></span>
</span><span><span><span><div</span> class<span>="ui left labeled icon input"</span>></span>
</span>  <span><span><span><input</span> id<span>="confirm-password"</span> placeholder<span>="e.g., !@#$%^&amp;*()_+:)"</span> type<span>="password"</span>></span>
</span>  <span><span><span><i</span> class<span>="lock icon"</span>></span><span><span></i</span>></span>
</span>  <span><span><span><div</span> class<span>="ui corner label"</span>></span>
</span>    <span><span><span><i</span> class<span>="asterisk icon"</span>></span><span><span></i</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>
私たちのフォームは見栄えがします - しかし、ユーザーが無効な値を入力した場合はどうなりますか？検証を追加する必要があります。これを行います。スクリプトタグ内に次のコードを追加します。上記で追加したコードの後、

<span><span><span><div</span> class<span>="ui checkbox"</span>></span>
</span>  <span><span><span><input</span> id<span>="terms"</span> type<span>="checkbox"</span>></span>
</span>  <span><span><span><label</span> for<span>="terms"</span>></span> I agree to the <span><span><a</span> href<span>="#"</span>></span> Terms and Conditions <span><span></a</span>></span><span><span></label</span>></span>
</span><span><span><span></div</span>></span></span>
上記のコードがドキュメントでどのように機能するかについて詳しく読むことができます。

よくやった！これはかなり単純な例であり、それを使用すると、セマンティックUIの機能の表面を傷つけただけです。

結論

ご覧のとおり、Semantic UIは、新しい、新鮮で、いくつかの面で、フロントエンド開発フレームワークの風景にユニークな追加であるというものです。ここで考えたことから、この執筆時点では数ヶ月しかありませんが、今年の多くの開発者のウォッチリストに載るに値することが非常に有望であることがわかります。 もう一度、ここから完全なチュートリアルファイルをダウンロードして、完全なセマンティックUIライブラリを解凍するときに「パッケージ化された」フォルダー内に追加することを忘れないでください。

セマンティックUIコンポーネントライブラリに関するよくある質問（FAQ）

​​

セマンティックUIは、人間に優しいHTMLのために他のUIライブラリから際立っています。より速く、より直感的な開発が可能になります。セマンティックUIのクラスは、名詞/修飾子関係、語順、複数などの自然言語の構文を使用して、概念を直感的にリンクします。これにより、コードは初心者であっても読みやすく理解しやすくなります。これを行うには、NPMコマンド：NPMインストールSemantic-UIを使用できます。インストール後、セマンティックUI CSSとJavaScriptをプロジェクトにインポートできます。次に、htmlでセマンティックUIコンポーネントの使用を開始できます。

反応でセマンティックUIを使用できますか？セマンティックUIの公式React統合であるSemantic UI Reactと呼ばれる特定のライブラリがあります。 ReactアプリケーションでセマンティックUIコンポーネントとテーマを直接使用できます。ファイル。このファイルは、すべてのテーマの変数の中心的な設定として機能します。変数の値を変更して、テーマの外観をカスタマイズできます。一般的なものには、ボタン、アイコン、ヘッダー、仕切り、ラベル、リスト、カードが含まれます。各コンポーネントには、独自のバリエーションのセットとカスタマイズのオプションが付属しています。

セマンティックUIの公式の角度統合はありませんが、プロジェクトにセマンティックUI CSSとJavaScriptファイルを手動で含めることにより、Angularで使用できます。

セマンティックUIを更新するにはどうすればよいですか？

NPMアップデートSemantic-UIコマンドを実行してセマンティックUIを更新できます。これにより、セマンティックUIが最新バージョンに更新されます。

セマンティックUIの代替品は何ですか？

セマンティックUIの代替品には、ブートストラップ、ファンデーション、マテリアルUI、およびBULMAが含まれます。これらのライブラリにはそれぞれ独自の長所と短所があるため、最良の選択は特定のニーズと好みに依存します。

以上が紹介：セマンティックUIコンポーネントライブラリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript jquery css bootstrap less html npm angular define if switch for while checkbox include Error using class Interface finally Collection JS console default this history column github ui word Foundation Other
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：アプリフレームワークを備えたモバイルHTML5アプリケーションの作成次の記事：アプリフレームワークを備えたモバイルHTML5アプリケーションの作成

関連記事

続きを見る