{出振るい}{進捗記録}{分かる}{希哲16年2月15日24歩}{希哲16年2月9日の開発}{確信が持てなかった}{領当て}{ずらせない}{他要素}{空間的に}...=}(122)

{希哲16年2月9日15歩 K#F85E/E74C-ABAC}

進捗時限記録中略前後

デライト装体調整昨日7歩に関する整理終了

見出し段落よりも横幅両端0.5remずつ広げ区切り線<hr>段落よりも0.5remずつ狭めることにした見出しと区切り線装体・幅調整後

当初見出し下線区切り線見分けやすくするために,区切り線両端1emずつ狭める形にしかけたが,試しに出振るいしてみたこの形が想像以上しっくり来たので,基本方針として採用してしまうことにした。

文書構造視覚的にぐっと把握しやすくなった


段落に対して僅かに字上げするような見出し装体昔から気に入っていて,現状でも「はじめに」などのデライト文書<h2>1em<h3>0.5em字上げされている長らく更新していないため描写内見出しとは全体的に乖離している)月庭でどうしていたか忘れたが,特に理由がなければ似たような装体採用していたはずだ。

やはり,見出し直感的に把握しやすいのが大きな利点だが,描写内見出し採用出来なかった理由として,無駄な余白生じやすいという領当て上の問題大きかった。特に,諸場対応から強く意識するようになった幅狭領当てでは小さくない問題だった。

今回実験意外だったのは,全ての描写内見出し0.5remずらすだけでも十分な視覚効果得られたことだった。これなら,他の装体そのままに,見出し装体マージン削るだけで一応実現出来る。

そのうち領当て上の問題起きたとしても,幅狭領当てでは0.25emにするとか区切り線だけ調整するとか,調整やりよういくらでもあるので,基本方針としては問題ないだろう。


これだけ見出し分かりやすくなれば,区切り線短くする必要はないかとも考えたが,これはこれであった方がメリハリが付いて良い従来の他要素同じ長さだと,やはり直感的に区切りの大きさ把握しにくい

新装体なら,見出し見比べるまでもなく,見出し未満小さな区切りであることが分かる

空間的に見出しずらせない場合の備えにもなる。


昨日眠気が強い時間帯思い付いたのでこの新装体良さ確信が持てなかったが,認知機能低下している時に分かりやすい思ったのだから,分かりやすさに関しても間違いないだろう。

{HTML}{::after}{文字サイズ}{進捗記録}{目立ってしまう}{制御しにくい}{double}{果した}{調整余地}{font-weight}...=}(121)

{希哲16年2月6日12歩 K#F85E/E74C-06F4}

デライト装体調整終了

見分けにくかった見出し装体視認性大きく向上した修正前修正後

見出し装体固定化

まず,これまで中景輪符<h1>始まる<h2> で始まる前後景輪一覧かで描写内見出し装体1階層ずつずれていたが,これはいったん固定することにした。

ずれるのも HTML文書構造からみれば間違った表現ではなく,中景輪符表現も少し変えるべきかと考えていたが,これもなかなか難しい中景輪符知名部は,現状 <h1> でも <h2> でも font-size: 1.4emfont-weight: boldletter-spacing: 0.05em という装体になっている。輪郭という情報単位粒度考えた時,これ以下は小さ過ぎ,これ以上は大き過ぎという所だ。

他の要素も,要素同士の対比考えて細かく装体調整しているため,それらまで見出し装体変化合わせる保守性悪影響を及ぼす。将来的にどうかはともかく,現時点でそこまでする利点は無いだろう。

CSS では h1 ~ .dln h2, h2 ~ .dln h3 のように兄弟結合子使えば簡単に実装出来る。

装体調整

あくまでも描写内での見出し階層装体固定することにした上で,第1階層から第4階層までの描写内見出しには二本線一本線破線点線4種類下線を付けることにした。これまでは第1階層2px第2階層1px一本下線のみだった。

二本線border-styledouble では制御しにくいため ::after使い,1px2px間隔をあけた。また,点線舞覧によって破線より目立ってしまう場合があるため,調整することにした。

最初は,第1階層二本線第2階層一本線があれば十分かと思ったが,結局文字サイズだけの変化ではぱっと見分かりにくい。各描写内見出し図形的特徴があった方が良い。

文字サイズは,これまで 1.3em1.2em1.1em1.05em1em だったのを 1.3em1.2em1.15em1.1em1.05em とした。

1.3em から 1.1em まで0.05em刻みの方が数字的には綺麗かと思ったが,下線特徴を付けても,特に第1階層第2階層一見して見分けにくかった画面撮り。それ以下は使用頻度も低いので0.05em刻みでも大きな問題はないだろう。

letter-spacingfont-weight調整余地はもう少しありそうだが,視認性改善という目的十二分果したのでここで一段落とした。

2px一本線よりも1px二本線の方がすっきりした印象になるのが意外だった。

{HTML}{デラング}{進捗記録}{太字記法}{書けば}{直感に従って}{重視している}{積みながら}{実装経験}{厳密な}...=}(44)

{希哲16年2月2日14歩 K#F85E/E74C-E9F7}

デラング全体方針検討終了

デラングでは,文書構造装体記法をあえて混在させることにした。これまでも混在はしていたが,考え方として整理出来ていなかった。

HTMLCSS 的な「文書構造と装体の分離」に従って文書構造の方に徹するという考え方は,実はあまり軽標記言語には向いていない

記法厳密な意味を持たせ過ぎると気軽に使いにくくなるし,装体に関する記法が無いと結局誤用される。「文書構造と装体の分離」とデラングが最も重視している直感性」はしばしば相反する。直感に従って書けば上手く文書構造と装体の分離をした変換がされる,というのが理想と言えるだろう。

例えば強調記法太字記法のように,デラング内である程度の使い分けが出来るように設計していくべきだろう。これは実装経験積みながら感じていたことだった。

=}
{デラング}{進捗記録}{見出し要素}{希哲15年3月30日の開発}{希哲15年3月30日の進捗時限}{希哲15年3月30日の進捗}{希哲15年3月30日}{見出し記法}{仕様検討}{装体}...=}(22)

{希哲15年3月30日5歩 K#F85E/E74C-3AAE}

デラング見出し記法仕様検討

見出し記法に関しては,アスタリスクの数と見出し要素階層を合わせる単純な実装検討していたが,実際の階層の深さによって装体を変えることも検討に加えた。

つまり,第一階層を最大の見出しとして表示するのではなく,第二階層・第三階層と階層が深くなるにつれ上位階層の装体を大きくした方がいいかもしれない。階層と装体の関係が固定されていると,短い文章の中でちょっとした見出しが欲しい時に大袈裟になってしまう。更に,小さな装体のために上位階層を飛ばした見出しが作られると文書構造上の問題がある。

最初に現れた見出しを最上位階層の基準にすれば文書構造上の問題は解決出来るか。

装体を可変にするのは直感的ではないかもしれないために留めておく。特に,文書全体を見なければ階層の深さが分からないのは大きな欠点か。

=}
{デライト}{開発}{開発記録}{領当て}{開発初期}{Schema.org}{デライト文書構造最適化}{共有ボタン}{Web Share API}{希哲15年2月16日}...=}(34)

{希哲15年2月16日の開発 K#F85E/E74C-9903}

デライト文書構造最適化」に着手

デライト文書構造は,試行錯誤が多かったこと,開発初期 HTML5 要素採用消極的だったこともあり汎用要素,特に div 要素多用目立つ

整理するならページ構成領当ても固まった今が最善の時期だろう。HTML5 要素だけでなく,Schema.org 等の周辺規格も取り入れていく。

これまで導入を避けてきた共有ボタンについても進展

Web Share API利用し,輪郭ページに汎用の共有ボタンを一つ置くというのは悪くない,と考え始めた。API 非対応であれば非表示にすればいいかと思ったが,よく考えると,ずらずら SNSアイコンが並べられるのが嫌だったわけで,共有ボタンを押して選択肢として表示される分には問題ない。

ボタン見た目は,よくある1点から2点にが伸びるものの1点部分を輪郭記号にする形を考えた。

{デライト}{HTML5}{開発}{開発記録}{領当て}{KNEST 隠し実装}{KNEST 隠し}{期待出来ない}{最終処理}{希哲15年2月15日}...=}(29)

{希哲15年2月15日の開発 K#F85E/E74C-EB6E}

主に KNEST 隠し実装検討,自我ページ仕様検討HTML5復習をしつつデライト文書構造見直し

KNEST 隠しに関しては,処理途中の HTML::tpl_I 客体状態により細部の異なるページを持たせる手法を考えたが,どのみち最終処理は全ての変数が揃わなければ出来ず,ページ毎に変数の複製が出来てしまうことを考えると効率性期待出来ないか。

自我ページに関しては,より SNS 寄りにヘッダー画像bio くらいは設定出来るようにしてもいいかと考えたが,領当てが意外に難しい

=}
{文書構造}

{}