プログラミングの基礎！classとCSSの使い方class名の複数設定もできる

2019-07-31 2019-10-11

記事の内容

プログラミングの基礎！　classとCSSの使い方class名の複数設定もできる

classは、HTMLで記述する時のグループ分けのための目印です。

HTML文書内でこのような「class＝”クラス名”」記述を見た事があると思います。

このようにクラス名を指定する目的は、ＣＳＳでスタイリングする時の目印となるからです。

一つの文書内で何度もclassを用いることができます。

上のHTMLの記述ではclass属性をsectionとimgにそれぞれ使用しています、それぞれに名前を指定してその名前を使用してＣＳＳで装飾していきます。

ＣＳＳに記述しているのは画像の縁を丸くするborder-radiusを使用しています。

上の左の記述で同じものがある場合には下のようにクラス名を「，」ドットで区切ってやっても同じようになります。

半角スペースで区切って列記することで複数のクラス名を付けて複数のスタイルを適用することができます。

classの複数指定は構造と見た目を分けてスタイリング出来ることにあります。

構造と見た目を分けることで修正や更新をする時に影響の範囲や予想が立てやすくなります。

class名を複数指定することでCSSで構造と見た目に分けることができます。

構造は要素のサイズや周りの余白(マージンやパディング)など要素自体の作りを言います。

見た目は文字の色や背景色などの装飾を言います。

class名を複数指定する場合は半角スペースで区切ります。

これは間違えないようにしましょう。

class名を「box」と「bg1、bg2、bg3」としておきました、boxを使って同じような構造の要素を作り、bgでそれぞれの見た目を変えていきます。

boxの方は色が明るい黒でフロートを使っているので左から横一列になっています。

各々の色は16進数で表しています、英語表記で記述してもＯＫです。

class名を指定してCSSを記述してスタイルを変えていきましょう、複数指定することでCSSの記述が効率よくなると思いますのでぜひやってみて下さい。

この記事を書いた人

昨年は、コロナのおかげで大変な年でしたが、令和３年はいい年になるように願っています。昨年から投資を始めてみました、始めは危ないイメージでしたが、損をしないようにルールを決めてから始めたので怖いとか危ないとかのイメージはなくなりました。投資の楽しさが分かってもらえるようなものを作っていきたいです。