FileMaker開発者のためのHTML/CSS/JavaScript入門 Day1

HTML/CSS/JavaScript for FileMaker Developers

FileMaker開発者のためのHTML/CSS/JavaScript　入門 Day1

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

2024-01-31 野田修

HTMLには
h1,h2といった見出し要素やdivという汎用的な入れ物として使える要素、
spanという文字列の一部にスタイルを当てたい時に使う要素、
また、それ以外にも実に多くの要素が存在します。

ですが、私がよくWebビューアの中で使う要素としては、
div, span, h1, ul, li, a, button, inputなど、ごく限られています。

これらをCSSやJavaScriptと組み合わせて使うことで『FileMakerでは表現が難しいこと』が『Webビューア上で可能』になります。

これらの要素は順次このブログの中で取り上げていきますが、
第1回目の今日はHTML要素を使う上で最も基本となる『ブロック要素』と『インライン要素』という概念についてとりあげます。

ブロック要素とは

百聞は一見にしかず、まずはコードを見ていただきます。(できれば、ご自身でもFileMakerでやってみてくださいね。下記コードをFileMakerのテキストフィールドにコピー&ペーストし、Webビューアの計算式でそのフィールドを参照するよう設定してください。) 

data:text/html,
<style>
    div{border:1px solid black;}
</style>
<div>Hello, HTML!</div>
<div>Hello, HTML!</div>
<div>Hello, HTML!</div>
Hello, HTML!
Hello, HTML!
Hello, HTML!

赤枠の左側上がhtmlコードで、右側下がWebビューアでの表示です。

div要素の境界がわかるようにstyle要素の中で、border:1px solid black;というスタイルを当てています。
div要素はデフォルトで横幅いっぱいに広がり、ブロックのように縦に積み重なっています。
このような要素のことをブロック要素といいます。

コードについても説明します。
  • data:text/html, :これによってこれから記述するテキストがhtmlであることをWebビューアに指示しています。
  • style要素:これによってdiv要素にborder:1px solid black;というスタイルを当てています。
  • div要素:これによってブロック要素のdiv要素を3つ作成しています。
  • htmlコードのテンプレート(基本構成)をご存知の方にはhead要素もbody要素もないので奇妙に思われるかもしれませんが、これでもWebビューアのレンダリングエンジンはそれらを補ってレンダリングしてくれます。
  • 余分な要素がない方が学習する上においては理解しやすいので、このブログにおいてはこのスタイルでコードを記述します。

インライン要素とは

同じことをspan要素を使ってやってみます。 

data:text/html,
<style>
    div{border:1px solid black;}
</style>
<span>Hello, HTML!</span>
<span>Hello, HTML!</span>
<span>Hello, HTML!</span>
Hello, HTML! Hello, HTML! Hello, HTML!

span要素はブロック要素とことなり横一列に並びます。
このような要素のことをインライン要素といいます。

自分がWebビューアの中で使用する要素がブロック要素なのかインライン要素なのかを知っておくことはとても重要です。
要素を自分のイメージ通りに配置する上で必須の知識です。

*補足 htmlコードの基本構成について

通常、htmlコードは下記のような構成になります。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div>Hello, html</div>
</body>
</html>

各要素にはもちろん意味があり必要なものなのですが、入門段階でそこにこだわりすぎるとhtmlの基本的な部分が見えにくくなります。
このブログではこれを考慮し、head要素やbody要素を省略しています。

上記のようなコードの場合、このブログでは下記のように表示します。 

data:text/html,
<style>
    div{
        border:1px solid black;
    }
</style>
<div>Hello, html</div>

幸いなことにWebビューアのブラウザエンジンはこのような書き方でもレンダリングしてくれます。
htmlの学習がある程度進んだ段階で上記のmeta要素がどのような意味をもつのか説明したいと思います。

チャレンジ

  • 1. h1要素はブロック要素でしょうか、インライン要素でしょうか?
  • 2. a要素はブロック要素でしょうか、インライン要素でしょうか?
  • 3. 要素の枠線の色や幅を変化させてみてください。(style要素内の1px solid black部分を書き換えます)

参考リンク