Vue3の前にCSSの基本を整理してみる

前回はHTMLで画面の骨組みを作るためのタグを整理しました。今回は、そのHTMLを見やすくするCSSについて、自分がよく見かけそうな書き方やプロパティをまとめます。

画像解析結果を一覧で見せる画面を作るなら、データを表示するだけではなく、余白・文字サイズ・枠線・並び方を整える必要がありそうです。Vueの.vueファイルでは<style>へCSSを書けるため、HTMLと合わせて少しずつ読めるようになりたいです。(Vue.js公式ドキュメント：単一ファイルコンポーネント) vueframework

まだ途中段階なので、勘違いなどあれば教えていただけるとうれしいです。

今日やったこと

CSSの基本構文と、見た目を整えるためによく使いそうなプロパティを確認しました。

CSSは、HTML要素の文字色・文字サイズ・余白・枠線・配置などを指定するものだと今は理解しています。HTMLが「何を表示するか」を書くものなら、CSSは「どう見せるか」を決めるもの、という分け方で考えています。

	> 「HTMLだけでも内容は出せるけれど、CSSがあると情報のまとまりが見つけやすくなりそう。」

CSSは、基本的にセレクタ { プロパティ: 値; }の形で書きます。

/* p はセレクタ。
   すべての p 要素を選び、文字色を変更する */
p {
  color: #1f2937;
}

この例では、pが「どのHTML要素を変えるか」、colorが「何を変えるか」、#1f2937が「どの値にするか」を表しています。CSSでは、プロパティと値の組を宣言と呼び、複数の宣言を{}の中へ書きます。(MDN：CSS構文入門) developer.mozilla

QiitaではCSSを自由に適用したレンダリング結果を記事内へ置くことは難しそうなので、今回はコードと「画面で何が変わるか」を文章で残します。

よく使うCSS構文

CSSを書く前に、HTML側へclass属性を付けます。CSSでは、class名の先頭に.を付けて対象を選びます。

<!-- class は、CSSで見た目を指定するための目印として付ける -->
<p class="status-text">判定：確認が必要</p>

/* .status-text は class="status-text" を持つ要素を選ぶ */
.status-text {
  /* 文字色を赤系にして、注意が必要な状態を見つけやすくする */
  color: #b91c1c;

  /* 重要な判定を少し強調する */
  font-weight: bold;
}

この例では、画面上の「判定：確認が必要」という文字が赤系かつ太字で表示されます。解析結果の中で、確認が必要な項目だけを目立たせたいときに使えそうです。

classを使うと、同じ見た目を複数の要素に付けられます。

<!-- 同じ class を複数の解析結果へ付けられる -->
<p class="status-text">画像001：確認が必要</p>
<p class="status-text">画像003：確認が必要</p>

/* 同じ class を持つ2つの文章へ、同じ見た目が適用される */
.status-text {
  color: #b91c1c;
  font-weight: bold;
}

CSSはタグ名でも指定できますが、すべてのpへ同じ見た目が当たってしまいます。特定の役割を持つ文章だけ変えたい場合は、classを付けて選ぶほうが分かりやすそうです。

よく使うプロパティ

画像解析結果の一覧や、検索フォームの見た目を考えたときに使いそうなプロパティを整理しました。

プロパティ	今の理解	利用イメージ
color	文字色を変える	警告や判定を色分けする
background-color	背景色を変える	カード、注意欄、ボタンの背景
font-size	文字サイズを変える	見出しを大きく、補足を小さくする
font-weight	文字の太さを変える	件数や重要な判定を強調する
line-height	行の高さを変える	長い説明文を読みやすくする
text-align	文字の横方向の位置を決める	ページタイトルを中央へ寄せる
width	横幅を指定する	カードの横幅をそろえる
max-width	横幅の最大値を指定する	画像や内容が広がりすぎないようにする
height	高さを指定する	画像の表示領域をそろえる
margin	要素の外側の余白を取る	カード同士を離す
padding	要素の内側の余白を取る	枠線と文章を離す
border	枠線を付ける	カードや入力欄の境界を見せる
border-radius	角を丸くする	カード、ボタン、入力欄
display	要素の並び方を決める	カードを横並びにする
gap	並べた要素の間隔を取る	一覧カードの間を均等に空ける
cursor	マウスカーソルの形を変える	押せるボタンだと伝える

最初はプロパティをすべて覚えるよりも、「文字」「余白」「枠線」「並び方」の4つを少しずつ使ってみるほうがよさそうです。

つまずいたところ

CSSには似たような指定があり、最初はどこが変わるのか想像しにくいと感じました。

marginとpaddingの違い

marginとpaddingは、どちらも余白を作るため、最初は同じものに見えました。

今の理解では、marginは要素の外側の余白、paddingは要素の内側の余白です。カード同士を離したいならmargin、枠線とカード内の文章を離したいならpaddingが使えそうです。

	> 「どちらも余白だけれど、外側か内側かで見ると少し整理できそう。」

<!-- CSSの対象になるよう、カードへ class を付ける -->
<article class="result-card">
  <h2>画像001</h2>
  <p>検出件数：3件</p>
  <p>判定：確認が必要</p>
</article>

.result-card {
  /* 外側の余白。次のカードとの間隔を作る */
  margin-bottom: 16px;

  /* 内側の余白。枠線と中の文字を離す */
  padding: 16px;

  /* カードの境界を見せる */
  border: 1px solid #d1d5db;
}

このCSSを付けると、カードの外側には次の要素とのすき間ができ、カードの内側では枠線と文章が離れます。数値を8px、24pxのように変えながら、どこが広がるかをブラウザで確認したいです。

widthとmax-widthの違い

widthとmax-widthも似て見えました。

widthは横幅を指定するもの、max-widthは横幅の上限を決めるものだと今は理解しています。固定幅のカードにはwidth、画面幅に応じて狭くなれるようにしたい場合にはmax-widthが使えそうです。

.result-card {
  /* カードの基本の横幅 */
  width: 320px;

  /* 親要素や画面が狭い場合に、横幅がはみ出しにくくする上限 */
  max-width: 100%;
}

画像解析の結果カードをスマートフォンでも見せることを考えると、固定のwidthだけでなく、max-widthも一緒に確認したいです。

display: flexとgap

複数の解析結果を並べたい場合に、display: flexが使われることが多そうです。

display: flexを親要素へ付けると、その子要素を並べやすくなります。gapは並べた子要素の間隔をそろえるためのプロパティです。

<!-- 複数の解析結果を並べる親要素 -->
<section class="result-list">
  <article class="result-card">
    <h2>画像001</h2>
    <p>確認が必要</p>
  </article>

  <article class="result-card">
    <h2>画像002</h2>
    <p>問題なし</p>
  </article>
</section>

.result-list {
  /* 子要素のカードを横方向へ並べる */
  display: flex;

  /* 画面幅が足りない場合は、次の行へ折り返す */
  flex-wrap: wrap;

  /* カード同士の間隔を均等に空ける */
  gap: 16px;
}

.result-card {
  /* カードの基本幅と内側の余白 */
  width: 240px;
  padding: 16px;
  border: 1px solid #d1d5db;
}

このコードでは、解析結果カードが横に並び、画面幅が狭い場合は次の行へ回る形を目指しています。実際の画面幅でどの位置から折り返されるかは、ローカルで確認したいです。

	> 「カードを1枚作るだけではなく、複数並んだときの見え方も大事になりそう。」

classとidの違い

HTMLのclassとidも、どちらも要素へ名前を付けるので少し迷いました。

今の理解では、classは複数の要素に同じ名前を付けられ、共通のCSSを当てるために使いやすいものです。idはページ内で重複しない名前として扱い、1つだけの要素を特定したい場合に使います。

<!-- class は複数の要素に繰り返し付けられる -->
<p class="status-text">画像001：確認が必要</p>
<p class="status-text">画像003：確認が必要</p>

<!-- id はページ内で1つだけの要素に付ける -->
<h1 id="page-title">画像解析結果</h1>

/* . は class を選ぶ書き方。複数の要素へ適用できる */
.status-text {
  color: #b91c1c;
}

/* # は id を選ぶ書き方。ページ内の1要素を選ぶ */
#page-title {
  font-size: 28px;
}

繰り返し表示される解析結果カードにはclassを使う場面が多そうです。idはフォームのlabelとinputを結び付けるときにも出てきたので、必要になったときに使い方を確認したいです。

今の理解（メモ）

まだふわっとしていますが、CSSはHTMLで作った骨組みを、利用者が読みやすく操作しやすい形へ整えるものに見えています。

• CSSはセレクタ { プロパティ: 値; }の形で書く
• セレクタは「どのHTML要素を変えるか」、プロパティは「何を変えるか」、値は「どのように変えるか」を表す
• .class名は、HTMLのclass="class名"を持つ要素を選ぶ書き方
• marginは外側の余白、paddingは内側の余白
• borderを付けるとカードや入力欄の境界を見せやすい
• display: flexとgapは、複数の要素を整列して並べるときに使えそう
• CSSは、Vueの.vueファイルなら<style>の中へ書ける
• Vueでは、状態に応じてclassやstyleを動的に切り替える書き方もある。v-bindはclassとstyleに対してオブジェクトや配列も扱えるため、今後は判定結果に応じて色を変える場面で試してみたい。(Vue.js公式ドキュメント：クラスとスタイルのバインディング) vueframework

次にやりたいこと

HTMLで作った解析結果の構造へCSSを付けて、小さな一覧画面を作りたいです。

• 1件の解析結果へpadding、border、marginを付ける。余白が外側と内側のどちらに増えるかを確認したい
• colorとfont-weightで「確認が必要」の文字を目立たせる。状態が一目で分かる表示を試したい
• display: flex、flex-wrap、gapで複数のカードを並べる。画像解析結果の一覧に近い画面を作りたい
• widthとmax-widthを変え、画面幅が狭い場合のカード表示を確認したい
• Vueでclassを動的に切り替える。Good・Badなどの評価に応じて、文字色や背景色を変える用途につながるか試したい

今日の整理

今回出てきたCSSの書き方と、よく使いそうなプロパティを短く整理しました。

分類	書き方・プロパティ	役割	利用イメージ
基本構文	セレクタ { プロパティ: 値; }	対象の見た目を変更する	.result-card { padding: 16px; }
class指定	.class名	同じclassを持つ要素を選ぶ	複数の結果カードへ共通の見た目を付ける
id指定	#id名	1つのidを持つ要素を選ぶ	ページタイトルを指定する
文字	color	文字色を変える	警告や判定を色分けする
文字	font-size、font-weight	文字の大きさ・太さを変える	件数や重要な判定を強調する
余白	margin	要素の外側に余白を作る	カード同士を離す
余白	padding	要素の内側に余白を作る	枠線と文章を離す
境界	border、border-radius	枠線や角の丸みを付ける	カードや入力欄を整える
サイズ	width、max-width	横幅や最大横幅を決める	カードや画像の幅を調整する
配置	display: flex	子要素を並べやすくする	解析結果カードを横に並べる
配置	gap	並べた要素の間隔を空ける	一覧カードのすき間をそろえる
Vue	:class、:style	状態に応じて見た目を切り替える	判定に応じた色や表示の変更

おわりに

今回はCSSについて、HTMLで作った画面の骨組みをどう整えるかという視点で見直してみました。まだプロパティを見てすぐ使い分けられる段階ではありませんが、まずは文字・余白・枠線・並び方の4つを意識すれば、小さな画面でも見やすさが変わりそうです。

画像解析結果をブラウザで見やすく扱うには、データを正しく出すだけでなく、複数の結果をどう並べるか、確認が必要な項目をどう見つけやすくするかも大事になりそうです。HTMLで一覧の形を作り、CSSで見た目を整え、最後にVueでデータや操作を加える流れを試してみたいです。

学習中の内容なので、勘違いや理解不足もあると思います。もし気になる点があれば教えてもらえるとうれしいです。

　注意事項
　本ブログに掲載している内容は、私個人の見解であり、
　所属する組織の立場や戦略、意見を代表するものではありません。
　あくまでエンジニアとしての経験や考えを発信していますのでご了承ください。