技術とか戦略とか

IT技術者が技術や戦略について書くブログです。

HTMLのclassを複数指定する

小ネタですが、HTMLのclassはスペース区切りで複数指定できます。
cssで細かく部品化している場合に、複数指定すると便利です。
以下、サンプルです。
 
【サンプルコード】
・sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>sample</title>
 <style>
 .add-border {
  border: 3px solid #000;
 }
 .add-color {
  background-color: #ccc;
 }
 </style>
</head>
<body>

<div class="add-border">
 <p>hoge</p>
</div>
<div class="add-color">
 <p>fuga</p>
</div>
<div class="add-border add-color">
 <p>piyo</p>
</div>
 
【表示結果】

f:id:akira2kun:20210530180916j:plain