CSS

全5419件中1~20件表示
  • CSS skew関数を用いて扇形を描けますか?

    CSSのskew関数を用いると、四角形を平行四辺形のように変形させることができます。 これをヒントに、次のようにすると 中心角が150°までの扇形を描けます。 では、どうしたら skew関数を用いてそれ以上の中心角の扇形を描けますか? [サンプルコード] <style> #en { position: relative; width: 100px; height: 100px; background-color: orange; border-radius: 50%; /* overflow: hidden; */ } #fan { position: absolute; left: 50px; top: -50px; width: 100px; height: 100px; background-color: green; opacity: 0.5; transform-origin: left bottom; transform: skewY(60deg); } </style> <div id="en"> <div id="fan"></div> </div>

  • CSS 背景画像の指定( )内に""を入れる?

    CSSの背景画像のソースでどちらが正しいのか教えてください。 【Aパターン】 body{ background-image:url(images/***.jpg); } 【Bパターン】 body{ background-image:url("images/***.jpg"); } の( )内に" "(ダブルクォーテーション)を付ける・付けないで関係なく、結果としてはどちらも背景画像が表示されます。  背景画像の指定するサイトを見ても、付いてたり・付いてなかったり…書籍でも特に具体的に""←について詳しく載ってないのですが、実際どちらを使う方がが正しいですか?

    • ベストアンサー
    • keybobo
    • CSS
    • 回答数1
  • 記事にある透明のボックスと同じ様にしたいです

    amebablogハムスター恋愛andアタシの日記のcss3D回転キューブアメーバピック広告透明キューブボックスにテキストを透明に配置して、シャドウに広告の画像を配置して左下から右にカーブしながら大きくなりながら上がってきてスマホ画面の左にボックスの角でポンッと軽くつつかせてクリックするとボックスが止まってバラバラになって跳ね返る様に右にカーブしながら小さくなりながら左下にボックスの角で着地しています 難易度はどれぐらいですか? なかなか出来ません 作り方を教えて下さい https://ameblo.jp/asuka1395000

  • ul li 横並び 複数行

    現在、目次リストを以下のように設定しています 【html】 <div class="open-menu-inside"> <ol class="contents2"> <li><a href="#1"><strong>【ア】</strong></a></li> <li><a href="#2"><strong>【イ】</strong></a></li> <li><a href="#3"><strong>【ウ】</strong></a></li> <li><a href="#4"><strong>【エ】</strong></a></li> <li><a href="#5"><strong>【オ】</strong></a></li> </ol> </div> 【css】 ol.contents, ol.contents ol{ counter-reset: list; list-style: none; padding: 0; max-width: 100%; font: 14px/1.6 'arial narrow', sans-serif; } ol.contents ol{ margin: 0 0 0 35px; max-width: 100%; } .contents a{ position: relative; display: block; text-decoration: none; padding: 3px 3px 3px 8px; margin: 8px 0 8px 30px; background: #f0ffff;/* 背景色 */ color: #000000; font-weight: bold; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .contents a:hover{ background: #ccffff;/* マウスを乗せた時の背景色 */ } .contents a:before{ content: counter(list); counter-increment: list; position: absolute; left: -35px; top: 50%; height: 28px; width: 28px; margin-top: -1em; background: #ff8c04;; line-height: 28px; text-align: center; font-weight: bold; color: #fff; } .contents a:after{ content: ''; position: absolute; left: -28px; top: 50%; margin-top: -6px; border: 6px solid transparent; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .contents a:hover:after{ left: -6px; border-left-color: #ff8c04;; } これを一部のページでできれば5段で複数行表示したいのですが ネットで検索して flex-wrap: wrap; を入れれば良いことはわかったのですが どのように設定すればいいのかわかりません また、前述のcssはそのまま使いたいので その場合はol.contents,の部分をすべて ol.contents2, のように書き換えれば良いのでしょうか htmi css 超初心者です わかる方がおられたらお教えいただけないでしょうか よろしくお願いします

  • CSSで正六角形の作図その3 (10)

    [Q] CSSで正六角形の作図ができますか? CSSのスキルアップのための問題を作りました。 [課題] CSSで、正六角形を作ります。 前回の「作図 (9)」では3つのDIV要素それぞれに CSSで2個ずつ正三角形を作成して正六角形を完成させました。 今回は、「rokkaku要素」の子要素2つで正六角形を実現させよう、というものです。 (添付図参照) [仕様] 1.CSSだけで整形・動作のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.チェックボックスを1つ用意する 5.「回転させる」にチェックインすると回転アニメーションする 6.チェックを外すと回転アニメーションが止まって原状復帰する [参考] ・DIV要素が1つあれば、疑似要素で2つとそれ自体で、  合計3つの正三角形が作れます。 ・正三角形の頂点から垂線を引いてできた直角三角形の3辺の比は  1:2:√3 になります。 ・Canvasが使えなくても、borderまたは polygonで正三角形が作れます。 CSSだけでこのような作図とアニメーションができますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 <style> /* 6つの色 red, blue, orange, green, violet,chocolate */ .container { position: relative; width: 120px; height: 120px; border: solid 1px red; } /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="container"> <div class="rokkaku"> <div></div> <div></div> </div> </div>

  • CSSで正六角形の作図その2 (9)

    [Q] CSSで正六角形の作図ができますか? CSSのスキルアップのための問題を作りました。 [課題] CSSで、正六角形を作ります。 前回の「作図 (8)」では6つのDIV要素それぞれに正三角形のCSSを適用しました。 今回は、DIV要素3つで同等の表示を実現させよう、というものです。 (添付図参照) [仕様] 1.CSSだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない CSSだけでこのような作図とアニメーションができますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 <style> /* 6つの色 red, blue, orange, green, violet,chocolate */ .container { position: relative; width: 120px; height: 120px; border: solid 1px red; } /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="container"> <div class="rokkaku"> <div></div> <div></div> <div></div> </div> </div>

  • CSSで正六角形の作図 (8)

    [Q] CSSで正六角形の作図ができますか? CSSのスキルアップのための問題を作りました。 [課題] CSSで、正六角形を作ります。 正六角形を正三角形の集合体とみれば、CSSで正三角形の基本形を1つ作り、 それを利用して、表示位置・向き・配色を決めれば正六角形が作れます。 (添付図参照) [参考] 下辺が水平で頂点が上にある正三角形において、 頂点からの垂線で2分された直角三角形の3辺の比は、 1:2:√3 となる。 したがって、一辺が 100(px)の三角形を作る時、 高さ=100/2 ⅹ √3= 50√3 ≒ 86.60(px) [仕様] 1.CSSだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない CSSだけでこのような作図ができますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 <style> /* 6つの色 */ red, blue, orange, green, violet,chocolate /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="container"> <div class="rokkaku"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div>

  • CSSで作図とアニメーション (7)

    [Q] CSSで作図とアニメーションができますか? CSSのスキルアップのための問題を作りました。 [課題] チェックボックスを1つ用意しておきます。 CSSで、下辺が水平で頂点が上にある正三角形を作ります。 チェックインしたら、右回転して茶色の水平線上で停止します。 (添付図参照) [動作] 1.チェックインすると、アニメーションで正三角形が右回転します。  ・回転軸は、右下の頂点です。(点C)  ・右回転は、茶色の水平線上で停止します。 2.チェックアウトすると、アニメーションで元の状態に戻ります。 3.チェックボックスのラベルについて  ・アニメーション開始時は「正三角形を転がす」  ・アニメーション終了時には「元に戻る」 [仕様] 1.CSSだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない CSSだけでこのような作図と動作ができますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> .container { position: relative; width: 220px; height: 160px; background-color: skyblue; border-bottom: 2px solid brown; } /* 添付図のように整形するスタイル設定 */ </style> [HTML] <input id="task" type="checkbox"> <label for="task">正三角形を転がす</label> <div class="container"> <div class="sankaku"></div> </div>

  • CSSで作図とアニメーション (6)

    [Q] CSSで作図とアニメーションができますか? CSSのスキルアップのための問題を作りました。 [課題] CSSで、下辺が水平で頂点が上にある正三角形を作ります。 一辺が100pxで緑色の正三角形、頂点に「A」と表示させておきます。 その外接円を灰色で、その中心を赤色で描きます。 (添付図参照) [動作] 1.円にホバーした時、  ・正三角形が青色に変わる  ・3秒後、右回りにアニメーションで一回転する 2.マウスアウトすると、アニメーションで元の状態に戻る [仕様] 1.CSSだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.チェックボックスを使わずに実現させる CSSだけでこのような作図と動作ができますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="sankaku"></div>

  • htmlで画面外に伸びた際も親の横幅が広がる方法

    htmlで画面外に伸びた際も親の横幅が広がって欲しいのですが やり方わかりますでしょうか? 添付画像のように、長い文字やwidthで子供の要素が画面を超え、横スクロールさせると親の背景が画面幅で切れてしまいます。 そうではなく、親も子供の横幅に合わせて広がって欲しいと思います。 こちら方法はありませんか?(親の要素にmin-widthをつけるなどはNGでお願いいたします)

  • CSSで作図とアニメーションができますか?

    [Q] CSSで作図とアニメーションができますか? CSSのスキルアップのための問題を作りました。 CSSでツートーンの六角形を作ります。 1.六角形にマウスダウンすると、右回りに一回転します。 2.マウスアップすると、六角形が元の位置に戻ります。 3.アニメーションで回転します。 [仕様] 1.CSSだけで整形のこと (JS不使用) 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.チェックボックスを使わずに実現させる 5.配色はつぎのとおり gray, black CSSだけでこのような作図できますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="rokkaku"></div>

  • CSS 添付したような作図ができますか?

    [Q] CSSで添付したような作図ができますか? CSSのスキルアップのための問題を作りました。 一辺が200pxの青い正方形があります。 1.青い正方形に内接する黄色い円を描きます。 2.黄色い円に内接する赤い正三角形を描きます。 3.赤い正三角形に内接する水色の円を描きます。 [仕様] 1.CSSだけで整形のこと 2.画像やリンクによる表示は無効 3.タグは変更、追加、削除ができない 4.配色はつぎのとおり blue, yellow, red, skyblue CSSだけでこのような作図できますか? CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="square"></div>

  • CSSだけで添付図のように表示できますか?

    CSSのスキルアップのための問題を作りました。 ・フランス国旗にホバーするとベルギー国旗に変わります。 ・ベルギー国旗からマウスアウトするとフランス国旗に戻ります。 ・国旗の下にある国名のためのタグは不要です。 (JS無用)    [仕様]   1.2とおりの国旗を切り替え表示します。   2.CSSだけで整形のこと   3.ベンダープレフィックスも追記のこと   4.タグは変更、追加、削除ができない   5.画像やリンクによる表示は無効   6.配色はつぎのとおり    ・フランス:青、白、赤    ・ベルギー:黒、黄、赤 CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> body { background-color: skyblue; } .flag { width: 150px; height: 75px; border: solid 1px gray; } /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="flag"></div>

    • ベストアンサー
    • retorofan
    • CSS
    • 回答数2
  • CSSだけで添付図のように表示できますか?

    [Q] CSSだけで添付図のように表示できますか? CSSのスキルアップのための問題を作りました。    [仕様]   ・CSSだけで整形のこと   ・タグは変更、追加、削除ができない   ・画像やリンクによる表示は無効   ・配色、配置はピッタリでなくてもよい   ・一辺が200pxの正方形内にあるもの    青い四角形、薄茶色の円、赤系のボール状のもの CSSのスキルアップに励んでいる方の回答をお待ちしております。 [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <div class="shape"></div>

  • CSSだけで添付図のように整形できますか?

    CSSだけで添付図のように整形できますか? CSSのスキルアップのための問題を作りました。    [仕様]   ・商品には 括弧付き番号が振ってある   ・点線の下線が引いてある   ・元値は 青色文字で 薄い桃色の背景色になっている   ・売値は 赤色文字で 黄色の背景色になっている   ・タグは変更、追加、削除ができない   ・CSSだけで整形のこと [CSS] <style> /* 添付図のように整形するスタイル設定 */ </style> [HTML] <ul id="Product_List"> <li>商品A<p><del>345円</del> 234円</p></li> <li>商品B<p><del>2,000円</del> 1,234円</p></li> <li>商品C<p><del>1260円</del> 850円</p></li> <li>商品D<p><del>100円</del> 80円</p></li> <li>商品E<p><del>150円</del> 120円</p></li> <li>商品F<p><del>500円</del> 450円</p></li> </ul> CSSのスキルアップに励んでいる方の回答をお待ちしております。

    • ベストアンサー
    • retorofan
    • CSS
    • 回答数2
  • CSS見出し 文字大きさ

    CSSまったくの素人です。 こちらのサイトからコピペした https://jajaaan.co.jp/css/css-headline/ 上下線グラデーションの見出しの文字の大きさを変更したいのですが 方法がわかりません。 HTML <h3>CSS見出しデザイン</h3> CSS h3 { position: relative; padding: 1.5rem 2rem; color: #000000; text-shadow: 0px 15px 10px #ff8c04; -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, .1); box-shadow: 0 2px 14px rgba(0, 0, 0, .1); } h3:before, h3:after { position: absolute; left: 0; width: 100%; height: 4px; content: ''; background-image: -webkit-linear-gradient(315deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); background-image: linear-gradient(135deg, #704308 0%, #ffce08 40%, #e1ce08 60%, #704308 100%); } h3:before { top: 0; } h3:after { bottom: 0; } font-size:をどこへ記載すれば良いのでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • musicchan
    • CSS
    • 回答数2
  • フレーム中プルダウンJumpボタン別ページの箇所に

    お世話になります 5年前まで有効だった作用が放置したためか、このたび作用しなくなり、調べてみたのですが、Javaに頼らずにはいられないのか、 わからず困っております 左側サブhidariと右側メインmigiと名前をつけたフレームを未だに 設定しておりますが、ともあれ、CSS(のみではありませんでした)で動いていたので、、、 右migiページに作ったプルダウン一覧(リンクなし)に 新たにリンクボタン(Jump!と反映はできています)を表示し、別ページの「特定箇所」にリンクし、 migiページに反映させたいのです ジャンプボタンを出現させ、リンクも飛ばしも特定箇所ジャンプも 可能だったのに、なぜなのでしょう 元ページ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <~~~~ <select name="プルダウンメニュー" size="1"> <option style="font-family:MS UI Gothic;background-color:#d3d3d3;color:#8b668b"align="center">      * ~~~~~~~~~~~~</option> <option style="background-color:#000044;color:#f0fff0"> ~~~~~~~~~~~~~~ </option> <option style="background-color:#000044;color:#f0fff0"> ~~~~~~~~~~~~~~ </option> <option value="#"> <option value="000_new2018diary.html#diary_0043">  ~~~~~~~~~~~~~~ </option> ジャンプ先ページ <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01Frameset//EN"> <HTML> <HTML lang="ja"> <HEAD> <TITLE>diary_title~2018</TITLE> <meta name="robots" content="index"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=euc-jp"> <META http-equiv="Content-style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <META NAME="auther" content=""> <META NAME="copyright" content="c2018 ."> <Style Type="text/css"> <!-- /*style*/ body {line-height:130%; font-family:MS UI Gothic; /*background-image:url(n_kabe.png);*/ background-image:url(film.jpg); background-repeat:no-repeat; background-position:right top; background-attachment:fixed; scrollbar-face-color:#000033; background-color:#000022; } A{text-decoration:none; cursor:w-resize; } A:HOVER{ text-decoration:none; border-width:1px 1px 1px 1px; border-style:solid solid solid solid; border-color:#7868ee; } --> </Style> </HEAD> <BODY onContextmenu="return false" text="#b0e0e6" Link="#f5fffa" ALink="#EE82EE" VLink="#d8bfd8" basefontsize="2"> <table width="700"border="0"cellpadding="0"cellspacing="0"align="center"valign="top"> <tbody> <br> <br> <div align="left"><small><font color="#6090ef"> <address> </address> <font color="#ffffff"> ~~~   <br> ~~~~~~</small></font></div><br> <br><br> <tr<td>width="500"height="3"border="0"cellpadding="0"cellspacing="0"align="left"bgcolor="#191970"valign="top"> <font color="#c0c0c0"> ~~~~~~~~~~~~ </td></tr> <div align="left"> <br> <a name="4top"><br><br> <a href="#diary_0043"> ~~ </a><br> <a href="#diary_0042"> ~~ </a><br> <a href="#diary_0041"> ~~ </a><br> </div><br><br> </font> </tbody></table> <span align="left">    <img src="ico_bulb.gif"border="0">  ~~~~~ <a name="diary_0043"></a> </span> <table width="85%"border="1"cellpadding="5"cellspacing="3"align="center"fontcolor="#ffffff"> <tr><td class=a> <b>   ~~~~~~~~                               </b></td> <td style="background:url(~~.jpg) no-repeat center top" rowspan="3"></td> </tr> <tr><td> ~~~~~~~ <td></tr> <tr><td> <pre> ~~~~~~~~ </pre> </td></tr> <tr> <td class=a> <pre> ~~~~~~~ </pre> </td> <td><div align="center"><small>~~~~</small></div></td></tr> <tr><td colspan="2"class=a> <p onclick="document.all.nodiary_0043.style.visibility=document.all.nodiary_0043.style.visibility=='hidden' ? 'visible' : 'hidden' " style="cursor : pointer;"> click on</p> <p id="nodiary_0043" style="visibility:hidden"align="left"> <!--ここに書き込む--> <font color="#c0c0c0"> ~~~~~~~~~  </p> </td></tr> <tbody> </table> <br><br> <a href="#4top">↑リストに戻る</a><br><br> <br><div align="center"> <a href="new_home.html"target="migi"style="cursor:e-resize;"> <img src="ico_bird_r.gif"border="0"title="  ホーム表紙 まで戻ります  ">  HOME  </a></div> <br> </body> </html> 何ゆえ、統一性のないタグだと承知しておりますが、 不能になったタグなどあるか、 何か書き落としがあるか、設定が間違っているのか? 教えてください よろしくお願いいたします

    • ベストアンサー
    • a_flat
    • CSS
    • 回答数1
  • HTML・CSS ボタンの表示

    <div class="item"> <tr> <td><input type="button" value="サンドウィッチ" onclick="get_calc(this)"></td> <td><input type="button" value="おにぎり" onclick="get_calc(this)"></td> <td><input type="button" value="お茶" onclick="get_calc(this)"></td> <td><input type="button" value="お弁当" onclick="get_calc(this)"></td> </tr> </div> ボタンを画面の50%の幅に均一の大きさで表示したです. CSSわかる方,教えてください!お願いします!

    • ベストアンサー
    • ko0405
    • CSS
    • 回答数2
  • css、スタイルシートの読み込み順について

    head内に<link type="text/css……>でスタイルシートを3つ読み込んでいて ①reset.css ②style.css ③content.css の順で上から下に並べてるのですが②が後で読み込まれます。 !importantはどのスタイルシート内にもついてませんし、リンクの指定ミス等もありませんでした、メディアクエリのミスもありません。 一体なにが原因として考えられるでしょうか…お知恵を貸していただけますと嬉しいです。

  • VS codeにおけるユーザースニペットの初期設定

    1.背景 HTML、CSS、Java Script学習のため、VS codeでユーザースニペットを作成しようとし、試しにCSSでテスト登録し、うまくいかず、試行錯誤しています。登録方法はネット記事やYou tubeで解説があるので、それらを参照し、「ファイル」->「ユーザー設定」->「ユーザースニペットの構成」から。Jason形式での登録も留意しました。ところが登録しても反映されません。最初はVS codeが最新でないのが原因と思い、インストールし直しました。VS versionは昨日インストールし直したので最新(1.85.1)です。VScodeの再インストールだけではダメという結論です。 2. settings.jasonの変更 (1) settings.jasonの変更(一回目) webで調べるとVS codeで「setthings.jason」から設定する必要があるとのことです。この「setthings.jason」は変更していなかったので、そのことが原因と思い、変更を試しました。左下の歯車→右上から検索。「settings.jason」にいき、編集可能なのは分かりました。下記は修正前のデフォルト。 { "python.linting.flake8Enabled": true, "editor.formatOnSave": true, "workbench.statusBar.visible": false, "editor.unicodeHighlight.nonBasicASCII": false, "settingsSync.ignoredExtensions": [], "settingsSync.ignoredSettings": [ "workbench.settings.openDefaultSettings" ], "workbench.settings.openDefaultSettings": true } となっていました。どのように記載すれば良いか調べたWEBは下記です。「VSCodeでPythonのユーザースニペット設定」 [ [https://qiita.com/tachiyu/items/27931cda3658e216133c](https://okwave.jp/jump?url=https%3A%2F%2Fqiita.com%2Ftachiyu%2Fitems%2F27931cda3658e216133c) ]( https://okwave.jp/jump?url=https%3A%2F%2Fqiita.com%2Ftachiyu%2Fitems%2F27931cda3658e216133c ) となります。ここでの例は言語はpythonです。これに従うとcssの場合は "[css]": { "editor.suggest.showSnippets": true, "editor.snippetSuggestions": "top" }, となりますが、結果はダメでした。[css]の方は下に赤い波線が出ていました。 (2) settings.jasonの変更(二回目) ChatGPTによると、アドバイスは "editor.snippetSources": の箇所でパスを入力しなければいけないこと。そして、このパスの下にはcssであれば、css.jasonがあることでした。そこで、下記のように入力。しかし、それでも結果はダメでした。 "[css]": { "editor.suggest.showSnippets": true, "editor.snippetSuggestions": "top", "editor.snippetSources": [ "{C:$hoge/hoge/省略}/User/snippets" ] }, (注1)explorerで{C:$hoge/hoge/省略}/User/snippetsの箇所を打ち込むと、その下にcss.jasonが出てくるのは確認済み。 3.質問 ここにどのように打ち込めばユーザースニペットが有効になるかご教示ください。またはこの方法でも根本的な間違いあり、ダメという場合であれば、他の解決策をご教示ください。 4.補足(css.jasonへの登録内容) css.jasonへの入力内容。あくまでユーザースニペットが反応すれば良いので試しです。style.cssにおいてデタラメ要素の下にtestxxと入力してもダメでした。 候補も全く出てきません。 "display inline-flex":{ "prefix": "testxx", "body": [ "display:inline-flex;" ], "description": "display inline-flex" },