コミュニティ
学ぶ
ツールライブラリ
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 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

KB5055612を修正する方法Windows 10にインストールできませんか？
4週間前 By DDD
<🎜>：バブルガムシミュレーターインフィニティ - ロイヤルキーの取得と使用方法
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：庭を育てる - 完全な突然変異ガイド
3週間前 By DDD
Nordhold：Fusion System、説明
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
マンドラゴラ：魔女の木のささやき - グラップリングフックのロックを解除する方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

もっと見る

ホットトピック

Java チュートリアル
1672
14
CakePHP チュートリアル
1428
52
Laravel チュートリアル
1332
25
PHP チュートリアル
1276
29
C# チュートリアル
1256
24
もっと見る
Related knowledge
Python vs. JavaScript：学習曲線と使いやすさ Python vs. JavaScript：学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

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

JavaScriptとWeb：コア機能とユースケース JavaScriptとWeb：コア機能とユースケース Apr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScript in Action：実際の例とプロジェクト JavaScript in Action：実際の例とプロジェクト Apr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptエンジンの理解：実装の詳細 JavaScriptエンジンの理解：実装の詳細 Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：コミュニティ、ライブラリ、リソース Python vs. JavaScript：コミュニティ、ライブラリ、リソース Apr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

Python vs. JavaScript：開発環境とツール Python vs. JavaScript：開発環境とツール Apr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScript通訳者とコンパイラにおけるC/Cの役割 JavaScript通訳者とコンパイラにおけるC/Cの役割 Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーション Webサイトからアプリまで：JavaScriptの多様なアプリケーション Apr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

See all articles