【GASユーザーのためのHTML入門】範囲指定するだけの便利なdivタグとspanタグ


みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

GASユーザーのためのHTML入門ということで、簡単なWebページの作り方を紹介しています。

前回の記事はコチラ。

【GASユーザーのためのHTML入門】好きな要素にだけCSSでスタイルを適用する
GASユーザーのためのHTML講座ということで、簡単なWebページの作り方を解説しています。今回はGASのWebページにid属性、class属性を使ってCSSのスタイルを好きな要素にだけ適用する方法です。

id属性やclass属性を使って、好きな要素にCSSのスタイルを設定する方法についてお伝えしました。

とはいえ、それらの属性を使った場合、要素単位でしかスタイルの設定しかできません。

例えば、複数の要素にまとめてとか、要素のうち一部分だけとか、そういう場合には困っちゃうのです。

そんなときに便利なのがdivタグとspanタグです。

ということで、GASユーザーのためのHTML入門、範囲指定するだけなのに便利なdivタグとspanタグについて解説をしていきます。

では、行ってみましょう!

前回までのおさらい

まずはおさらいからです。

前回のHTMLソースはコチラです。

Webページの表示はこんな感じです。

GASのWebページの要素にid属性・class属性でスタイル

今回やりたいこと

このページにもうちょっとスタイルを追加してみましょう。

  1. 冒頭のロゴ画像からpタグまでをセンタリングしたい
  2. pタグ内の「Google Apps Script」や「GAS」というワードだけ、フォントサイズをlargeにして、かつ太字にしたい

この2つをなんとかしていきたいと思います。

divタグで範囲をグループ化する

まずは、やりたいことの1つ目をクリアしていきましょう。

冒頭のロゴ画像からpタグまで…それでいうと、imgタグ、aタグ、h1タグそしてpタグと4つのHTML要素が含まれています。

それぞれにclass属性を指定するのは、ちょっと面倒ですよね。

そんなときに使えるのが、範囲をグループ化するdivタグです。

<div>
 グループ化したい範囲
</div>

範囲にはいくつかの要素を含むことができます。

divタグでグループ化してスタイルを指定する

例えば、今回の例でいうとindex.htmlの該当部分を以下のようにid属性を「header」としたdivタグで囲みます。

そして、CSSとして以下を追加します。

プロパティは「text-align」つまりテキストの横揃えを指定するもので、値が「center」ですから、中央揃えとなります。

これで、Webページを表示すると…

GASのWebページにdivタグを使って中央揃えにする

うまくいっていますね。

ちなみに、テキストの横揃えならばCSSを使わずに、以下のようにalign属性でも指定することができますよ。

spanタグで範囲を指定する

では、お題の二つ目、「pタグ内の「Google Apps Script」や「GAS」というワードだけ、フォントサイズをlargeにして、かつ太字にしたい」というやつです。

この場合に使えるのが、以下のspanタグです。

<span>範囲としたいコンテンツ</div>

spanタグで指定した範囲にスタイルを適用する

例えば、bodyタグの中身について、以下のようにspanタグを追加します。

ちょいと見つけづらいですが、「Google Apps Script」や「GAS」というテキストがspanタグで囲まれて、さらにclass属性「gas」が付与されていることがわかりますね。

これに対して、CSSに以下の記述を追加します。

これにて、Webページを表示すると以下のようになりますよ。

GASのWebページにspanタグを使ってスタイルする

指定した範囲のテキストだけが、フォントが大きくかつ太字になっていますね。

ブロック要素とインライン要素

ところで、div要素とspan要素の違いってなんでしょうか。

それは、要素の前後に改行が入るか否かです。

h1~h6タグ、pタグ、ulやolタグなどは記述した前後に自動で改行が入ります。こういう要素をブロック要素といいます。

divタグは指定した範囲のブロック要素を作るタグということになります。

ブロック要素は、その要素だけで「ブロック」を作っちゃうというイメージですね。

一方で、aタグ、imgタグなどは、記述しただけでは、その前後に改行が入ることはありません。このような要素をインライン要素といいます。

spanタグは指定した範囲のインライン要素を作るタグということになりますね。

まとめ

以上、GASユーザーのためのHTML入門として範囲をグループ化するタグである、divタグとspanタグについてお伝えしました。

ブロック要素とインライン要素は、知らないとわけわからなくなる概念なので、ビシっと抑えておいてくださいね。

まとめのコードはこちらです。

次回は、強制スクリプトレットタグを使ってCSSを別ファイルに分ける方法について解説をします。

【GASユーザーのためのHTML入門】範囲指定するだけの便利なdivタグとspanタグ
GASユーザーのためのHTML入門ということで、簡単なWebページの作り方を紹介しています。今回は、範囲指定すdivタグとspanタグとその使い方についてです。ブロック要素とインライン要素についても触れますよ。

どうぞお楽しみに!

連載目次:GASユーザーのための初めてのHTML・CSS講座

Google Apps ScriptではHTML・CSSを使ってWebページを作成し、公開することもできます。本シリーズでは、HTMLやCSSの全くの初心者が、GAS環境を利用してその基本的な知識を身に着けられるようにお手伝いしますよ!
  1. Google Apps Scriptで最も簡単なWebページを作成して公開する
  2. GASでWebページを表示するdoGet関数のスクリプトについて丁寧に解説
  3. GASで作成した最も簡単なWebページのHTMLコードについて丁寧に解説
  4. 【GASユーザーのためのHTML入門】よく使う基本のHTMLタグを紹介します
  5. 【GASユーザーのためのHTML入門】アンカーリンクを張るaタグの書き方
  6. GASのWebページにGoogleドライブ内の画像を挿入する方法
  7. GASで作ったWebページにCSSでスタイルをする最初の一歩
  8. 【GASユーザーのためのHTML入門】好きな要素にだけCSSでスタイルを適用する
  9. 【GASユーザーのためのHTML入門】範囲指定するだけの便利なdivタグとspanタグ
  10. GASでWebページを作るときにHTMLとCSSを別ファイルに記述する方法
  11. GASでWebページを作成する際にCSSフレームワークBootstrapを導入する方法
  12. GASのWebページのナビゲーションをBootstrapでスタイルする方法
  13. GASとBootstrapでWebページを超簡単にいい感じのレイアウトにする方法
  14. GASでWebページを作るときにページのタイトルを設定する方法
  15. GASで作成したWebページにファビコンを設定する方法
  16. GASで作成したWebページをスマホで表示させたいときのmetaタグviewportの設定

The following two tabs change content below.
株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ ★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ ★フォロー頂ければ嬉しいです。

コメント