kledgeb Ubuntuの使い方や日本語化、アプリの使い方を紹介しています。

要素を展開する略記の記述方法

  要素を展開する略記の記述方法です。

要素を展開する基本的な略記

  要素を展開する基本的な略記です。

  1-1.略記の入力

    要素名(タグ名)を入力します。


div

  1-2.略記の展開

    略記を展開すると、以下のように展開されます。


  2-1.略記の入力

    要素の種類によっては、必須もしくはよく利用される属性も展開されます。
    例えば、以下のように要素名(タグ名)を入力します。


img

  2-2.略記の展開

    略記を展開すると、以下のように属性付きで展開されます。


    補足

      HTML5では、Void elementsの開始タグに「/」の入力が許容されます。
      開始タグの「/」自体に意味はありません。

id属性付きで要素を展開する略記

  id属性付きで要素を展開する略記です。

  1.略記の入力

    要素名(タグ名)とid属性の値を入力します。
    フォーマットは以下のようになります。

要素名#id属性の値


img#img_1

  2.略記の展開

    略記を展開すると、以下のようにid属性付きで展開されます。


class属性付きで要素を展開する略記

  class属性付きで要素を展開する略記です。

  1-1.略記の入力

    要素名(タグ名)とclass属性の値を入力します。
    フォーマットは以下のようになります。

要素名.class属性の値.class属性の値・・・


img.clsimg

  1-2.略記の展開

    略記を展開すると、以下のようにclass属性付きで展開されます。


  2-1.略記の入力(複数の値)

    複数のclass属性の値を指定することもできます。


img.clsimg1.clsimg2

  2-2.略記の展開(複数の値)

    略記を展開すると、以下のようにclass属性に複数の値が展開されます。


id属性とclass属性付きで要素を展開する略記

  id属性とclass属性付きで要素を展開する略記です。
  上記で紹介した方法の組み合わせです。

  1.略記の入力

    要素名(タグ名)とid属性とclass属性の値を入力します。
    フォーマットは以下のようになります。

要素名#id属性の値.class属性の値.class属性の値・・・


img#img1.clsimg1.clsimg2

  2.略記の展開

    略記を展開すると、以下のように展開されます。



関連コンテンツ
同一カテゴリーの記事
コメント
オプション