質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

VScodeの拡張機能「csspeek」が効きません。

fuhixx
fuhixx

総合スコア22

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0リアクション

0クリップ

2184閲覧

投稿2020/07/28 08:58

編集2020/07/30 03:13

VScodeのcsspeekが効きません。
(※現在最新のVScodeで試しています)
「scssファイル」は参照できないのでしょうか?
「cssファイル」のみ対応なのかどうか、調べてみてもよくわかりませんでした。

また、ホバーしても
「読み込み中」と出た後、何も起こりませんでした。

使っている方がいましたらよろしければお教えいただけませんか?
どうかよろしくお願いいたします。

追記:
ルートにあるlocal historyのフォルダをゴミ箱に入れて、無効化し、再度csspeekを試しました。
しかし、css Peekでは「ファイルの参照範囲」は設定できないようです。
「違うフォルダにある同じ名前のクラス名」が参照されてしまいました。(過去に作った別のlocalhistoryが参照されてしまった)
イメージ説明

追記2:
すみません、**/.history/**を追加してもだめでした。。
追加した設定です↓
イメージ説明
追加した後の写真です↓
イメージ説明

追記3:
すみません、
クラス指定が一つしかない場合は、ホバー時のプレビューが表示されず、
「直接cssファイルへジャンプ」してしまいます。。
これは仕様なのでしょうか。。
イメージ説明

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

Daregada

2020/07/29 03:34

HTMLファイルの要素名やクラス名などをクリックしてからF12キーを押すと、何か表示されますか?
fuhixx

2020/07/29 04:41

回答ありがとうございます。 F12キーを押したところ、左上に「青いバー」みたいなものが表示されました。 しかし、cssの参照画面は出てこないようです。。 と思っていたら、30秒くらい待っていたら、やっと表示されました!! ファイルが多すぎるせいでしょうか。。? ファイルが多すぎるせいでした! 「Local history」プラグインが原因でした! 「履歴のファイル」も参照してしまっていたために、 なかなか表示されなかったようです。。。 何か回避策はご存知ないでしょうか・・? もしご存知でしたらお願いいたします。
fuhixx

2020/07/29 04:58

「ファイルの参照範囲」を決めることができれば、 Local historyと被らないと思いました。 しかし、css Peekでは「ファイルの参照範囲」は設定できないようです。。 不可能そうです。。
Daregada

2020/07/29 15:56 編集

local historyのほうで、履歴を保存するフォルダーを変えるとかできそうですが。
fuhixx

2020/07/29 22:15

ルートにあるlocal historyのフォルダをゴミ箱に入れて、無効化し、再度csspeekを試しました。 しかし、css Peekでは「ファイルの参照範囲」は設定できないようです。 「違うフォルダにある同じ名前のクラス名」が参照されてしまいました。(過去に作った別のlocalhistoryが参照されてしまった)
Daregada

2020/07/29 23:31

「CSS Peek: Peek To Exclude」にlocal historyのフォルダーを登録すればいいのでは。 「**/.history/**」を追加するとどうですかね。
fuhixx

2020/07/30 02:36

すみません、**/.history/**を追加してもだめでした。。
Daregada

2020/07/30 02:39

何がどうダメだったのですか。たとえば、「.historyフォルダーの内容が相変わらずCSS Peekの対象になってしまう」とか、「.historyフォルダーの内容はリストから除外されたが、まだ動作が遅い」とか。それによって対策も変わるでしょうに。
Daregada

2020/07/30 02:41

ああ、画像で出ていましたね。設定変更後に、VSCodeを再起動してみましたか?
fuhixx

2020/07/30 02:42

すみません。写真として追記させていただきました。「.historyフォルダーの内容が相変わらずCSS Peekの対象になってしまう」状態にあります。。
fuhixx

2020/07/30 02:58

申し訳ありません。再起動で解決しました! 大変ありがとうございましたm(_ _)m
Daregada

2020/07/30 03:01 編集

あとは、右側のすっきりしたリストから、scssを探して対象にすればお望みの動作になるかと思います。
fuhixx

2020/07/30 03:32 編集

すみません、 「クラス指定が一つしかない場合」は、ホバー時のプレビューが表示されず、 「直接cssファイルへジャンプ」してしまいます。。 これは仕様なのでしょうか。。
fuhixx

2020/07/30 03:44 編集

簡潔にまとめますと、 「scssファイルをホバー時にプレビュー表示」できません。。 「Peek From Languages」の設定で「scss」「sass」と追記しましたが、やはり関係ないみたいです。。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。