Life未経験者がプログラマーになるために試行錯誤する過程を書きます。2019-09-05TwitterFacebookGoogle+LinkedInPocketプロのコーダーさんはコードの記述がとても早いイメージがあります。かっこいいWebサイトのホーム画面だって2時間あれば作れるとかいう人もいます。やって早く書いているのかなと調べていると、Emmetという記述方法を見つけました。Emmetではhtmlとcssのコーディングを高速化できるそうです。今回はEmmetでのhtmlの書き方に注目して書きたいと思います。Codeなどさまざまなエディターで対応されており、短い文でコードを展開することができます。オンラインツールCodepenなどでもログインして使うことができます。全てのサポート一覧はホームページより確認できます。参考サイト:https://emmet.io/download/EmmetでHTMLを書いてみる使えるツールもわかったので早速書いてみましょう。例1:section#top>h1例1ではhtmlタグsectionに#(ハッシュ)をつけてからID記述しています。その入れ子にするために>(山形かっこ)をつけてからh1タグを書きます。以上で閉じタグも含め自動生成してくれます。※自動生成は上記gif動画でご確認ください。例2:ul>li.test*4例2ではulの入れ子にliを書き.(ドット)をつけてからクラスを記述しています。そのあとに*4とかける4しています。class="test">のタグが4つ<ul>タグ内に自動生成されています。リストを一つずつ書いていた自分にとっては革命的です。href="http://">を展開します。「{}」の中にリンクのテキストを記述できます。here</a>そしてaタグの記述のあとに+で同一階層にdivを作成しています。URLも打ち込みたい気もしますが充分高速でコードが書けそうです。DocumentationのチートシートにEmmetの記述方法が乗っているので詳しくはそちらをご覧ください。Nakamotoよろしければシェアお願いしますTwitterFacebookGoogle+LinkedInPocketMacでダウンロードしたアプリが開けないときの設定方法(画像多め)Next単項マイナス演算子を使って値を負から正にする方法Prev関連記事EmmetでCSSのコーディングのスピードを上げるプロのコーダーさんのようにコーディングを素早くやってみたい。HTMLJavascriptの勉強を始てformを使うようになりました。コメントをキャンセルメールアドレスが公開されることはありません。