テクノロジー

HTMLのびっくり知識

2022年10月26日マイナビエンジニアブログ編集部

初めに

T.Tです。有料のプログラミング学習ツールを利用して勉強している中でこれを知っていればつよつよエンジニアに一歩近づけるといった知識をいくつか習得したのでいくつか共有しようと思い、作成しました。

実行環境

VSCode
[学生時代読み方をバーサスだと思っていました。プログラミングでみんなが悪戦苦闘しながらバトルし続けるツールだから（笑）]
※基本的なコーディングソフトではすべて対応していると思います。

HTML裏技5選！

①ひな形作成

操作方法：！(エクスクラメーション)＋Enter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

操作はたったこれだけです。これまで大学の授業とかでHTMLを作成するた度に"<!DOCTYPE html>"と最初から表記していました。これは初知りでした。

②タグの高速作成

操作方法：使用するタグのスペル＋Enter(ex. link + Enterの場合)

<link rel="stylesheet" href="">

③タグの高速作成(応用)

操作方法：div.○○＋Enter

<div class="oo"></div>

「.」(ドット)は「その中の」の意味のとしての場所やクラスの意味をあらわすことが多いですね

操作方法：ul>li*2＋Enter

    <ul>
        <li></li>
        <li></li>
    </ul>

「>」(大なり)はテーブル系の相性が良く、作成したいリストの数を入力すると作成してくれるのでこれも効率化できますね！

④文章の自動生成

操作方法：lorem＋Enter

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque officia laboriosam nulla repudiandae amet quae in fugit velit, debitis dicta voluptate consequuntur veniam fugiat quaerat obcaecati sit. Nam, sequi culpa!

プリント文など長文の文章を仮置きして、実行でのサイト表示などを確認したいときに便利です。

⑤改行せずに画面内に表示したい！！！

④のように長文を書いたはいいけど文に間違いがないか画面内に表示して確認したい。そんな時が下記の操作です。

操作方法：Alt＋z

// HTML
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque officia laboriosam nulla repudiandae amet quae 
in fugit velit, debitis dicta voluptate consequuntur veniam fugiat quaerat obcaecati sit. Nam, sequi culpa!

改行したらタグが外れて変になる言語もあるので便利ですね！

おまけ：コピーライトで使用するタグ

<small></small>

サイトのコピーライトの記載で慣習的に割り当てられるそうです。

終わりに

いかがだったでしょうか？たかがHTML、されどHTMLということでHTMLもコーディングを効率化できる方法はまだまだたくさんあるみたいです。ほかのプログラミング言語でも同じような裏技もたくさんあると思うのでどんどん活用していきたいですね！

追記

vscodeで1~4の略式記法が使用できるのは、vscodeがEmmetに対応しているからでのようです。
Emmet公式チートシート一覧

※本記事は2022年11月時点の内容です。