白河ま日記(仮)

あたまわるいぶんしょうかくよ

HTML とか CSS とか。実験とメモ

はてなブログは、DOCUMENT宣言が無いに等しい。いろんな利用者がいろんな書き方使い方をするので、あいまいにしておくのが良いとの判断だろうか? まあいいけど。


ページ内目次にはコレ使えたらいいんだろな、<nav>
て、勝手に消されなかったから使えるってことか。多分。なお、はてなブログの編集機能にある「目次」を使うと、自動で見出しを拾ったリンク付きリストを作ってくれる。作ってくれる……のはありがたいが、全ての見出しを拾うので、目次自体に見出しをつけるといったことがはばかられる。うひ。アクセシビリティの観点では、目次自体に「以下に続くのはこの記事の目次ですよ」ということがわかる見出しはあった方がいいのか無い方がいいのか、はたしてどちらなのだろうか。スクリーンリーダー(画面読み上げソフト)にはそれ自体に見出しを拾う機能があるらしいが。あと、リンクを拾う機能もあるとぼんやり記憶しており、だとすれば次の見出しまですっ飛べるように見出し付きの方がいいのかどうだか。わからん。


キーボードでフォーカス移動させたら、「コメントを書く」が無視されるぞオイィィィ!?

italic体と斜体と

2020年4月22日追加

Firefox 75.0 (現在の最新バージョンらしい) は、デフォルトでは <em> の日本語を斜体にするのか。italic体と斜体は別なのだが、まあこれはいいかもな。そして日本語に限らず右に倒れた文字が隣接する文字にくっつき気味になるのな。これはちょっとマズー。とはいえ昔のブラウザは元々そうだったと記憶している。英文では単語なり熟語なり文章なりを italic体 にしても、隣の文字に被らないもんな。空白あいてるから。いつも Chrome を使っていたので知らなかった。ちょろめさんは英数字の italic体と右隣の日本語の間隔を自動的に調整してくれてたもんな。 間違い。Chromeさんも調整はしてない。

italic体と(斜体と)正体の実験

  • 背景色付きが <em>
  • CSS | letter-spacing: normal;
  • 123四角四面
  • 123四角四面
  • 123四角四
  • 123四角四面
  • 123四角四面
  • 123四角四

ありゃ? 特に問題ない??

italic体と(斜体と)正体の実験 : 2

  • さらに bold にしてみる
  • 123四角四面
  • 123四角四面
  • 123四角四
  • 123四角四面
  • 123四角四面
  • 123四角四

見たところ、Chrome, Edge, IE はそんなでもなかった(キャプチャ無し)。しかし。

italic体と斜体の文字が、その傾きにより右隣りに接近。条件によってはくっつく

結論。Firefoxが顕著。 間違い。濡れ衣。すまぬ。

italic体と(斜体と)正体の実験 : 3

  • 今度は背景色をつける場所を揃えてみる。"em" の箇所は実験2までと同じ
  • あと table 使う意味なかったんで caption を見出しにして解体した。
  • 123四角四面 | em 無し
  • 123四角四面 | 数字のみ em
  • 123四角四面 | 最後の「面」以外は em
  • 123四角四
  • 123四角四
  • 123四角四

これブラウザの問題じゃなさそうだ

2020年4月23日追記

Chrome でも、デザインテーマを変更すると上記キャプチャのようになる場合がある。フォントだ、多分フォントの問題だ。検証は気が向いたら。(そして忘れる)

ブログ版 「GC版PSO 高レベル第3形態マグ育成 plus」 公開

3rd-form-mag.hateblo.jp

まだまだ移行作業中ですが、見切り発車でブログを公開します。

メインである育成手順はPOW型タパスのみ。他はリンク切れ。もし育てたいマグがいましたら、ご希望のマグから先に作業を進めようかと考えています。コメント欄は広告の下にあります。(多分;) 匿名でも書けます。


2020年4月30日追記
一応できた……。全部の育成手順を移行し終わりました。移行作業をミスっていないかチェックをせねば。

続 「GC版PSO 高レベル第3形態マグ育成 plus」について

2020年4月30日追記「一応できた」

まだ確認作業が残っていますが、全ての育成手順を移行し終わりました。

2020年3月26日現在、復活作業中です。

作業中

はてなブログをマグ育成専用ブログとして追加、そちらで旧サイトを再構築中。目途が立ったらこちらからリンクをはります。希望があるマグから先に作業を進めようかと考えています。

考え中

アップローダーに旧サイトデータを丸ごと上げて、ダウンロードしてもらう方法を考え中。利用者さんの端末とブラウザでファイルを開いて使えると思います。

しかし、良いアップローダーを知らないのです(とほほ

「GC版PSO 高レベル第3形態マグ育成 plus」について

http://www1.bbiq.jp/yoruto/mag/index.htmlwww1.bbiq.jp

2019年5月31日 消滅しました

引っ越し先プロバイダの「ホームページ容量貸し」サービス終了をもって、新サイトも消滅。プロバイダが早いうちからサービス終了を知らせていたにもかかわらず、私が気付いたのは消滅後半年以上経った2019年12月。そして2020年3月18日の今頃ここに書いている。我ながらどんくさすぎる。

……もう需要は無いだろうなあ。


2016年5月24日

引っ越し完了。念のため旧サイトの全ページに引っ越しの旨書いとくか……。トップページを通過せずに各ページをご覧になってる方もいらっしゃるかもだし。

2016年6月4日追記:申し遅れましたが、熊本地震の影響で、サイトスペース貸し出し期限とメールアドレスの使用期限が伸びてます。いつまで使えるか、期限はまだ未定のようです。

2016年9月18日追記:しばらく前にプロバイダからお知らせが来ていたのですが、9月末までだそうです。(今頃書くな>自分

2016年10月7日追記:旧サイトスペースが消失済みであることを確認。

2016年5月23日

引っ越し作業中です。サイトスペースが無くなる直前になって慌てています。一年前からきちんと準備をすべきだったのに、今まで何をしていたのか……。

ひとまずご意見ご要望ご叱責などはこちらで受け付けております。

※コメント欄は広告の下にあります。 ※匿名でも書けます。

はてなブログ+Markdown 実験とメモ

記事内見出し見本h1

記事内見出し見本h2

記事内見出し見本h3

記事内見出し見本h4

記事内見出し見本h5
記事内見出し見本h6

記事内部「以外」に使われている箇所

  • h1
    • ブログタイトル
    • 記事タイトル
  • h2
    • ブログタイトル直下の「ブログの説明」
    • カテゴリページ、アーカイブページ、検索ページ

余談:なぜ見出しの頭に「何か」を付けたのか -- 2020年4月追加
それはですね。今まで気分で見出しをつけてきたので、過去の記事でどの見出しを使っているのかよくわかんなくてですね。目印に。(だから何をするというわけでもない)

入れ子はインデントで表現する。タブ1つまたは半角スペース4つで認識する。

IDとそのURLを定義する側は文章のどこかに次の書式で記述する。URLは見やすくするため<...>で囲ってもよい。

Markdown文法まとめ - Qiita より引用


「strong 内の em」と「strong 内の strong」に対してCSS指定してみた。


▼よく忘れる事 ※Markdown

  • 改行は、行末に半角スペースを2個(以上)入れること。<br>でも可
  • 段落を分けるときは1行以上間を空ければよろし

ところで、目次使ってみたらid名が「見出しの日本語のまま」で、どうしたもんか。※1
あと、hr が濃かったり薄かったりするのなんでやねん。

※1. あらかじめ見出しに id ふっとけばOK(無い場合に見出しそのままの文字列になるぽ)-- 2020.4/5追記

xn--lcki7of.jp

HTML5 なら日本語を id に使ってもいいらしい -- 2020.4/19追記


定義リストの記述
HTMLの dl タグをそのまま使う
実験ほああああ!!!!
実験すし
詰め
style