UI/UX - CSS でスタイル定義

CSS とは

Web ページの見た目を装飾するのが CSS (Cascading Style Sheets) です。HTML でページの骨格を作り、それに対して CSS で色、フォント、レイアウトなどを指定します。

CSS 基本構文

CSS では、HTML 要素にスタイルを適用するためのルールを記述します。

セレクタ {
  プロパティ: 値;
  プロパティ: 値;
}

用語	説明	例
セレクタ	どの HTML 要素にスタイルを適用するかを指定します。	(下記「セレクタの種類」参照)
プロパティ	変更したいスタイルの種類	color, font-size, margin
値	プロパティに設定する具体的な値	blue, 16px, 10px 20px

セレクタの種類

セレクタは以下の 3 種類に大別されます。(疑似要素を含めるともう少し増えます。) これらを使い分けることで、スタイル適用範囲に幅と柔軟性を持たせることができます。

種類	例
要素セレクタ	p { color: blue; } (すべての <p> 要素)
class セレクタ	.my-button { background-color: green; } (タグに　class="my-button" 属性を持つ要素)
ID セレクタ	#header { font-size: 24px; } (タグに id="header" 属性を持つ要素)

CSS コード例

テキスト: 色やフォントサイズ

h1 {
  /* 文字色を濃いグレーに */
  color: #333;
  /* フォントサイズを 32 ピクセルに */
  font-size: 32px;
  /* テキストを中央揃えに */
  text-align: center;
}

ボタン: UI 要素のスタイル

.button {
  /* 背景色を青に */
  background-color: #007bff;
  /* 文字色を白に */
  color: white;
  /* 内側の余白 */
  padding: 0.2em 0.4em;
  /* 枠線をなくす */
  border: none;
  /* 角を丸くする */
  border-radius: 0.2rem;
  /* マウスカーソルをポインターに */
  cursor: pointer;
}

レイアウト (Flexbox の基本)

.container {
  /* この要素を Flexbox コンテナにする */
  display: flex;
  /* 子要素の水平方向: 両端に配置 */
  justify-content: space-between;
  /* 子要素の垂直方向: 中央に配置 */
  align-items: center;
}

---

Vue ではスタイルをどこに書くのでしょうか。

• 一つの方法は、すでに見た単一ファイルコンポーネント (SFC) すなわち .vue ファイルの中で <style> タグに記述する方法です。そのコンポーネントに特化した CSS を記述できます。
• 共通のスタイルやユーティリティ class 定義を外部ファイル (.css) に記述することも可能です。希望の場所で読み込んで使用します。

Comments

[Dotallio]

Super clear breakdown, especially how you demo Flexbox and Vue component styles. Do you have a go-to way to keep your CSS organized in bigger Vue apps?

[nabbisen]

Thank you so much ☺️ Flexbox is a robust and useful component for layout.

Well, I don't have a magical way. I often choose one of the two:

1. manually design and organize scss (or stylus) code sets. some of them are like components.
2. use stable css frameworks such as Vuetify (with sometimes customization added to).

[Nathan Tarbert]

Love the way you lay it out, makes me wanna mess around with CSS all over again

[nabbisen]

Happy news 🥳 CSS is also enjoyable to code to me like Vue and TypeScript.