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

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

Christopher Nolan
Christopher Nolan
Feb 22, 2025 am 08:47 AM

紹介：セマンティック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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

KB5055523を修正する方法Windows 11にインストールできませんか？
3週間前 By DDD
KB5055518を修正する方法Windows 10にインストールできませんか？
3週間前 By DDD
<🎜>：死んだレール - オオカミの飼い主
1 か月前 By DDD
R.E.P.O.のすべての敵とモンスターの強度レベル
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：庭を育てる - 完全な突然変異ガイド
2週間前 By DDD
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Java チュートリアル
1662
14
CakePHP チュートリアル
1418
52
Laravel チュートリアル
1311
25
PHP チュートリアル
1261
29
C# チュートリアル
1234
24
もっと見る
Related knowledge
javascriptの分解：それが何をするのか、なぜそれが重要なのか javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptの進化：現在の傾向と将来の見通し JavaScriptの進化：現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptエンジン：実装の比較 JavaScriptエンジン：実装の比較 Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

JavaScript：Web言語の汎用性の調査 JavaScript：Web言語の汎用性の調査 Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合） next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合） Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

Python vs. JavaScript：学習曲線と使いやすさ Python vs. JavaScript：学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

C/CからJavaScriptへ：すべてがどのように機能するか C/CからJavaScriptへ：すべてがどのように機能するか Apr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合） next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合） Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか？ マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

See all articles