photo credit: unbekannt270 colored pencils via photopin (license)
みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。
GASユーザーのためのHTML講座ということで、簡単なWebページの作り方を解説しています。
前回の記事はコチラ。
GASのWebページにCSSでスタイルを適用する方法についてお伝えしました。
ただ、スタイルを適用する場所の指定、つまりセレクタですが、特定の種類のタグ全部ではなくて、一部の「ここ！」ってところだけに適用したい…ということもありますよね。
そんなときに使うのが、id属性やclass属性ですね。
ということで、今回はGASユーザーのためのHTML入門、CSSのスタイルを好きな要素にだけ適用する方法です。
では、行ってみましょう！
前回のおさらい
前回作成したHTMLファイル「index.html」のソースはこちらです。
![いつも隣にITのお仕事ロゴ]()
いつも隣にITのお仕事
GASのおすすめ記事一覧
いつも隣にITのお仕事からGASのおすすめの記事をピックアップしています。
連載目次：超初心者向けGASでBotを作りながら基礎を学ぶ
Google Apps Script（GAS）をはじめるためのメリットは山程ありますが、何を作ったらいいの？と悩んでしまうこともありますよね。そんな時に、おすすめしたいのが「Bot」の作成です。このシリーズでは、超初心者向けにGASでBotを作る方法を題材としながら、GASプログラミングの一通りの流れと書き方について学んでいきます。
- 【初心者向けGAS】本当の最初の一歩！スクリプトエディタでプロジェクトを開く
- 【初心者向けGAS】はじめてのスクリプトを作成し、保存し、実行する
- 【初心者向けGAS】プログラミングに必須の変数の使い方とデータ型について
- 【初心者向けGAS】ログを表示するLogger.logの使い方
- 【初心者向けGAS】スクリプト実行時の「承認」でびっくりしないために
（以下略）
連載目次：GASユーザーのための初めてのHTML・CSS講座
Google Apps ScriptではHTML・CSSを使ってWebページを作成し、公開することもできます。本シリーズでは、HTMLやCSSの全くの初心者が、GAS環境を利用してその基本的な知識を身に着けられるようにお手伝いしますよ！
headタグ内にstyleタグを用意して、その中にCSSを記述しましたね。
このHTMLファイルをWebページとして表示すると以下のようになります。
無駄にカラフル。
今回やりたいこと
前述のCSSでは
- h2タグの文字色をオレンジに、フォントサイズをそこそこ大きく
- pタグの文字色をグレーに、フォントサイズを小さく
というように、h2タグそしてpタグには問答無用にスタイルを適用しているのですが、一部の要素にだけスタイルを適用したいときがあります。
今回はその方法を見ていきましょう。
id属性とclass属性でタグに名前をつける
HTMLではすべての要素に、その管理をするための「名前」をつけることができます。
HTML要素に名前をつけるための仕組みが、id属性とclass属性です。
それで、その「名前をつけた要素に」CSSを適用するようにできれば、狙った要素にだけスタイルすることができるようになるわけです。
id属性とclass属性の記述
さて、id属性とclass属性の記述の仕方です。
「名前」をつけたい要素の開始タグの中に、以下のように記述します。
id属性、class属性はどんなHTMLタグにも指定することができます。
また、id名・class名はアルファベットではじまる英数字であれば、自由に命名することができます。
このネーミングも…重要そうですよね。
id属性とclass属性の違い
ともにHTML要素に名前をつけるという同じ役割を持つのですが、id属性、class属性の違いは何でしょうか？
それは以下のように同じ名前を命名できる要素の数に違いがあります。
- id属性：あるid名をつけるのは一つのHTML文書内で一つの要素に限られる
- class属性：同じclass名を同じHTML文書内の複数の要素につけてOK
ということです。
つまり、唯一の要素だけにスタイルを適用したいときはid属性を、複数の要素に同時にスタイルを適用したいときはclass属性を使う、ということになりますね。
id属性、class属性を付与したHTML
- 1つ目のh2タグにだけスタイルを適用したい
- 2つ目以降の「（以下略｝」を除くpタグにスタイルを適用したい
のであれば、「index.html」のbodyタグの中を以下のようにすればOKです。
いつも隣にITのお仕事
GASのおすすめ記事一覧
いつも隣にITのお仕事からGASのおすすめの記事をピックアップしています。連載目次：超初心者向けGASでBotを作りながら基礎を学ぶ
Google Apps Script（GAS）をはじめるためのメリットは山程ありますが、何を作ったらいいの？と悩んでしまうこともありますよね。そんな時に、おすすめしたいのが「Bot」の作成です。このシリーズでは、超初心者向けにGASでBotを作る方法を題材としながら、GASプログラミングの一通りの流れと書き方について学んでいきます。
- 【初心者向けGAS】本当の最初の一歩！スクリプトエディタでプロジェクトを開く
- 【初心者向けGAS】はじめてのスクリプトを作成し、保存し、実行する
- 【初心者向けGAS】プログラミングに必須の変数の使い方とデータ型について
- 【初心者向けGAS】ログを表示するLogger.logの使い方
- 【初心者向けGAS】スクリプト実行時の「承認」でびっくりしないために
（以下略）
連載目次：GASユーザーのための初めてのHTML・CSS講座
Google Apps ScriptではHTML・CSSを使ってWebページを作成し、公開することもできます。本シリーズでは、HTMLやCSSの全くの初心者が、GAS環境を利用してその基本的な知識を身に着けられるようにお手伝いしますよ！
id名として「h2-orange」、class名として「p-small」という属性を付与している要素がありますよね。
id名・class名でスタイルの適用先を指定する
では、CSSのほうを見ていきましょう。
まず、id名で適用先を指定するCSSセレクタの記述は以下の通り、ハッシュ記号「#」に続いてid名を指定します。
～
}
class名で適用先を指定するCSSセレクタの記述は、ピリオド「.」に続いてclass名を指定します。
～
}
id属性、class属性でスタイルを適用するCSS
ということで、id属性、class属性を付与した要素にスタイルを適用するCSSはコチラになります。
#h2-orange {
color: orange;
font-size: x-large;
}
.p-small {
color: gray;
font-size: small;
}
これでWebページを表示すると以下のようになりますよ。
1つ目のh2要素だけオレンジ色に、また2つ目以降のp要素だけグレーかつ小さめの文字になっていくことがわかりますね。
まとめ
GASユーザーのためのHTML入門ということで、id属性とclass属性を使ったスタイルの適用の仕方についてお伝えしました。
id属性、class属性、便利っすね！
まとめのソースコードはコチラです。
![いつも隣にITのお仕事ロゴ]()
いつも隣にITのお仕事
GASのおすすめ記事一覧
いつも隣にITのお仕事からGASのおすすめの記事をピックアップしています。
連載目次：超初心者向けGASでBotを作りながら基礎を学ぶ
Google Apps Script（GAS）をはじめるためのメリットは山程ありますが、何を作ったらいいの？と悩んでしまうこともありますよね。そんな時に、おすすめしたいのが「Bot」の作成です。このシリーズでは、超初心者向けにGASでBotを作る方法を題材としながら、GASプログラミングの一通りの流れと書き方について学んでいきます。
- 【初心者向けGAS】本当の最初の一歩！スクリプトエディタでプロジェクトを開く
- 【初心者向けGAS】はじめてのスクリプトを作成し、保存し、実行する
- 【初心者向けGAS】プログラミングに必須の変数の使い方とデータ型について
- 【初心者向けGAS】ログを表示するLogger.logの使い方
- 【初心者向けGAS】スクリプト実行時の「承認」でびっくりしないために
（以下略）
連載目次：GASユーザーのための初めてのHTML・CSS講座
Google Apps ScriptではHTML・CSSを使ってWebページを作成し、公開することもできます。本シリーズでは、HTMLやCSSの全くの初心者が、GAS環境を利用してその基本的な知識を身に着けられるようにお手伝いしますよ！
次回は、divタグとspanタグについて紹介します。
どうぞお楽しみに！