ぎみっく@gimmickgangさんのページ

ユーザーID: 10450913
総レス数: 1684 (第1782位)

総編集数: 1968 (第150位)
総お絵カキコ数: 760 (第33位)

総新規記事数: 122 (第342位)
総ピコカキコ数: 1 (第871位)

ぎみっく@gimmickgangユーザー

掲示板へ

記事編集

select タグ、option タグ、opt group タグについて

選択式のメニュー（セレクトボックス）を作成するためのタグ

<select>で選択式メニューを、<option>で選択肢を、<opt group>で選択肢のグループを記述します。

ソース

<select>
  <option>あいうえお</option>
  <option>かきくけこ</option>
  <option>さしすせそ</option>
  <option>たちつてと</option>
  <option>なにぬねの</option>
</select>

表示例

select タグではname 属性、size属性、mult iple属性、disabled属性、auto complete 属性、auto focus 属性、form属性、req ui red 属性が利用可能ですが、ニコニコ大百科では使用できません。

option タグではlabel 属性、value属性、disabled属性が利用可能ですが、ニコニコ大百科では使用できません。
selected属性は、<option selected="">の形で利用可能です。
※mult iple属性が使用できないので、利用できるselected属性は1つだけで、複数記述しても2つめ以降は無視されます。

opt group タグではdisabled属性が利用可能ですが、ニコニコ大百科では使用できません。
label 属性は、<opt group label="hoge">の形で利用可能です。

以下サンプル
1.通常　2.さしすせそにselected属性を指定 3.2にopt groupを追加　4.3のopt groupにlabel 属性を指定　5.opt groupを複数用いたもの
なんか

ページ番号: 3124861
初版作成日: 09/06/10 07:08

リビジョン番号: 3178609
最終更新日: 23/09/20 21:22

編集内容についての説明/コメント:

selectタグ、optionタグ、optgroupタグについて

記事編集編集履歴を閲覧

ニコニ広告で宣伝された記事

壱百満天原サロメ (単) 記事と一緒に動画もおすすめ！

提供：うごくみそ汁

29040500pt

ぎみっくさん

方眼5×5 ニコサイカラー

方眼10×10 #8080ff;

liアイコン（明朝体ゝ）

font-size(12pt)

もっとお絵かきを見る

この記事の掲示板に最近投稿されたピコカキコ

The Great...

てすと

ぎみっく@gimmickgang

ぎみっく@gimmickgangの記事へ戻る

« 前へ 1 ... 631- 661- 691- 721-

728 ななしのよっしん非表示 2023/07/10(月) 03:32:44 ID: t8iAHHP7AI レスを非表示にする レスを表示する IDを非表示にする IDの書き込みを表示: もともとimg タグの画像はif lame タグと同様に置換要素なのですが、上記のような形となっているためにこのようなことが起こってます。

外部での例、ありがとうございます。
インライン要素のspan タグと置換要素のimg タグでの表示の違いが分かりやすいですね。他の方にも伝わりやすいと思います。
ご提示頂いた例でも確認できるかと思いますが、span タグとimg タグでは折り返し不可能なときの文字の表示が異なりますよね？
私ができますよと言ってたようにwidth、max-widthで明示してやるとはみ出し部分は表示されないのでサイズが固定されるのですが、それはそれで見切れることなってしまいますが…。

さて、スマホへの対応について主眼を移しますと、
公式ブロマガでも遅延読み込みがloading 属性へと変更になる改修予定とのアナウンスがされましたが
loading 属性のみでの実装だと、最初に挙げさせていただいた200×200で一旦仮レンダリングでサイズ確保しておくような処理がなくなるので
今度はPC版も含めた大百科全体でheightが一旦0で計算されてからの遅延読み込みによる再計算が起こるので、縦のズレが大きく発生してしまいます。

(省略しています。全て読むにはこのリンクをクリック！); 👍
高評価

2
👎
低評価

0
729 ななしのよっしん非表示 2023/07/10(月) 09:19:59 ID: t8iAHHP7AI レスを非表示にする レスを表示する IDを非表示にする IDの書き込みを表示: ってごめんなさい。
マヨネ～ズさんが提示してくださった例も、私が提示した話もそもそも、ブラウザ間のレンダリングの差異の部分が抜けていましたね。

FireFoxのGecko エンジンとChromeのBlink エンジン、SafariのWebkit エンジンでは、そもそもこの文字列として扱っているときの部分に差異が出ます。

分かりやすいようにFireFoxとChromeの両方で、マヨネ～ズさんの挙げてくださった例を見比べると、
双方が言及していたことが理解しやすいかと思われます。

画像の代替なので画像を読み込めなかったとき画像の指定範囲を越えても全部表示しなきゃいけない→FireFox
画像の代替なので画像を読み込めなかったとき画像の指定範囲内におさめなきゃいけない→Chrome

と根本的に別の表示になることがレンダリングエンジンの解釈の差異によって発生しています。
(省略しています。全て読むにはこのリンクをクリック！); 👍
高評価

2
👎
低評価

0
730 ななしのよっしん非表示 2023/07/11(火) 00:34:22 ID: 1GYNunEedb レスを非表示にする レスを表示する IDを非表示にする IDの書き込みを表示: >>725-729
わかりやすく説明してくださりありがとうございます。

よろしければ、loading 属性のみでの実装では不具合が発生する旨について、一つ確認したいことがありますがよろしいでしょうか。
「heightが一旦0で計算されてからの遅延読み込みによる再計算が起こる」という表現をなされていますが、HTML Living Standardを再度確認したところ、lazy設定時は、読み込み前であればwidth、heightなどの設定が要素サイズに適用されるため、閲覧中にネットワークが切断されるようなことがない限り、そのようなズレは発生しないように思えました。
https://html.spec.whatwg.org/multipage/images.html#parsing-a-sizes-attribute

>現状の限られた範囲の中で妥協できる範疇において、他の方にも編集しやすい形にするのがベストかなと個人的には。
私としては、とりあえず overflow: hid den;を設定した
(省略しています。全て読むにはこのリンクをクリック！); 👍
高評価

2
👎
低評価

0
731 ななしのよっしん非表示 2023/07/11(火) 00:52:49 ID: 1GYNunEedb レスを非表示にする レスを表示する IDを非表示にする IDの書き込みを表示: 実際にこちらの端末でGecko、Blinkを用いて確認したところ、以下のような結果になりました。
HTMLについては、こちらのソースコードをテキストエディタにコピーして、適当な場所に保存してから開いてください。
https://pastebin.mozilla.org/zPNPF8Cu

Vivaldi 6.1.3035.111

スクロール前
ID 0 = 160x32, ID 1 = 50x 100, ID 2 = 50x10, ID 3 = 160 x16, ID 4 = 50x10

下方までスクロールした後
ID 0 = 160x32, ID 1 = 160x32, ID 2 = 50x10, ID 3 = 160 x16, ID 4 = 50x10

(省略しています。全て読むにはこのリンクをクリック！); 👍
高評価

1
👎
低評価

0
732 ななしのよっしん非表示 2023/07/11(火) 01:12:18 ID: 1GYNunEedb レスを非表示にする レスを表示する IDを非表示にする IDの書き込みを表示: すみません。width、heightなどによるサイズ指定がない場合の話であることを見落としていました。
変なことを書いてしまいすみません。

現在のJavaScriptによる遅延読み込みの実装ですと、「VOICEROID」の記事のように、記事冒頭に複数の画像が掲載されており、最初からimg要素がビューポートに入っている場合に、一旦全体がレンダリングされてから二つ目以降の画像の読み込みが始まります。
そのため、loading 属性による遅延読み込みの実装に切り替えたほうがレンダリング速度を改善できるのではないかといった考えもあり、以前に問い合わせをしていました。

width、heightなどによるサイズ指定がない場合の対応を完全に失念していたことを謝ります。; 👍
高評価

1
👎
低評価

0
733 ななしのよっしん非表示 2023/07/11(火) 02:25:33 ID: t8iAHHP7AI レスを非表示にする レスを表示する IDを非表示にする IDの書き込みを表示: >>730-732
いえいえ、お気になさらないでください。たしかにそうなんですよね。
一番先頭にあるimg タグの画像にはjavascriptによる遅延読み込みがないので、仰るように読み込みに差が出すぎてしまいます。

今現在はニコニコ大百科の鯖が重い状態なので特に遅延読み込み部分までのレンダリングに時間が掛かっているような感じですね。

今のjavascriptでの遅延読み込みもwidth、heightの指定がない場合、200×200の仮サイズでレンダリングするだけなので問題を完全に解決してるとは言えませんし…。; 👍
高評価

2
👎
低評価

0
734 ななしのよっしん非表示 2023/08/25(金) 07:51:52 ID: l/cLr58M3B レスを非表示にする レスを表示する IDを非表示にする IDの書き込みを表示: おにまいのドット絵とても素敵です。これからも頑張ってください！; 👍
高評価

0
👎
低評価

0
735 ななしのよっしん非表示 2023/08/25(金) 08:13:28 ID: t8iAHHP7AI レスを非表示にする レスを表示する IDを非表示にする IDの書き込みを表示: >>734
紛らわしくて、ごめんなさい

 おにまいのドット絵は
Kof umi/小文さん
https://dic.nicovideo.jp/u/9673725
が描かれたものです。
>>im11235569
im11235569; 👍
高評価

1
👎
低評価

0
736 義陣華非表示 2023/09/20(水) 18:04:00 ID: dV+MVV69Bz レスを非表示にする レスを表示する IDを非表示にする IDの書き込みを表示: お邪魔します。

ニコ生の件では大変お世話になり、本当にありがとうございました。

タイトル:ぎみっくさん

記事内参照用URL :
737 ぎみっく非表示 2023/09/20(水) 19:13:10 ID: t8iAHHP7AI レスを非表示にする レスを表示する IDを非表示にする IDの書き込みを表示: >>736
義陣華さん、いらっしゃいませ。素敵なイラストをありがとうございます。
どういたしまして、またなにかあればいつでもおっしゃってくださいね。

って、この子（娘？）えっちすぎない？？？; 👍
高評価

0
👎
低評価

0

ぎみっく@gimmickgangの記事へ戻る

« 前へ 1 ... 631- 661- 691- 721-

ぎみっく@gimmickgangさんのページ

最近更新した記事

ぎみっく@gimmickgangユーザー

ニコニ広告で宣伝された記事

この記事の掲示板に最近描かれたお絵カキコ

この記事の掲示板に最近投稿されたピコカキコ

ぎみっく@gimmickgang

急上昇ワード改

おすすめトレンド

ニコニコニューストピックス

ぎみっく@gimmickgangさんのページ

最近更新した記事

ぎみっく@gimmickgangユーザー

この記事をもとに新規記事を作成

ニコニ広告で宣伝された記事

この記事の掲示板に最近描かれたお絵カキコ

この記事の掲示板に最近投稿されたピコカキコ

ぎみっく@gimmickgang

急上昇ワード改

おすすめトレンド

ニコニコニューストピックス