コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

トップ > CSS > Open Propsで実現する次世代UIデザインテクニック

Open Propsで実現する次世代UIデザインテクニック

CSS

Designing a modern UI theme with Open Props

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

Open Props による現代的な UI テーマの設計

新しくリリースされた Open Props のような CSS ライブラリにより、開発者は過度なコーディングなしにプロフェッショナルなデザインを実現できます。しかし、多くのスタイリングオプションが常に良いとは限りません。一部の CSS ライブラリやフレームワークは過度に複雑または硬直的で、長い学習曲線やカスタマイズの制限をもたらすことがあります。

Open Props は柔軟性を重視して設計されており、非規範的であると説明されています。これはオープンソースで、カラースキーム最適化された CSS ライブラリで、高速で一貫性のある、カスタマイズされたデザインオプションを提供します。Open Props はアプリケーションの CSS をクリーンでシンプルに保ち、ボイラープレートコードを減らします。

Tailwind CSS を含む他のほとんどの CSS ライブラリやフレームワークとは異なり、Open Props では開発者がセレクタ用に独自のカスタムクラス名を作成できます。一部の開発者は、事前定義されたクラス名に依存するよりも、独自の命名規則を使用する柔軟性を好みます。

Pollen もユーザー生成クラスを許可していますが、Open Props が提供するようなアニメーション効果の一部が欠けています。Open Props では、開発者は事前に作成されたキーフレーム効果を使用して独自のアニメーションを調整できます。

このチュートリアルでは、サンプルプロジェクトのユーザーインターフェースを設計するために Open Props を活用する方法を検討します。

始めましょう

Open Props CDN は、CSS、PostCSS、またはデザイントークンを使用するなど、さまざまな方法でウェブアプリケーションに追加できます。この記事では、Open Props CDN を直接 CSS ファイルにインポートします。

これが、このチュートリアルで構築するサンプル UI です：

Open Props デモプロジェクト

UI デザインのフォルダ構造を作成することから始めましょう。

まず、次のコマンドを使用してアプリフォルダを作成します：

mkdir Openpropsdemo && cd Openpropsdemo

次に、以下のフォルダとファイルを作成します：

  • 画像用のアセットフォルダ: mkdir assets/img
  • CSS 用のアセットフォルダ: mkdir assets/css
  • HTML ファイル: touch index.html
  • assets/css フォルダ内の CSS スタイルファイル: styles.css

次に、UI デザインで使用される画像を assets/img フォルダに追加します。その後、お気に入りのコードエディタでアプリフォルダを開きます（VS Code ユーザーは code . コマンドを使用できます）。

フォルダ構造は次のようになります：

openpropsdemo
│ assets
│ ├── css
│ │ ├── style.css
│ ├── img
│ index.html

UI マークアップの作成

次に、UI マークアップを始めましょう。

index.html ファイルを開き、「doc」と入力して TAB を押すと、次のマークアップスニペットが作成されます：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

次に、style.css ファイルを <head> タグ内の index.html ファイルにリンクします：

...
<link rel="stylesheet" href="./assets/css/style.css" />
...

次に、<header> タグと <section> タグを使用してマークアップを2つの部分に分けます。<header> から始めて、次のコードスニペットを <body> タグに配置します。

...
<header>
      <div class="content">
      <div class="nav-bar">
        <h4>LOGO</h4>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
        </ul>       
      </div>
      <div class="container">
        <div class="info">
            <h4>DESIGNING MODERN UI THEME WITH OPEN PROPS</h4>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus, excepturi.</p>
            <button>GET STARTED</button>
          </div>
        <div class="thumbnail">
          <img src="./assets/img/photo-1516321497487-e288fb19713f.jpeg">
        </div>
      </div>
    </header>
...

<section> タグのマークアップを追加します。次に、<body> タグ内の終了 <header> タグの後に次のコードスニペットを追加します：

...   
    <section>
       <div class="info">
         <h4>FEATURES</h4>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit soluta consequatur, perspiciatis quibusdam.</p>
      </div>
       <div class="content">
          <div class="features">
              <ul>
                <li>
                  <img src="./assets/img/erik-mclean-C3T8KTZxTFM-unsplash.jpg" class="circle">
                  <h4>LOREM IPSUM</h4>
                </li>
                <li>
                  <img src="./assets/img/istockphoto-1294303625-170667a.jpg" class="circle">
                  <h4>LOREM IPSUM</h4>
                </li>
                <li>
                  <img src="./assets/img/istockphoto-1312102723-170667a.jpg" class="circle">
                  <h4>LOREM IPSUM</h4>
                </li>
                <li>
                  <img src="./assets/img/istockphoto-1257851030-170667a.jpg" class="circle">
                  <h4>LOREM IPSUM</h4>
                </li>
              </ul>
          </div>
       </div>
     </section>
...

UI のスタイリング

これで Open Props で UI マークアップをスタイリングする準備ができました。以下の UI コンポーネントにカスタムスタイリングを追加します：

  • ヘッダー
  • ナビゲーションバー
  • 機能セクション
  • 画像とボタン

ヘッダーのスタイリング

ユーザーインターフェースヘッダーをスタイリングするために、style.css ファイルを開きます。次に、Open Props CDN を CSS ファイルにインポートします：

@import "https://unpkg.com/open-props";

マークアップ内のすべての要素にグローバルスタイリングを追加します。

まず、カスタムパディングとマージンを削除し、box-sizing プロパティでヘッダーのサイズを設定し、font-family を指定します。

* {
  padding: var(--size-fluid-0);
  margin: var(--size-fluid-0);
  box-sizing: border-box;
  font-family: var(--font-sans);
}

次に、ヘッダー要素内のすべてのコンテンツをスタイリングします。テキストを中央揃えにして色を指定し、background-image に Open Props のグラデーションを設定します。また、パディングを指定し、ヘッダー要素の下部にボーダー（border-bottom）を追加し、要素の下に余分なスペース（margin-border）を追加します。

header {
  text-align: center;
  color: var(--gray-9);
  --op-gradient-direction: to top left;
  background-image: var(--gradient-15);
  padding: var(--size-fluid-2);
  border-bottom: 4px solid var(--pink-3);
  margin-bottom: var(--size-fluid-3);
}

次に、ヘッダー要素内の .content セレクタに移ります。幅を 50% に設定し、マージンを 0px に設定して、すべての .content を中央揃えします：

header .content {
  margin: 0px auto;
  width: 50%;
}

ナビゲーションバーのスタイリング

UI ナビゲーションをスタイリングするために、まずヘッダー要素内の .nav-bar セレクタに移ります。

ロゴと ul 要素を並べて配置するために、display プロパティを flex に設定します。デフォルトでは、flex プロパティはコンテンツを列に表示するため、flex-direction プロパティを row に設定してリセットします。

justify-content プロパティを使用して、ロゴと ul 要素の間にスペースを追加します。次に、align-items プロパティを使用して、すべてのナビゲーション項目を中央揃えにします。最後に、display プロパティを使用してナビゲーション項目をインラインブロックで表示し、margin-left プロパティを使用して項目間にスペースを追加します。

header .nav-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
header .nav-bar ul li {
  display: inline-block;
  margin-left: var(--size-5);
}

以下がスタイリングされたナビゲーションバーです：

次に、ヘッダー要素内の .container セレクタに移ります。margin-top、display、justify-content プロパティを使用して、コンテンツ項目にスペースを与え、それらを並べて表示します。

.info セレクタを使用して幅を指定し、text-align を使用してテキストを揃えます。font-size を使用して h4 要素のサイズを大きくします。最後に、width と border を使用して、.info セレクタ内の画像要素の周りにサムネイルを追加します。

header .container {
  margin-top: var(--size-fluid-4);
  display: flex;
  justify-content: space-between;
}
header .container .info {
  width: 50%;
  text-align: left;
}
header .container .info h4 {
  font-size: var(--font-size-5);
  margin-bottom: var(--size-2);
}
header .container .info p {
  margin-bottom: var(--size-4);
}
header .container .thumbnail {
  width: 40%;
  border: var(--border-size-2) solid var(--gray-1);
}

以下がスタイリングされたヘッダーコンテナです：

機能セクションのスタイリング

次に、section 要素内の .features セレクタに移ります。margin-top、width、margin、text-align プロパティを使用して、このセクションのテキストをフォーマットします。

section .features {
  margin-top: var(--size-fluid-3);;
  width: 50%;
  margin: 0px auto;
  text-align: center;
}
section .features ul {
  display: flex;
  align-items: center;
}
section .features ul li {
  margin: var(--size-fluid-2);
  list-style: none;
}
section .features ul li h4 {
  font-size: var(--font-size-1);
}
section .info{
  text-align: center;
  margin-bottom:var(--size-fluid-4);
}

以下がスタイリングされた機能セクションです：

次に、inline-size、aspect-ratio、border-radius、width、height、border プロパティを使用して、機能セクションの円形画像フレームをスタイリングします：

.circle {
  inline-size: var(--size-5);
  aspect-ratio: var(--ratio-box);
  border-radius: var(--radius-round);
  width: 100px;
  height: 100px;
  border: var(--border-size-3) solid var(--gray-1);
}

画像とボタンのスタイリング

次に、画像とボタンをスタイリングします。すべての画像が親要素の 100% に相当する幅と高さを持つことを指定します。また、ボタンの background、border、padding、color、border-radius も指定します。

img {
  width: 100%;
  height: 100%;
}
button {
  background: var(--blue-4);
  border: 0px;
  padding: var(--size-3);
  color: var(--gray-1);
  border-radius: var(--radius-round);
}

以下がスタイリングされた画像です：

結論

このチュートリアルでは、Open Props を使用して UI テーマを設計する方法を示しました。このチュートリアルで使用されたシンプルな UI テーマは GitHub で利用可能です。Open Props の CSS カスタムプロパティによるデザインの可能性は、ほぼ無限です。次の UI デザインプロジェクトのインスピレーションを得るために、Open Props のドキュメントをチェックしてみてください。

©コハム