変奏現実

パソコンやMMORPGのことなどを思いつくまま・・・記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。

この画面は、簡易表示です

HTML

[HTML]HTML5はもう古い？

投稿日 2022年6月19日 10:12 by おっとっとっと Comment

HTML5で書けば良いと思ってたけど、今は「HTML Living Standard」準拠じゃないとダメらしい。

その辺を日本語でまとめていた記事があったので抜粋。

  • 要素
    • 追加
      • <hgroup>
      • <slot>
    • 変更
      • <cite>
      • <link>
      • <meta>
      • <style>
    • 削除
      • <rb>
      • <rtc>
  • 属性
    • 追加
      • <a ping>
      • <area ping>
      • <body onmessageerror>
      • <form rel>
      • <iframe allow>
      • <img decoding loading>
      • <link as color disabled imagesizes imagesrcset integrity>
      • <script integrity nomodule referrerpolicy>
      • <video playsinline>
      • <グローバル autocapitalize enterkeyhint is itemid itemprop itemref itemscope itemtype slot　onformdata onmessageerror onsecuritypolicyviolation onslotchange onwebkitanimationend onwebkitanimationinteration onwebkitanimationstart onwebkittransitionend>
    • 変更
      • <a rel>
      • <area rel>
      • <iframe sandbox>
      • <link rel>
      • <meta charset http-equiv name>
      • <グローバル accesskey inputmode nonce>
    • 削除
      • <a rev>
      • <area hreflang type>
      • <html manifest>
      • <iframe allowpaymentrequest>
      • <img longdesc>
      • <link rev>
      • <object typemustmatch>
      • <script charset>
      • <style type>
      • <table border ondragexit onloadend onshow>

正直なところ、滅多に使わないどころか存在すら知らないものが多いけど

  • scriptタグのtypeが無くなっても、”text/javascript”以外を書くことは無いから困らないかな
  • scriptタグのcharsetが無くなると、.htmlと.jsは同じ文字セットを使わないといけない様だ
  • tableタグにborderが無くなっても、cssで指定できるから問題なし

あたりは割とありそうだ。

勿論、使う側では便利ではあるけれど、作る側ではメンドクサイからこんなもの消えてしまえ！という気持ちも理解できる部分でもある。

とは云うものの、原文は

ごく親しい仲間内にしか通じない様なイミフな文面になっている。

ホラ！こんな風にタグを書かれたら、こうなるよ！

と書いてある様な気がするけど、なぜそうなるのかさっぱり判らん。

どうやら、HTML Living Standardの記事はHTML5との動作や効果の差異をHTML5風に書いている様だ。

プログラマー的には、

Linuxのdiffコマンドの結果を見て理解できるのはソースコードを変えた本人ダケ

なのと同じなのだ。

HTML Living Standardの文面を理解するために、

まず、元ソースの「HTML5の日本語の記事」で「同様の用語を探し」、

そこでHTML5での用語と用例で理論的な理解ができれば、

HTML Living Standardのイミフな箇所との差分から

理解がチョコっと進むのである。

そういう意味で、

HTML5自体はお古でも、HTML5の紹介記事や時に辞書面の記事は今でもとても重要なのである。

いつかは、HTML5とHTML Living Standardのドキュメントをマージしてくれる優しい人が現れてくれるのかもしれない。パッケージで良く目にする【安定版】なんて出たらありがたいね。


  • カテゴリー:
  • HTML

[HTML]表のタイトルロック

投稿日 2021年11月5日 19:36 by おっとっとっと Comment

1.  position: sticky;  top: 0;

tableタグの上にタイトル行（ thエレメント、tdエレメント ）をしがみ付かせる方法。

このルールを trエレメントに付けてもあっさりスクロールしてしまう。

th エレメント やtd エレメント に１つづつ付けなくてはいけないので、列が多いと大変だから、

thead.hogeTable th,  thead.hogeTable td {
  position: sticky;
  top: 0;
}

な感じのCSSにすると良いと思う。

但し、この方法では、

  • thやtdの境界線はスクロールしてしまう
  • rowspanを使っている場合に２行目以降はロックしてくれない。

2. position: absolute;  top: nnnnpx;

画面にタイトル行（trエレメント）をネジ止めする方法。 

thead.hogeTable tr {
  position: absolute;
  top: 0;
}

テーブルの位置が変わるとcssを修正しないといけないのがメンドイ。

だが、topを指定しないと、勝手にtableエレメントの上に固定してくれるので、これが案外楽かもしれない。

但し、この方法でも、

  • thやtdの境界線はスクロールしてしまう
  • rowspanを使っている場合に２行目以降は位置の微調整が大変。

なのは同じ。

3.javascriptで何とかする方法

ググれば色々と多数存在するので割愛するが、どれもスクロールバーのイベントに合わせて、Theadエレメントの位置を調整するもの。

それよりも、こそ－りと、THead部分をコピって別レイヤに貼り付ける方が楽な気がするのはボクだけだろうか？

テキスト内容で列幅が変わるのが気になるなら、元テーブルのtheadの各thの onresize イベントをフックして書き換えればいいような気がする。


  • カテゴリー:
  • HTML

[HTML]table クリックのエコー

投稿日 2021年10月29日 17:21 by おっとっとっと Comment

HTMLの表をクリックした時に行選択状態にするには、チェックボックスのchecked やリンクのselectedの属性を使う方法もあったが、昔のブラウザならどんな属性も自由に付けられるからtrタグにcheckedするのもいいけど、変な使い方は無視するのが御時世なので、trタグに行選択クラスを加えるのが安心。

その為には、cssとjavascriptを少し書かないといけない。

注意点としては、

  • 表の背景色を一行ごとに変えてる場合はnth-child(…)の方が優先度が高いらしい。
    • 選択状態クラスの背景色に !import して優先度を変える。
  • thやtdで文字や背景の色を指定していると、trで色を変えても無関係で無視されてしまう。

かな。

なので、 ちと面倒だけど、thやtdにも 選択状態クラスを入れれば良い。

但し、javascriptの for .. in は、childNodes の要素の識別子（数値）を含むプロパティ名（文字列）を返してくるので、!isNaNでフィルターしないといけないし。childNodesには行中のスペース等のテキスト要素も含まれているので、classListプロパティがあるものだけ処理しないとエラってしまうから、配列でのfor..inは非推奨でfor..ofがお勧めとなっている。

こんな感じかな。

※ちと大変と書いておいて、6行しか増えてないなぁ。

window.onload = function () {
  var tables = document.querySelectorAll("table");
  let addClassElement = null;
  for (var table of tables) {
    table.addEventListener('click', (event) => {
      var tr = event.target.parentElement;
      // 前回設定したものを回復
      if (addClassElement!=null) {
        addClassElement.toggleClassNameWithChilds('selected01');
        addClassElement = null;
      }
      // 行選択クラスをトグる
      addClassElement = tr.toggleClassNameWithChilds('selected01');
    }, false);
  }
}

// 指定クラスをトグる
if(!HTMLElement.prototype.toggleClassNameWithChilds) {
  HTMLElement.prototype.toggleClassNameWithChilds = function(className) {
    var addClassElement = null;
    if (this === undefined || this.classList === undefined) {
      return null;
    }
    if (!this.classList.contains(className)) {
      addClassElement = this;
    }
    this.classList.toggle(className);
    //配下のオブジェクトも反映
    for (var ch of this.childNodes) {
      // 未実装なオブジェクトを除外
      if(ch.toggleClassNameWithChilds !== undefined) {
        ch.toggleClassNameWithChilds(className);
      }
    }
    return addClassElement;
  }
}
tr:nth-child(even) {
  background-color: white;
}

tr:nth-child(odd) {
  background-color: lavender;
}

.selected01 {
  color: white;
  background-color: gray;
}

Element.classListにtoggleWithChildsとかを追加しようとしたけど、classListの生成タイミングが判らず諦めた。


  • カテゴリー:
  • HTML

【HTML】コンテンツとレイアウトの分離

投稿日 2021年10月12日 02:18 by おっとっとっと Comment

ついつい改行したいからdivタグ、続けて並べるからspanとかつかって、HTMLドキュメントの内容がレイアウトとコンテンツがゴッチャゴチャになる。

当初TABLEタグが嫌われていたのも、音読するとイミフで嫌。これが一因。

極端な例としては、データ（XML）とレイアウト（XSLT）に分離してドヤ顔してるのもあるけど、フォーム風のCSVファイルっぽいXMLなら１ブロック１ページになってそう難しくないけど、各階層のデータブロックの数が可変長、なのに１ページに綺麗に収めたい等々の矛盾する要望が出る世の中なので使い道は無い。

HTMLを多少アレンジしたXHTMLも今更移行なんて無理ってことで黒歴史入りする様だ。

それに、よくよく考えれば、formのselectやoptionやbuttonなんかも音読の必要なんてなさそうで、どうなんかなぁ？


  • カテゴリー:
  • HTML

[HTML]Normalize.css

投稿日 2021年10月12日 01:40 by おっとっとっと Comment

同じHTMLでもブラウザ毎の属性の設定が違うので、結構画面が荒れてしまう。

しかしcssリセットで全て無かったことにすると、H1とかH5のフォントサイズから考えないといけない。

そんな時に良い感じの初期設定に調整してくれるのがNormalize.css。

効果はまぁまぁかな。

sanitize.cssの方が細かい調整がされているらしい。


  • カテゴリー:
  • HTML

【HTML】リサイズdiv

投稿日 2021年10月5日 23:44 by おっとっとっと Comment

単にマウスでサイズを変えられるdivタグのサンプル。※ＩＥ不可

resize: both を指定するだけ。

中の文字は　white-space: nowrap;　で自動改行しないモードがよさげ。

枠線をドラッグするには、 枠線をdivで描画しないとダメっぽい。

と思ったけど、JS使えば枠線ドラッグも可。

※ＩＥやChromeでマウスをキャプチャする仕組みが不明瞭なので広げる時はゆっくり操作。


  • カテゴリー:
  • HTML

[HTML]ボタン

投稿日 2021年9月23日 23:58 by おっとっとっと Comment

HTMLで【実行】とか【キャンセル】と文字だけのボタンは簡単に作れるけど、

【絵・テキスト】なボタンはAタグでしかできないらしい。

まず

<a href="" class="btn1">ボタン１</a> 
a.btn1{
  display:block;
  text-align:center;
  width:6em;height:1.5em;/*ボタンの大きさ*/
  background:url(絵) no-repeat;/*絵/
  background-color:#00913D;/*ボタンの色*/
  text-decoration:none !important; /*テキストの下線消し*/
}

で作ると

とりあえず出来た

だが、テキストの上下の余白をもっと取ると絵がSVGだったら絵がでかくなって困る。

CSSの仮想クラス:beforeを使って絵だけの設定をできるけど、

<a href="#" class="btn2">ボタン2</a>

を作り

a.btn2 {
  padding: 0.5em;
  margin: 10px 0;
  display: block;
  width: 6em;　  height: 1.5em;　/* ボタンの大きさ */
  color: #fff !important; /*テキストの下線消し*/
  background: #00913D;
  text-decoration: none;
  font-weight: bold;
  font-size:16px;
  border-radius: 3px;
  text-align:center;
}
a.btn2:before {
  content: ""; /* 外すと絵が出なくなる（謎 */
  display: inline-block;  /＊　絵とテキストを横に並べる */
  width: 18px;　  height: 18px;　/* 絵のサイズ */
　margin: -3px 5px 0 0; /* 主にテキストとの間隔 */
  background: url("絵") no-repeat; /* 絵 */
  background-color:#00913D;
  background-size: contain;
　vertical-align: middle;  /* テキストと縦位置調整 */
}

で、デザインを調整するとできる様だ。

大体満足な出来

絵を後ろに出すなら :after　に変えればいい

こんな感じ

しかしCSSの調整が大変過ぎる。

<a href="#" class="btn4"><img src="arrow.svg" class="img4"><span>ボタン４</span></a>
a.btn4{
  background-color:#00913D;
  text-decoration:none !important;
  border-radius: 3px;
}
a .img4{
  margin: 4px 5px 6px 5px; /*ちょっと絵を上に*/
  width: 18px;   height: 18px;
  vertical-align: middle;
}
a span {  vertical-align: middle; }

の方が楽かな

でも、デザインの全般的な見直し・・・とか来ると痛いなぁ


  • カテゴリー:
  • HTML


top