Sematic UI CDN を使用したWebデザインの基本と具体的なコード例

2024-02-10 00:31 Sematic UI CDN Webデザイン

  1. Sematic UI CDNの導入方法: Sematic UI CDNを使用するには、HTMLファイルのセクション内に以下のコードを追加します。

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.js"></script>

  2. 基本的なWebデザインの要素の使用例: Sematic UIを使用すると、簡単に洗練されたデザイン要素を追加できます。以下に、いくつかの基本的な要素の使用例を示します。

    • ボタン:

      <button class="ui primary button">Click me</button>

    • フォーム:

      <div class="ui form">
<div class="field">
 <label>名前</label>
 <input type="text" placeholder="名前を入力してください">
</div>
<button class="ui button" type="submit">送信</button>
</div>

    • ヘッダー:

      <div class="ui inverted segment">
<h3 class="ui header">ようこそ！</h3>
</div>

  3. カスタマイズと拡張: Sematic UIはカスタマイズ可能なフレームワークです。デザインのカスタマイズや新しい要素の追加も可能です。公式ドキュメントを参照して、さらに高度なカスタマイズの方法を学ぶことができます。

以上が、Sematic UI CDNを使用したWebデザインの基本と具体的なコード例の紹介です。これらの手法を活用して、洗練されたウェブサイトやアプリケーションを作成してください。