1. <blockquote id="sejmo"><rt id="sejmo"></rt></blockquote>
      ><\/span>\n<\/span>\n\n  \n<\/span>\n\n  
	







      亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱
      
	

      
    

      

	
	
      
		
      
			
      
							
      
					
      
						
      目次
      
						
      
							
															
      
									結(jié)論
								
      
																
      
									セマンティックUIは、人間に優(yōu)しいHTMLのために他のUIライブラリから際立っています。より速く、より直感的な開(kāi)発が可能になります。セマンティックUIのクラスは、名詞/修飾子関係、語(yǔ)順、複數(shù)などの自然言語(yǔ)の構(gòu)文を使用して、概念を直感的にリンクします。これにより、コードは初心者であっても読みやすく理解しやすくなります。これを行うには、NPMコマンド：NPMインストールSemantic-UIを使用できます。インストール後、セマンティックUI CSSとJavaScriptをプロジェクトにインポートできます。次に、htmlでセマンティックUIコンポーネントの使用を開(kāi)始できます。
								
      
														
      
					
      
				
      
							
      
					
      
						ホームページ
						
												ウェブフロントエンド
						
												jsチュートリアル
						
						紹介：セマンティックUIコンポーネントライブラリ
					
      
					
					
      
						
      
							
      紹介：セマンティックUIコンポーネントライブラリ
      
							
							Feb 22, 2025 am	 08:47 AM
														
						
      
					
      
					
      
					
      
						
      
						
						
						

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

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


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

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



      

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



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



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



      最小限のニュートラルなデフォルトスタイリングを備えた広範(fàn)なカスタマイズをサポートし、さまざまなデザインの好みに適応し、プロジェクト全體で柔軟な使用のためにコンポーネントがポータブルで自己完結(jié)型であることを保証します。



        セマンティックUIは十分に文書(shū)化されており、スタイルガイドが含まれており、初心者がアクセスできるようにし、経験豊富な開(kāi)発者が効果的に効果的に學(xué)習(xí)して実裝します。

      • 


        • 機(jī)能
      • 

        • セマンティックUIは2つの點(diǎn)で一意です。 1つ目は、フレームワークの構(gòu)成方法です。 5つの説明カテゴリを使用して、再利用可能なUIコンポーネントを定義します。
          

        •  UI要素は基本的なビルディングブロックです。単獨(dú)で、または均一なグループに表示される可能性があります。たとえば、ボタンは獨(dú)立したり、ボタングループに入れたりできます。
          • 

        • UIコレクションは、相互依存性のあるさまざまな種類の要素のグループです。たとえば、Webフォームには、ボタン、入力、チェックボックス、アイコンなどを備えています。

          •  UIビューは、一般的なWebサイトコンテンツを表します。たとえば、フィードまたはコメントセクション。
        • 

          • UIモジュールは、インタラクティブなJavaScriptベースの機(jī)能を備えたコンポーネントです。例には、アコーディオン、調(diào)光器、モーダルなどが含まれます

        • UIの動(dòng)作は、獨(dú)立して存在することはできないコンポーネントですが、代わりに他のコンポーネントに機(jī)能を注入するために使用されます。たとえば、フォーム検証動(dòng)作は、フォームコンポーネントの検証機(jī)能を提供します。

          • 

        • ほぼすべてのコンポーネントには、タイプ、狀態(tài)、バリエーションがあります。たとえば、ボタンコンポーネントのタイプには、標(biāo)準(zhǔn)ボタン、アイコン付きボタン、アニメーションボタン、ボタンがアクティブ、無(wú)効、またはロード狀態(tài)になります。最後に、ボタンのサイズと色は異なる場(chǎng)合があり、基本的、社會(huì)的、流動(dòng)的、切り替えなどとしてフォーマットできます。このスキームは、コンポーネントの外観に大きな柔軟性を提供します。
          • 

        ご覧のとおり、セマンティックUIは、クラスの名前を付けるという點(diǎn)で意味があり、適切に構(gòu)成されているだけでなく、コンポーネントの命名、定義、説明においても構(gòu)成されています。この構(gòu)造は、ブートストラップまたはファンデーションに見(jiàn)られるものと比較してはるかに意味的です。
        

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

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

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

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

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

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

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

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

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

         
        

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

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

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


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


        


        これは私たちの開(kāi)始テンプレートです。 semantic.cssおよびsemantic.jsファイルにリンクし、jQueryライブラリへの參照を追加します。また、JavaScriptとCSSのスクリプトとスタイルタグも追加します。 JavaScriptとCSSは、學(xué)習(xí)目的でのみ內(nèi)部的に含めています。これは、複數(shù)のファイル間でジャンプする必要がないためです。しかし、実際のプロジェクトでは、外部ファイルを常に使用する方が良いです。

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

        フォームに戻りましょう。クラスは多かれ少なかれ自己記述的であり、ドキュメントでそれらの意味についてもっと見(jiàn)ることができるので、私は各クラスが何をするかを説明するつもりはありません。

      

      <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を保持するU(xiǎn)Iブルースタッキングセグメントのクラスを備えた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>
      


      ここで、いくつかのスタイリングを追加する必要があります?，F(xiàn)在空のスタイルのタグ內(nèi)にコードを置きます。
      


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


      

クラスセンターアラインド列を備えた2番目の列（HTMLコメントに「Facebookボタンがここにある」と書(shū)かれています）で、H4の見(jiàn)出しを使用して、セマンティック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コメントが「こちらのテキストプラスボタン」と書(shū)かれています：
      <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>
      


      

また、フッターを適切にレンダリングするためにスタイリングを追加する必要があります。スタイルタグ內(nèi)の既存の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>
      今、最初の側(cè)（「サインアップ」）の準(zhǔn)備ができました。 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>
      次に、セグメント要素內(nèi)のフォームのコードを追加しました。HTMLを追加しました（HTMLコメントに「ここにフォーム」と書(shū)かれています）。クラスUIエラーメッセージ付きのDIVは、後で追加するフォーム検証動(dòng)作がユーザーにエラーを表示する必要があるため、フォームの最後に配置されます。


      


      上記の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>
      ここに、パスワードを確認(rèn)する
      のコードフィールド：があります


      


      <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つの部分の準(zhǔn)備が整ったので、フォームの片側(cè)からもう片方に切り替えるためのコードを追加する必要があります。次のコードを空のスクリプトタグに入れます。
      


      


      <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>
      私たちのフォームは見(jiàn)栄えがします - しかし、ユーザーが無(wú)効な値を入力した場(chǎng)合はどうなりますか？検証を追加する必要があります。これを行います。スクリプトタグ內(nèi)に次のコードを追加します。上記で追加したコードの後、
      


      


      <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>
      上記のコードがドキュメントでどのように機(jī)能するかについて詳しく読むことができます。

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

      結(jié)論
      

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




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



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

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

      セマンティックUIの公式の角度統(tǒng)合はありませんが、プロジェクトにセマンティックUI CSSとJavaScriptファイルを手動(dòng)で含めることにより、Angularで使用できます。 
      セマンティックUIを更新するにはどうすればよいですか？
      NPMアップデートSemantic-UIコマンドを?qū)g行してセマンティックUIを更新できます。これにより、セマンティックUIが最新バージョンに更新されます。
      セマンティックUIの代替品は何ですか？
      セマンティックUIの代替品には、ブートストラップ、ファンデーション、マテリアルU(xiǎn)I、およびBULMAが含まれます。これらのライブラリにはそれぞれ獨(dú)自の長(zhǎng)所と短所があるため、最良の選択は特定のニーズと好みに依存します。
      以上が紹介：セマンティックUIコンポーネントライブラリの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。
      


						
      
					
      
					
      
						
      このウェブサイトの聲明
      
						
      この記事の內(nèi)容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰屬します。このサイトは、それに相當(dāng)する法的責(zé)任を負(fù)いません。盜作または侵害の疑いのあるコンテンツを見(jiàn)つけた場(chǎng)合は、admin@php.cn までご連絡(luò)ください。
      
					
      
				
      

				



				
      


				
    


					


											
      
							
      
								
      
									
									
      ホットAIツール
      
								
      
								
      
																		
      
											
												Undress AI Tool
											
											
      
												
													
      Undress AI Tool
      
												      
												
      脫衣畫(huà)像を無(wú)料で
      
											
      
										
      
																		
      
											
												Undresser.AI Undress
											
											
      
												
													
      Undresser.AI Undress
      
												      
												
      リアルなヌード寫(xiě)真を作成する AI 搭載アプリ
      
											
      
										
      
																		
      
											
												AI Clothes Remover
											
											
      
												
													
      AI Clothes Remover
      
												      
												
      寫(xiě)真から衣服を削除するオンライン AI ツール。
      
											
      
										
      
																		
      
											
												Clothoff.io
											
											
      
												
													
      Clothoff.io
      
												      
												
      AI衣類リムーバー
      
											
      
										
      
																		
      
											
												Video Face Swap
											
											
      
												
													
      Video Face Swap
      
												      
												
      完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
      
											
      
										
      
																
      
								
							
      
						
      
					


					


											
      
							
      
								
      
									
									
      ホットツール
      
								
      
								
      
																		
      
											
												メモ帳++7.3.1
											
											
      
												
													
      メモ帳++7.3.1
      
												      
												
      使いやすく無(wú)料のコードエディター
      
											
      
										
      
																			
      
											
												SublimeText3 中國(guó)語(yǔ)版
											
											
      
												
													
      SublimeText3 中國(guó)語(yǔ)版
      
												      
												
      中國(guó)語(yǔ)版、とても使いやすい
      
											
      
										
      
																			
      
											
												ゼンドスタジオ 13.0.1
											
											
      
												
													
      ゼンドスタジオ 13.0.1
      
												      
												
      強(qiáng)力な PHP 統(tǒng)合開(kāi)発環(huán)境
      
											
      
										
      
																			
      
											
												ドリームウィーバー CS6
											
											
      
												
													
      ドリームウィーバー CS6
      
												      
												
      ビジュアル Web 開(kāi)発ツール
      
											
      
										
      
																			
      
											
												SublimeText3 Mac版
											
											
      
												
													
      SublimeText3 Mac版
      
												      
												
      神レベルのコード編集ソフト（SublimeText3）
      
											
      
										
      
																	
      
								
							
      
						
      
										

					
					
				
      
			
      
							
      
					
      
						
						
      

													
      
								
									Garbage CollectionはJavaScriptでどのように機(jī)能しますか？
								
								Garbage CollectionはJavaScriptでどのように機(jī)能しますか？
								Jul 04, 2025 am	 12:42 AM
								
      JavaScriptのごみ収集メカニズムは、タグクリアリングアルゴリズムを介してメモリを自動(dòng)的に管理して、メモリ漏れのリスクを減らします。エンジンはルートオブジェクトからアクティブオブジェクトを橫斷およびマークし、マークされていないオブジェクトはゴミとして扱われ、クリアされます。たとえば、オブジェクトが參照されなくなった場(chǎng)合（変數(shù)をnullに設(shè)定するなど）、次のリサイクルでリリースされます。メモリリークの一般的な原因には以下が含まれます。 closurures閉鎖の外部変數(shù)への參照。 globalグローバル変數(shù)は引き続き大量のデータを保持しています。 V8エンジンは、世代のリサイクル、増分マーキング、並列/同時(shí)リサイクルなどの戦略を通じてリサイクル効率を最適化し、メインスレッドのブロック時(shí)間を短縮します。開(kāi)発中、不必要なグローバル?yún)⒄栅虮埭?、パフォーマンスと安定性を改善するためにオブジェクトの関連付けを迅速に裝飾する必要があります。
      
							
      
														
      
								
									node.jsでHTTPリクエストを作成する方法は？
								
								node.jsでHTTPリクエストを作成する方法は？
								Jul 13, 2025 am	 02:18 AM
								
      node.jsでHTTPリクエストを開(kāi)始するには、組み込みモジュール、axios、およびnode-fetchを使用する3つの一般的な方法があります。 1.依存関係のない內(nèi)蔵http/httpsモジュールを使用します。これは基本的なシナリオに適していますが、https.get（）を使用してデータを取得したり、.write（）を介してPOSTリクエストを送信するなど、データステッチとエラーモニタリングの手動(dòng)処理が必要です。 2.Axiosは、約束に基づいたサードパーティライブラリです。簡(jiǎn)潔な構(gòu)文と強(qiáng)力な機(jī)能を備えており、非同期/待ち聲、自動(dòng)JSON変換、インターセプターなどをサポートします。非同期リクエスト操作を簡(jiǎn)素化することをお?jiǎng)幛幛筏蓼埂?3.Node-Fetchは、約束と単純な構(gòu)文に基づいて、ブラウザフェッチに似たスタイルを提供します
      
							
      
														
      
								
									JavaScriptデータ型：プリミティブ対參照
								
								JavaScriptデータ型：プリミティブ対參照
								Jul 13, 2025 am	 02:43 AM
								
      JavaScriptデータ型は、プリミティブタイプと參照タイプに分割されます。プリミティブタイプには、文字列、數(shù)字、ブール、ヌル、未定義、シンボルが含まれます。値は不変であり、コピーは値を割り當(dāng)てるときにコピーされるため、互いに影響を與えません。オブジェクト、配列、関數(shù)などの參照タイプはメモリアドレスを保存し、同じオブジェクトを指す変數(shù)は互いに影響します。 TypeofとInstanceOFを使用してタイプを決定できますが、TypeOfNullの歴史的な問(wèn)題に注意してください。これらの2種類の違いを理解することは、より安定した信頼性の高いコードを書(shū)くのに役立ちます。
      
							
      
														
      
								
									JavaScript Timeオブジェクト、誰(shuí)かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。
								
								JavaScript Timeオブジェクト、誰(shuí)かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。
								Jul 08, 2025 pm	 02:27 PM
								
      こんにちは、JavaScript開(kāi)発者！今週のJavaScriptニュースへようこそ！今週は、DenoとのOracleの商標(biāo)紛爭(zhēng)、新しいJavaScript Timeオブジェクトがブラウザ、Google Chromeアップデート、およびいくつかの強(qiáng)力な開(kāi)発ツールによってサポートされています。始めましょう！ 「JavaScript」の商標(biāo)を登録しようとするDeno Oracleの試みとのOracleの商標(biāo)紛爭(zhēng)は、論爭(zhēng)を引き起こしました。 Node.jsとDenoの作成者であるRyan Dahlは、商標(biāo)をキャンセルするために請(qǐng)願(yuàn)書(shū)を提出しました。
      
							
      
														
      
								
									React vs Angular vs Vue：どのJSフレームワークが最適ですか？
								
								React vs Angular vs Vue：どのJSフレームワークが最適ですか？
								Jul 05, 2025 am	 02:24 AM
								
      どのJavaScriptフレームワークが最良の選択ですか？答えは、あなたのニーズに応じて最も適切なものを選択することです。 1.反応は柔軟で無(wú)料で、高いカスタマイズとチームアーキテクチャ機(jī)能を必要とする中規(guī)模および大規(guī)模プロジェクトに適しています。 2。Angularは、エンタープライズレベルのアプリケーションと長(zhǎng)期的なメンテナンスに適した完全なソリューションを提供します。 3. Vueは使いやすく、中小規(guī)模のプロジェクトや迅速な発展に適しています。さらに、既存のテクノロジースタック、チームサイズ、プロジェクトのライフサイクル、およびSSRが必要かどうかは、フレームワークを選択する上で重要な要素でもあります。要するに、絶対に最良のフレームワークはありません。最良の選択は、あなたのニーズに合ったものです。
      
							
      
														
      
								
									JavaScriptですぐに呼び出された関數(shù)式（IIFE）を理解します
								
								JavaScriptですぐに呼び出された関數(shù)式（IIFE）を理解します
								Jul 04, 2025 am	 02:42 AM
								
      iife（即時(shí)インドボークフニックエクスペッション）は、定義の直後に実行される関數(shù)式であり、変數(shù)を分離し、グローバルな範(fàn)囲の汚染を避けるために使用されます。括弧內(nèi)に関數(shù)を包むことによって呼び出され、式と括弧のペアがすぐにそれに続く、（function（）{/code/}）（）;そのコアの使用には、次のものが含まれます。1。さまざまな競(jìng)合を回避し、複數(shù)のスクリプト間の命名の重複を防ぎます。 2。プライベートスコープを作成して、內(nèi)部変數(shù)を見(jiàn)えないようにします。 3。変數(shù)が多すぎずに初期化を容易にするモジュラーコード。一般的なライティング方法には、ES6矢印関數(shù)のパラメーターとバージョンで渡されたバージョンが含まれますが、式とタイを使用する必要があることに注意してください。
      
							
      
														
      
								
									ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ
								
								ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ
								Jul 08, 2025 am	 02:40 AM
								
      約束は、JavaScriptで非同期操作を処理するためのコアメカニズムです。チェーンコール、エラー処理、コンビナーの理解は、アプリケーションをマスターするための鍵です。 1.チェーンコールは、.then（）を通じて新しい約束を返し、非同期プロセスの連結(jié)を?qū)g現(xiàn)します。それぞれ.then（）は以前の結(jié)果を受け取り、値または約束を返すことができます。 2。エラー処理は、.catch（）を使用して例外をキャッチしてサイレント障害を回避し、キャッチのデフォルト値を返すためにプロセスを継続する必要があります。 3。promise.all（）などの組み合わせ（すべての成功後にのみ成功しました）、promise.race（）（最初の完了が返されます）、promise.allsettled（）（すべての完了を待っています）
      
							
      
														
      
								
									キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？
								
								キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？
								Jul 08, 2025 am	 02:43 AM
								
      Cacheapiは、ブラウザからネットワークリクエストをキャッシュするツールです。これは、ウェブサイトのパフォーマンスとオフラインエクスペリエンスを改善するために、サービスワーカーと併用することがよくあります。 1.開(kāi)発者は、スクリプト、スタイルシート、寫(xiě)真などのリソースを手動(dòng)で保存できるようにします。 2。要求に応じてキャッシュ応答と一致させることができます。 3.特定のキャッシュの削除またはキャッシュ全體のクリアをサポートします。 4.フェッチイベントを聞いているサービスワーカーを介して、キャッシュの優(yōu)先順位またはネットワークの優(yōu)先戦略を?qū)g裝できます。 5.オフラインサポート、繰り返しのアクセス速度の高速化、主要なリソースのプリロード、バックグラウンドアップデートコンテンツによく使用されます。 6.それを使用する場(chǎng)合、キャッシュバージョンの制御、ストレージ制限、およびHTTPキャッシングメカニズムとの違いに注意する必要があります。
      
							
      
													
      

													
								See all articles