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

HTML/CSS/JavaScript for FileMaker Developers

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

要素サイズと位置をコントロールする

2024-02-20 野田修

前回ブロック要素をご紹介しました。今回は要素サイズと位置をコントロールする方法をみていきます。
width, heightというプロパティを使って要素のサイズをコントロールすることができます。

要素サイズのコントロール

今回もまずはコードから見ていきましょう。(できれば、ご自身でもFileMakerでやってみてくださいね。) 

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

赤枠の左側上がhtmlコードで、右側下がWebビューアでの表示です。
divのwidth, heightプロパティをstyle要素のなかで指定することによって、要素の横幅、高さを変更することができました。

前回、divはblock要素であるということをお伝えしました。
このようにdiv要素の右側にスペースがあったとしても、そこに回り込むことなく、縦に積み重なっていることに注目してください。

要素位置のコントロール

今度は要素の位置をコントロールしてみましょう。
left, topプロパティを使います。 

data:text/html,
<style>
    div{
        border:1px solid black;
        width:100px;
        height:100px;
        top:100px;
        left:50px;
    }
</style>
<div>Hello, HTML!</div>
Hello, HTML!

あれ? top, leftが効いていません。

実はtopプロパティなどの位置プロパティが有効になるためには、positionプロパティが設定されている必要があります。

positionプロパティ

positionプロパティにrelativeという値を設定してみます。 

data:text/html,
<style>
    div{
        border:1px solid black;
        width:100px;
        height:100px;
        top:100px;
        left:50px;
        position:relative;
    }
</style>
<div>Hello, HTML!</div>
Hello, HTML!!

今度はdiv要素をうまく移動させることができました!

positionプロパティに指定できる値としては、relativeのは他にabsoluteやstickyなどがあります。
これらがどの様に動作するかは、次回のブログでご紹介します。
今回は要素位置をコントロールするにはpositionプロパティの指定が必要ということだけ覚えてください。

チャレンジ

  • left, top, width, heightの値を変化させてdiv要素がどの様に変化するか確認してみてください。

参考リンク