今回のポイント
前回の記事ではセレクタでHTMLを操作する方法を解説しました。
今回は複数のクラスを一度に指定する方法について解説していきます。
クラスについて分からない方は、以下の記事を参考にして下さいね。
クラスをまとめて指定する方法
いつものようにHTMLで記事を準備しました。
以下の記事を確認してみて下さい。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<div class=”red”>りんご</div>
<div class=”green”>木</div>
<div class=”blue”>空</div>
</body>
</html>
事前にDiv属性を使って、Class名を指定しておきました。
そして外部CSSファイルからHTMLの指定もしたいので、リンクも書き足しておきました。
外部CSSファイルからHTMLの指定方法については過去の以下の記事を参考にして下さい。
それではブラウザでどのように表示されるか、確認してみましょう。
このようになります。
今回は各単語に、CSSで装飾をしていきたいと思います。
フォントサイズを一斉に指定する方法
それでは文字が全体的に小さいので、大きくしてみましょう。
.red,
.green,
.blue {
font-size: 60px;
}
これは
『red』と『green』と『blue』のclassのフォントサイズを60ピクセルに指定
という方法になります。
それではブラウザで確認してみましょう。
いかがですか？
HTML上では違うClass名にかかわらず、一斉に文字の大きさを変えることが出来ました。
Classにフォントサイズを複数指定する方法
次にHTMLのクラス名にスペースを入れて記述することで、一つの文字に複数のClass名を与える方法を解説します。
それでは先程の記事の『木』と『空』のフォントサイズを、小さくしてみましょう。
まずは『木』と『空』に、新たなClass名を追加してみます。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<div class=”red”>りんご</div>
<div class=”test green”>木</div>
<div class=”test blue”>空</div>
</body>
</html>
これは『木』と『空』のクラス名に、『test』という名前を追加した様子です。
そしてCSSにこの『test』に、フォントサイズを指定してみます。
.red,
.green,
.blue {
font-size: 60px;
}
.test {
font-size: 30px;
}
それではブラウザで確認してみましょう。
いかがですか？
Class名に『test』と指定した文字だけが装飾されました。
このように一斉にHTMLを装飾する方法があります。
是非活用してみて下さいね。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
