htmlでclassを複数指定する方法とは?サンプルコードで徹底解説!
  • facebookページ
  • twitterページ
  • 2020.02.24

    htmlでclassを複数指定する方法とは?サンプルコードで徹底解説!

    htmlタグにclassを複数指定することが可能ということを、案外知らない方も多いようです。

    本記事では、サンプルコードを交えながら「htmlでclassを複数指定する方法」を初心者でも理解出来るように徹底解説していきたいと思いいます。

    htmlでclassを複数指定する方法とは?


    htmlでclassを複数指定する方法は非常に簡単で「半角スペース」を空けて複数のクラスを記述するだけです。

    HTMLに記述する基本構文を理解しよう

    htmlタグでclass指定を記述する際、「半角スペース」を空けて下記のように記述します。

    サンプルでは「sample1」というクラスと「sample2」というクラスを同じdivタグに対して指定しているのがご確認頂けます。

    CSSでは通常のクラス指定と同じく別々にスタイルを定義するだけ

    CSSでは通常のクラスを指定する方法と記述方法自体は変わりません。

    「.(ピリオド)」を用いてクラスへのデザインとして定義します。

    CSSに記載された「sample1」「sample2」のデザインの両方が、divタグに対して適用されます。

    Javascriptで利用する際は定義されたclassのどちらか1つを指定する

    Javascriptでclassが指定された要素に処理を実施したい場合、定義されたclassのいずれかを指定すれば可能です。

    サンプルの場合には「sample1」と指定したクラス名を「sample2」に変更しても取得可能な要素は同じです。

    htmlでclassを複数指定する方法をサンプルコードで理解しよう!


    では実際にhtmlでclassを複数指定するサンプルコードを確認していきましょう。

    1つのhtml要素に対して複数クラスのCSSで装飾してみよう

    まずはhtmlのdivタグに対して、2つのクラスを指定してCSSで装飾してみたいと思います。

    index.html

    style.css

    サンプルコードを実行した結果が下記のキャプチャとなります。

    CSSで指定した「右寄せ」と「赤色」の指定が共に反映されていることをご確認頂けます。

    複数classを定義したhtml要素に対してJavascriptの処理を書いてみよう

    次に複数のclassを定義したhtml要素をJavascriptで動かしてみたいと思います。

    処理内容としては、ボタンが押されたタイミングでHTMLの文字が切り替わるという単純なサンプルです。

    「sample1」「sample2」の2つのクラスをhtmlのdevタグに定義し、順にJavascriptで文字を切り替えてみます。

    index.html

    sample.js

    実行した結果は下記の通りです。

    続いて「sample.js」の内容を下記のように修正します。

    sample.js(修正後)

    実行した結果が下記の通りとなります。

    html要素にclassが複数定義されている場合、全てのclassを指定しなければいけないと勘違いされる方もいらっしゃいますが、定義されたいずれかのclassを指定するだけで処理を実行することが可能です。

    htmlタグにclassを3つ以上複数定義する方法は半角スペースで繋げるだけ


    ここまでhtmlタグに対してclassを2つ定義する方法についてご紹介してきましたが、classを3つ4つと増やしていく場合も半角スペースで繋げていくだけです。

    サンプルコードで確認してみましょう。

    htmlタグにclassを4つ指定したサンプルコード

    今回のサンプルコードではhtmlタグに対して、4つのclassを指定しています。

    index.html

    style.css

    ポテパンダの一言メモ

    「かきくけこ」のテキストを表示するdivタグには「font」「size」の2つのクラスを追記しています。

    フォント形式と文字の大きさが変わっていることをご確認頂けます。

    実行した結果が下記の通りとなります。

    さいごに:htmlにclassを複数指定する方法を覚えて読みやすいコードを記述しよう


    本記事では、htmlにclassを複数指定する方法についてご紹介してきました。

    htmlタグにclassを複数定義出来ると知らなかった場合、CSSにプロパティをたくさん記述して無理やりデザインしていた方もいらっしゃると思いますが、これからはclass毎にきちんと役割分担が出来るような綺麗なコードを作成出来るように意識しておきましょう。

    htmlにclassを複数指定するのは、実務でのプログラミングにおいては頻繁に利用されています。

    今回ご紹介した内容をしっかりと理解して、読みやすく綺麗なプログラムを記述出来るように挑戦してみてください。



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE