神プラグイン「ShortcodesUltimate」様で一番使わせていただいている「スポイラー(アコーディオン)」を自作してみようというプロジェクト。今回は準備編です。
続きは「実装編」で
目次(クリックでジャンプ)
全体的な注意
inputかlabelかのテーマのCSSでのスペースの設定が原因だと思うが、予期せぬスペースがたくさん発生する。
原因が特定できないものは、マージンをマイナスに設定して体裁を整えているので、他のテーマに移すときは注意
試作その1
「コビトブログ2」様を参考に
inputタイプは「checkbox」
サイズ感が今ひとつだが、作動している(2019/5/6)
試作その2
超有名サイト「サルワカ様」を参考に
編集画面では作動するが、ブラウザでは作動しなかったが、セレクタを「+」(隣接)から「~」(後方)にしたら作動した
試作その3
「Copypet」様のアコーディオンを参考に。2020現在一番感触が良い
inputのタイプは「checkbox」
ブラウザだと間が開いてるが、ちゃんと作動している(2019/5/6)
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
テキストテキストテキスト
テキストテキストテキストテキストテキスト
テキスト
テキスト
単独版(スポイラー)への改造
単独版に改造してみる。idが上のアイテムと被らないようにを変えないとダメなようだ。タイトル(ラベル)のCSSでpositionをabsolute、topとleftを0に設定したらピッタリおさまった。
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
実装の目処が立ったので、この続きは「実装編」で。
テキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
参考:その4(htmlのみ! detailタグを使用)
「Webクリエイターボックス」様を参考に。
注意：主要ブラウザのうち、IEとEdgeが対応していない。
基本形の<detail>(全体)と<summary>(タイトル)にstyleでボーダー・背景色・パディング・マージンを設定。CSSはポインターの変更とアウトラインの非表示のみで、設定しなくても動作には支障がない。
解答を表示
画像編集ソフト。写真やイラスト、3Dアートワークの作成、webサイトやモバイルアプリのデザイン、動画編集や描画などはPhotoshopで。
全体と本文段落にCSSでスタイルを設定
解答を表示
画像編集ソフト。写真やイラスト、3Dアートワークの作成、webサイトやモバイルアプリのデザイン、動画編集や描画などはPhotoshopで。
階層型もできる？
解答を表示
解答を表示
画像編集ソフト。写真やイラスト、3Dアートワークの作成、webサイトやモバイルアプリのデザイン、動画編集や描画などはPhotoshopで。
解答を表示
画像編集ソフト。写真やイラスト、3Dアートワークの作成、webサイトやモバイルアプリのデザイン、動画編集や描画などはPhotoshopで。
detailタグはedgeが対応していないので、対応させるための方法をググったら出てきたのが「detail polyfill」というもの
できるだけ早く実装してみよう
その5：idとforを使わない版を作る！
試作・学習中…無理ぽ？