はじめに UdemyでHTML・CSSを復習していて 「Emmet」という補完機能を知りました。 当たり前のように使っていたものをありましたが知らないでめちゃくちゃ便利なコマンドもありましたのでまとめていきます。 Emmetとは HTML・CSSのコーディングをする際に、コマンドを入力すると簡単にテンプレートが作成されたり、予測変換のような形で記述してくれたりする機能です。 Visual Studio Codeのエディターにはすでに含まれています。 Emmet公式サイト 下記の公式サイトを見ていただければコマンドが記載されております。 Emmetチートシート HTMLのテンプレートを呼び出す head の中に色々記述しての時間が一瞬でぱっ！って以下の記述を呼び出す事ができます。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html> 記述方法 ! + Tabキーを押す これだけ。 一瞬でHTMLの準備が整いました。 id・classのついたdivタグを作りたい場合 <div id="container"></div> <div class="cls"></div> このような記述も簡単に作成できます。 記述方法 idの場合 # + id名（今回は"container"） + Tabキーを押す classの場合 . + class名（今回は"cls"） + Tabキーを押す spanタグの場合 <span class="cls"></span> 記述方法 span + . + class名 + Tabキーを押す 同じ要素を複数用意したい場合 <div id="container"> <div class="cls"></div> <div class="cls"></div> <div class="cls"></div> <div class="cls"></div> <div class="cls"></div> </div> 今まではmacのショートカットキーでコピー・貼り付けをしてましたがそんな必要ありませんでした。 記述方法 # + id名 + > + . + class名 + *必要な数 #container>.cls*5 終わり 様々な書き方があるのでチートシートを見ながら自分で使えそうなものを選ぶのが良いかと思います！
どうも7noteです。使ってみたはいいものの、summaryタグについてくる黒い矢印の消し方が分からない人へ details・summaryタグを使用した時に「▶」←こんな矢印が表示されて消えない場合の非表示にする方法です。 ↑この黒矢印を消します。 style.css summary { display: block; list-style: none; } /* 一部ブラウザで消えなかった場合は以下も追記 */ summary::-webkit-details-marker { display:none; } 検証ツール(F12)でみてみると分かりますが、「::marker」とかかれたものがあります。こいつが原因です。 これはlist-style-typeの一種なので、よく使われる<li>についてくるリストマーク（・）と同種にあたります。 そのため、<li>のリストマークの点(・)を消す時と同じ方法で、list-style: none;で非表示にすることができます。 まとめ 使用していたreset.cssなどによっては、初期値を無効化していなかったりするので、もし黒矢印が残っていたら、個別にCSSを書いてもいいでしょうし 今後も必要ないという場合であればreset.cssなどのCSSファイルに追記してもいいかもしれませんね。 参考：https://teratail.com/questions/155649 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
