CSSのじゅもんを頑張って使い、なでしこさんで部品の配置を思い通りにする術を考えていきます。
発端
最近掲示板に、部品の配置を思い通りに出来ないのですか？ という質問がありました。
それな！！！
なでしこ１でvnakoを使っていた方はだいたい、部品関係の仕様が大きく変わっていることに戸惑うことでしょう。
なでしこ３はブラウザで動くので、部品もHTML5のinputその他のタグを利用して作られています。ブラウザであるが故の制限や不自由さもあって、なでしこ１のGUI部品と比べてイマイチ使い勝手が良くないというか初心者ライクではないという印象がありました。
もっとも、個別に作成する命令が用意されているものだけでなく、HTMLタグで作れるものは全て「DOM部品作成」で作ることの出来るDOM部品と言うことも出来るので、HTMLやCSSを知ればむしろ自由度はとても高いものになっているのですが、それが逆にむじゅかしさを醸し出してもいる。
ちょっとこんなこと出来ないかな？ と思った時に、なでしこの命令では用が足りず、マニュアル見てもサッパリ分からず、HTMLやCSSやJavascriptでケンサクしたりプロパティだのメソッドだのを調べまくったりしなきゃならないのはツライ💧
などと冒頭からぼやきましたが、実は最近DOM部品関係には結構手が入って使いやすさが向上してきています✨
新機能をお試ししたり、ｖ１と比較したりしながら色々探っていきたいと思います。
文法などもｖ１とはかなり違っておりますが、今回そこはチュートリアルなどで確認してみて下さい。マニュアルも徐々に内容が充実してきました✨
👉なでしこ3 チュートリアル > ブラウザ向け - 部品やイベントの扱いについて
👉なでしこ3 マニュアル > plugin_browser/DOM部品操作
ちょっと似ていて結構違うから混同してエラー祭りになりがちだけど、一回ｖ１のことを頭から追い出せば、そう難しい文法ではないですよね？
基本の配置
部品の作り方が分かったところで部品の配置です。
まずは、普通に部品を作っていった場合にどう並ぶかを、ｖ１と比較しながらやってみます。
ｖ１の場合
なでしこ１の場合は、位置の指定を行わずに部品を作っていけば、部品を作るごとに部品の作成される基本Yが自動的に「部品の高さ＋部品間隔(初期値は8px)」だけ下方へ移動していき、部品が縦に並ぶ仕組みになっています。この仕組みが無いと、部品がぜんぶ重なって表示されちゃうんですよね。
説明ラベルとはラベル。
そのテキストは「名前を入力して下さい」
名前エディタとはエディタ。
挨拶ボタンとはボタン。
ｖ３の場合
一方なでしこ３の場合は、ブラウザにお任せです。
なでしこ側の仕組みではなく各ブラウザの仕様によって、よきように配置されていきます。
基本的には通常フローに沿ってテキストなどと同様左から右へ、そして右端で折り返されます。
説明ラベルは「名前を入力して下さい」のラベル作成。
名前エディタは空のエディタ作成。
挨拶ボタンは「挨拶」のボタン作成。
ｖ１のように縦に並べていきたい場合は部品作成ごとに自分で「改行作成」を入れていきます。
説明ラベルは「名前を入力して下さい」のラベル作成。
改行作成。
名前エディタは空のエディタ作成。
改行作成。
挨拶ボタンは「挨拶」のボタン作成。
なお、全部縦に並べて良い場合は、DOM部品オプション["自動改行"] = オン。とすることで、部品を作成するたび自動的に改行が入るようにもできます。
👉なでしこ3 マニュアル > plugin_browser/DOM部品オプション
横に並べたい(折り返されたくない！)
こんなふうに並べたい。
ｖ１の場合
ｖ１は基本縦に部品が並ぶのですが、「右側」、「下側」という便利なメンバ関数があり、
挨拶ボタンの位置は名前エディタの右側。
などとすれば、簡単に部品を横に並べることができます。
「右側」は、引数で与えた部品（名前エディタ）の「左(X)＋幅＋部品間隔,上(Y)」を取得するもので、このようにｖ１では特に意識せずに部品を並べた場合でも、必ず(X,Y)の座標に部品が配置されています。
ですから母艦の幅を狭くしたからって部品の位置がずれるようなことは無く、横スクロールバーが表示されますよ。
ｖ３の場合
ｖ３は基本横に部品が並ぶので、改行したい位置にだけ改行作成を入れてやれば、見た目上は同じように部品が並びます・・・が、しかし！
ブラウザの幅を狭くしたら、折り返されてしまいます。
実際ウェブブラウザの操作で横スクロールバーとか邪魔くさいことが多いですからね～。
デスクトップアプリと違っていろんな環境が想定されるので、うまいこと画面内に収まるようにブラウザさんが取りはからって下さってるワケですが、余計なお世話じゃ～！ とにかくこのとーりに並べておきたいんじゃ～！！！ とゆう場合もあります。
ぎゃー💧
まだ全然余裕で入るでしょ！ って思うんだけど、他の余白やマージンとかの関係でこうなる。
広い画面上で部品のマージンを調整したりラベルで空白を入れたりして配置を整えていると、なおさら台無し感が出たりする。
スマホで開いてみたらほんのちょこっと幅が足りんかったばかりに見た目が崩壊とか、ホント勘弁して欲しいですからね。
そんな時の呪文がこちら。
DOM親要素の「white-space」に「nowrap」をDOMスタイル設定。
部品に設定するのではなく、部品を作る親要素に設定します。
ブラウザの幅を狭くしてあふれても折り返されず、横スクロールバーが表示されました！
雑な方法ですが、とにかく簡単になでしこさんの部品を思い通りに配置したい！ という趣旨の話ですのでゆるして🙏
ちなみにこれはテキストの折り返しを禁止する呪文で、その設定は子部品にも継承されますので、通常通りに折り返されたいテキストの入った要素があったら逆に、その要素の「white-space」に「normal」をDOMスタイル設定してあげる必要が出てきます。
日本語で折り返し禁止設定したい・・・
正直こんなアルファベットは綴りたくないのですが、これらはDOM和スタイルの登録がありません。
でも、和スタイル名もむじゅかしい。
ホワイトスペースって何よ？ ってなるし、説明をうだうだ読んでしまうと単純に折り返し禁止とかにも出来ない感？
むしろ、こうかなぁｗ
●(domに)折り返し禁止設定
domの「white-space」に「nowrap」をDOMスタイル設定。
ここまで。
それか、オンオフでnowrapかnormalかを付けられる感じの方がいいかなぁ？
x,yで任意の位置に配置したい！
というのが本来の内容でした。
ｖ１の場合
ｖ1では
テストボタンとはボタン。
テストボタンの左は200。
テストボタンの上は100。
などと、左,上、またはX,Yを指定して母艦上の好きな位置に部品を配置することが出来ます。
そして、自分で指定した場合はもとより、自動的に配置された場合でも、X,Y、左,上のメンバ変数に、その位置情報が入っています。
では、ｖ３は？
部品を絶対位置に配置出来るようにする
スタイルのプロパティにpositionというのがあり、要素の配置方法を設定できます。
既定値はstaticで、topとleftや、right、bottomの位置指定も、z-indexによる重なり順の指定も効きません。
そこで、まずはこれをabsolute（絶対位置）に設定してやります。
テストボタン＝ 「テスト」のボタン作成。
テストボタンの「position」に「absolute」をDOMスタイル設定。
そうすると、「top」や「left」などの位置を指定するプロパティが有効になります。
テストボタンの「左」に「200px」をDOMスタイル設定。
テストボタンの「上」に「100px」をDOMスタイル設定。
などと位置を指定することが出来るようになりました！
DOM和スタイルによりなでしこらしく「左」と「上」で設定できますが、X,Yではできません。そのまんま「left」と「top」です。
また、ｖ１と違い単位が必要なのでご注意です。
オブジェクトプロパティ構文
最近導入されたオブジェクトプロパティ構文を使えば、このように書くことが出来ます。
テストボタン.左＝200px。
テストボタン.上＝100px。
スッキリ♪ すばらしい。
そして実は、ｖ１でも同じように書くことが出来るんですよ！（単位は要りません）
英語イヤンな人からすると、おぶじぇくと？？ ぷ、ぷろぱてぃ？！ ってなりますが、ここではオブジェクトはDOM部品そのもの、プロパティはｖ１で言うところのメンバ変数みたいなことです。
ただし、DOM部品のプロパティはｖ１のGIU部品のメンバ変数よりも構造が複雑で、「DOM属性設定」「DOM属性取得」で取得設定出来る通常のプロパティの中にstyleプロパティというのがあって、CSSによるスタイル設定を直接指定できることになっており、このスタイル属性の中に左や上や、幅や高さや背景色などといった我々が指定したいっぽいヤツがたくさん入っています。
これらは「DOMスタイル設定」「DOMスタイル取得」で取得設定できます。
ややこやしい💧 使い分けが分からん🤔 いや、分かっているけど書き間違う😅
そこで、オブジェクトプロパティ構文では、なでしこの命令で作成した部品に関しては、本来であれば、
テストボタン.style.left＝200px。
テストボタン.style.top＝100px。
であるところを、なでしこらしく日本語で、簡略化して、
テストボタン.左＝200px。
テストボタン.上＝100px。
と記述出来るようになっているスグレモノです🎶
👉なでしこ3 マニュアル > 文法/オブジェクトプロパティ構文
v3.6.38以降は、でしこの命令で作成した部品以外(HTML設定とか)でも、この記法が使えるようになっています！
「<button id="test">テスト</button>」をHTML設定。
テストボタン＝「test」のDOM要素ID取得。
テストボタン.色＝赤色
日本語で絶対位置配置の設定したい・・・
でも、positionやabsoluteは和スタイルが無いんだよね～。
absoluteなんて、綴れませんよよよ～（この記事のアルファベットは全てコピペしながら書いてる人です）
これもとりあえずこんな感じかなｗ
●(DOMを)絶対位置配置
DOMの「position」に「absolute」をDOMスタイル設定。
ここまで。
その後考えた結果、DOMスキン設定が良さそう！
基準の(0,0)はどこなの？
ｖ１であれば、当然母艦の左上です。
では、ｖ３は？
テストボタン＝ 「テスト」のボタン作成。
テストボタンを絶対位置配置。
テストボタン.左＝200px。
テストボタン.上＝100px。
●(DOMを)絶対位置配置
DOMの「position」に「absolute」をDOMスタイル設定。
ここまで。
実は、先ほどのこれを貯蔵庫エディタで実行したらどうなるかといえば・・・
あれ、ボタンどこー？
となり、ぎゃー、こんなとこに出来てる⁉️⁉️⁉️
ということになります。
position: absoluteについての説明を見てみると、
要素は文書の通常のフローから除外され、ページレイアウト内にこの要素のための空間が作成されません。この要素に直近の位置指定されている祖先があればそれに対して、そうでなければ、初期の包含ブロックに対して相対配置されます。最終的な位置は top, right, bottom, left の値によって決定されます。
となっています。チョット何言ってるか分かんない💧
初期の包含ブロックとはルート要素(html)で、ブラウザの表示領域と考えて良いようです。
つまり何もしていない状態だと、ブラウザの表示部分の左上が基準の(0,0)になるってことですね。
この解決方法は次で書きますが、そもそも本来ウェブページでは、こんな風に何でもかんでも絶対位置指定で部品を配置するということは推奨されないと思います。
いわゆる、れすぽんしぶ的な？
そんなこともあって冒頭の質問には、（先に基本的には出来ない趣旨の丁寧な回答が付いたことから）とは言えやって出来ないことはないんだよ～くらいにちょこっとpositionの紹介しただけのモノスゴク雑な回答をしてしまいました🙏
が！ ワタクシひらめきました。
配布キットだったら別にいいんじゃないですか？
ブラウザの機能を利用してはいても、PCで実行される前提のもので、ウィンドウのサイズも指定できるようになっています。
ヘッダ部分を消してしまえば、他はなんの設定もしなくても、基準の0,0はウィンドウの左上になりますよ。
ウィンドウを母艦と考えて、やりたい放題好きに部品を配置しても別に構わないんじゃ？
なでしこ１の気分で部品を使いたい向きには最適な気が？？
配布キットでヘッダ部分を消したりウィンドウサイズを変更したりについては、過去にこちらで書きました。
貯蔵庫エディタでも絶対位置配置したい
基準の(0,0)の位置は、普通に部品を作った時に、最初の部品が表示される位置じゃないと困りますよね。
改めて説明を見ると、この要素に直近の位置指定されている祖先があればそれに対して相対配置されるとあります。
positionにstatic以外の値を指定した要素を親要素にすれば、その親要素の(0,0)が基準の(0,0)になるということのようです。
しかも！
ページレイアウト内にこの要素のための空間が作成されませんとあります。
通常だと部品を作っていけばそれにつれて親要素が広がり、部品の表示されるスペースが確保されますが、さっきのボタンで分かるとおり、absoluteの場合は元からある要素の上に重なっちゃいます。
部品を表示するスペースをあらかじめ確保しておく必要があります。
とりあえず、こんな感じ？
親＝「div」のDOM部品作成。
親の「position」に「relative」をDOMスタイル設定。
親.幅＝400px
親.高さ＝400px
親.ボーダー＝「1px solid {銀色}」
親にDOM親要素設定。
テストボタン＝「テスト」のボタン作成。
テストボタンの「position」に「absolute」をDOMスタイル設定。
テストボタン.左＝200px。
テストボタン.上＝100px。
positionにrelative（相対位置）を設定したdiv要素を作って親要素に設定し、幅と高さを指定します。
relativeに設定した要素は、自分が通常フローで配置される位置を基準の(0,0)として位置の指定が出来るんですが、何も指定しなければ普通に通常フローで配置されます。
static以外の値を指定しているので、子部品の絶対位置の基準は、この親要素の(0,0)になり、普通に部品を作った時の位置を基準として位置の指定が出来るようになります。
そして、relativeはabsoluteと違って要素の幅と高さ分のスペースが確保されるので、この中で自由に絶対位置指定で部品を配置出来るようになるって寸法です。
ボーダーは分かりやすいように付けています。
参考
おわります
一応なでしこさんで部品をｖ１みたいな感覚で、x,yの概念で配置することが出来ました。
ただし、使い所はよく考える必要があります。
本当の意味で凝った配置のアプリを作ろうと考えるなら、ちゃんとウェブデザインを学ばないとダメな感？
でも、絶対位置の配置は、DOMゲームとか作るのに使うんだよね～。
何かゲームっぽいもの作りたいよね～。
今回のこれを利用してちょっと何か作ってみたりと、うっすら続くかもですが、もっともらしい解説は終了です。
何しろワタクシ、なでしこさんで何かするためだけに、色々調べたりなんだりした切り貼りの知識だもんで、こうゆうのムリなんですぅ～😭
間違いなどありましたらご教授願います。