ピクスクの主催者が作るページについて
一般的なHTMLのコーディングと異なったので忘備録です。2022/05/07時点の情報です・
(大前提)ウェブブラウザツールのコード表示機能ではHTMLの装飾コードは見えない
最初戸惑ったところはここです。CSSやstyleタグを使った装飾がされているので、確認したしたらそれぞれの装飾が見えると思ったのですが、文字だけの表示になります。
イベント管理者画面で説明書きを記載後、どこかでCSS部分を吸収しているのかな?と思いました。(フロントはド素人なのでわかりません)
ですので、過去のイベントサイトの書き方からノウハウを見つけるのは難しそうだと思いました。
改行は改行タグとして認識されるし、URLには自動的にaタグが付与される。
改行は改行タグとして認識されるため、何も考えずに改行すると空白ができ間延びしたサイトとなります。
空白空行もそのまま表示されます。URLには自動的に付与されるので、別窓表示のリンクに対しては特段なにかする必要はないです。
タブは認識されない。
タブによる空白は認識されませんでした。
ここまで自分で検証して、かなり独自の仕様だと思い、先人の知恵をお借りして作成しました。
先人の教えに乗っ取りHTMLはスタイルで逐次指定して作成しました。
ほんとにお世話になりました。
himarepo.blog.fc2.com
<div style="height: 13px;"><span style="background: #fae06a; padding: 8px 10px; border-radius: 10px; color: #0e536d; font-weight: bold; margin-left: 10px;">イベントページ</span> </div><div style="background-color:#ffffff;padding: 20px 10px 10px; border: 3px solid #f6b7aa;"> ほげほげ </div>
自分が作成したときの環境
VScodeでHTML周りの拡張機能を導入し、マルチタイムプレビューで確認し、ピクスクでイベントページを反映して確認という流れで作成しました。
空白は認識されるのでタブでインデントを整えながら作業。
が前まで使えていたものが使えなくなったりし、ピクスクは頻繁に仕様が裏側で変わっている気がします。
marketplace.visualstudio.com
