# CSSでのクラスやID管理について

**URL:** <https://community.hubspot.com/t/css-id/86332>\
**Category:** Tips, Tricks & Best Practices\
**Tags:** css\
**Created:** [July 28, 2023, 4:38am UTC](https://community.hubspot.com/t/css-id/86332 "2023-07-28T04:38:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jmatsumoto](https://avatars.discourse-cdn.com/v4/letter/j/f05b48/32.png) [@jmatsumoto](https://community.hubspot.com/u/jmatsumoto)\
**Post date:** [July 28, 2023, 4:38am UTC](https://community.hubspot.com/t/css-id/86332/1 "2023-07-28T04:38:40Z")

</div>

HubSpotCMSで既存のテーマをベースにCSSによる装飾でオリジナルのデザインのランディングページを作成しています。

複数の要素やセクションに同一のCSSを適用させたり、複数のセクションをひとまとまりにして同じデザインを適用したりしたいのですが、セクションや要素に任意のクラスやIDを設定することは、自作ではない既存テーマを使っている場合は難しいのでしょうか？

何か方法がありましたらお教えいただければ幸いです。

---

<div class="post-metadata">

**Author:** ![mikemura](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mikemura/32/57417_2.png) [@mikemura](https://community.hubspot.com/u/mikemura)\
**Post date:** [July 28, 2023, 8:33am UTC](https://community.hubspot.com/t/css-id/86332/2 "2023-07-28T08:33:24Z")

</div>

@jmatsumoto さん、ご質問の投稿ありがとうございます。

CSSの追加は可能となっております。下記2パターンにてご提案させていただきます。

1. HubSpotのデザインツールにCSSファイルを作成

- HubSpotアカウントにて、［マーケティング］＞［ファイルとテンプレート］＞［デザインツール］からCSSファイルを作成
- ランディングページの［編集］＞［設定］＞［詳細オプション］＞［ページスタイルシート］に上記で作成したCSSファイルを添付

詳細は[CSSファイルを作成、編集、添付して、サイトのスタイルを設定](https://knowledge.hubspot.com/ja/design-manager/create-edit-and-attach-css-files-to-style-your-site)をご参考ください。

ただ、HubSpotの既存テーマを使用しているため、一部CSSが効かない可能性もあり、その場合は下記方法もご検討いただけますでしょうか。

2. ランディングページに直接CSSを追記

- ランディングページの［編集］＞［設定］＞［詳細オプション］＞［追加のコードスニペット］＞［Headの HTML］に直接CSSを追加

 ![mikemura_1-1690532789128.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/1/61d47308344c8077d8f43dfd96cfcb1c491e9690.png)

少しでも参考になれば幸いです。

@yoshisegawa さん、@assi さん、他にベストプラクティスあれば共有いただければと思います！

---

<div class="post-metadata">

**Author:** ![jmatsumoto](https://avatars.discourse-cdn.com/v4/letter/j/f05b48/32.png) [@jmatsumoto](https://community.hubspot.com/u/jmatsumoto)\
**Post date:** [July 30, 2023, 11:03am UTC](https://community.hubspot.com/t/css-id/86332/3 "2023-07-30T11:03:23Z")

</div>

ご回答ありがとうございます。

ページの方に独自のIDやクラスをつけるのはやはり難しそうですね。

HTMLファイルを編集できるリッチテキストをうまく使うのがいいのかもしれませんね。
