(木)HTML5のサイトはdetailsタグで開閉メニュー/アコーディオンを簡単に作れると分かった。バージョン5.1から新たに加わった要素らしくて発表されないまま、かつてjQueryを使って難儀に臨むしかなかった気持ちが嘘みたいに晴れ上がっている。本当にHTMLのマークアップだけで済んでしまうからサイトの表示速度が遅くなる影響も最大限に抑えられる。細目detailsタグの中にsummaryタグで概略をスイッチとして入れておいて細目の閲覧を開閉メニューで切り替えられる。最初から開いておくのも可能で、detailsタグにopen属性を追加するんだ。動作はHTMLのマークアップだけだからブラウザの読み込みに優れていて非常にスムーズだし、サイトでの使い心地は最高だろう。気付くと些細な日常のContempo/Bloggerの2017年のテーマにも取り入れられていたんだ。サイドバーのアーカイブやラベルのリストなどがdetailsタグで記載されて開閉メニューになっている。動作が非常にスムーズなので、昨年からブログのテンプレートに新しく採用してから何なんだと驚いていたけど、ついに謎が解けたと笑う。ブラウザが対応してないとdetailsタグを使っても駄目だけど、殆どのブラウザは大丈夫で、一部では未対応だから除外するしかない。detailsタグのCSSのデザイン最も気がかりなのはスイッチの左端の三角のマーカーを消せるかどうかだ。新しいデザインを付けるとしたらデフォルトのデフォルトが邪魔になり兼ねないと真っ先に懸念されてしまう。現時点でブラウザ毎に対応が分かれる状況みたいなので、CSSを記載するのは幾らか煩雑なんだ。{display:none;}両方を使っておくと訪問者によってサイトのデザインが崩れて閲覧される可能性は低い。前者の場合にはsummaryタグに{display:list-item;}を追加するとリストのliタグと同じように扱ってデザインを付けられる(スタイル設定例)らしい。何もしなければ後者の場合と同じで、デフォルトのマーカーを消す以外はCSSでどう扱うかはブラウザ毎に変わらない。開閉状態でデザインを区別するdetailsタグは普通にCSSでデザインを付けると開いた状態/表示と閉じた状態/非表示の両方に作用するけど、さらに区別して記載する方法もある。summaryCSSで特殊な書き方だから開閉状態でデザインを区別したいかぎりはdetailsのために新しく覚えておく必要がある。CSSのどんな属性が使われるかBloggerの2017年の公式テーマのソースコードを参考に挙げてみる。cubic-bezier(0.4,0.0,0.2,1)/動作を緩めるoutline:none/スイッチの縁取りを消すpadding:0/内側の余白を消すbackground-color:transparent/背景色なしoverflow:hidden/はみ出しの切り捨てtext-overflow:ellipsis/文末の省略記号white-space:nowrap/改行なしdetailsタグに特徴的なのはデフォルトでsummaryタグの概略のスイッチを押した後に橙の細い縁取りが付くので、消したい場合にはoutlineのnoneを使えば良い。枠線のborder属性と同じように太さと色とスタイルの三つの値(outline)でデザインを付けることもできる。一つは開閉する要素だから固有の動作を制御するのにtransitionが使える。属性値のheightは縦に動作するためだからdetailsタグには必須で、.3s(0.3秒)は動作の所要時間で、cubic-bezierは動作中の流れだ。cubic-bezier/三次ベジェ関数で入力するのは任意だけど、記載しなくても構わない。初期値はease(最初と最後を滑らかにする)で、さもなければスタイル(transition-timing-function)から選べるようにもなっている。他ではちゃんと表示するのに不要な属性も入っているようだけれども調べてみるとtext-overflowのellipsisを使う際にoverflowのhiddenとwhite-spaceのnowrapが必要(text-overflow)らしい。二つとさらにdisplay:block(inline以外の値)と指定先か、または指定先を収めた親ボックスのdivタグなどに幅指定(width属性など)を含めた四つの条件が揃わないと文末の省略記号として三点リーダー(...)が出るようにはならないせいだった。些細な日常ではブログのカスタマイズで各ページの下段のランキング/検索エンジンのリンク集に使った。detailsタグはシンプルにコンテンツを纏めるのに役立つし、HTMLで簡単に作れる開閉メニューで画面の小さなスマホ/タブレットのモバイル向けにコンパクトなデザインに仕上げられるのが気に入る。始まらなかったり、途中で止まったりもしていたPlayストアでのAndroidアプリのダウンロードは安定して来ていると思うし、喜ばしいかぎりの昨今だけれども速度自体はいつも同じではないから何だろうと訝られる。続きを読むスノーボードのジャンプ中のグラブには幾つもの種類があるスノーボードでジャンプして板を掴む動作をグラブ、またはグラブトリック(掴み技)としてエアー(空中)に組み込まれる。幾つもの種類があって空中での姿勢を安定させたり、ハーフパイプやスロープスタイルやビッグエアーなどの演技を競う試合では得点を左右する要因にもなっている。自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。使うのは初めてではなかったものの本格的には未経験だったので、どうなるかと不安が心に過った。使っている間に慣れて来て特に支障はないと感じた。続きを読むJavaScriptの繰り返しボタン:押した回数を数えて実行結果を元に戻すプログラムサイトのボタンはHTMLのinputやbuttonとJavaScriptのonclickを組み合わせて実装できる。後者のプログラムが前者を押して発動するようになる。使い易くて良いと思った。2015プロフィール結城永人Japan二十代前半から作家活動を天職に励んで来ました。当初は小説家を志望していましたが、しかし十数年を経て作詩する機会も増すほどに詩人こそ素性だと考えるに至りました。以降、個人的に永遠を歌う生き方として自分の中で最も重要な位置を占めています。