Help us understand the problem. What is going on with this article?

Blocsのタブ付きコンテンツでアクティブなタブのスタイルを変更する

注:Mac用のWebデザインソフト「Blocs」の記事を書いていますが、現段階ではメモ代わりなので投稿内容はランダムです。(そのうち整理したい)

Blocsのパーツで「Tabbed Content(タブ付きコンテンツ)」があります。一つの画面で複数の画面(?)の内容を切り替えて表示させたいときによく使われますね。
さて、このタブ付きコンテンツですが、現在内容を表示しているタブのスタイルはクラスマネージャーで以下のクラスを指定します。

タブ用のクラス

  • .nav-tabs .nav-item.show .nav-link 通常のタブのスタイル(多分)
  • .nav-tabs .nav-link.active アクティブなタブのスタイル

クラスマネジャーの開き方

画面右下のアイコンをクリック
20190920.png

クラスマネージャーのウィンドウが開くので右上の + をクリック
20190920_".png

Class Nameに上記のクラスを入力し、Add Classをクリックします。
201909203.png

なお注意点として入力したクラスにスペースが含まれているとAdd Classをクリックした際、ダイアログが表示されますが、今回の場合は必ず「No, leave spaces intact」をクリックします。
Yes, replace spaces with dashes をクリックするとスペースがダッシュ(ハイフン)に置き換えられます。

参考
Tabs Background Color

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away