focus-within疑似クラス

CSS Selectors Level 4(Editor’s Draft, 16 June 2017) :focus-within 擬似クラスというのがある。Firefox52以上とSafari10.1以上、iOS Safari10.3以上で実装されている(Can I use... Support tables for HTML5, CSS3, etc)。

:focus-within は、

  • :focus が適用される要素
  • :focus が適用される要素を子孫に持つ要素

にマッチする要素に適用される。

以下は、:focus-within - CSS | MDNのデモのスクリーンショットとそのコードを一部抜粋したもの。

f:id:maiha2:20170704125729g:plain

<div class="name-container">
  <label for="given_name">
    Given Name:
    <input id="given_name" type="text">
  </label>
  <label for="family_name">
    Family Name:
    <input id="family_name" type="text">
  </label>
</div>
.name-container { 
  padding: 4px; 
}

.name-container:focus-within {
  background: yellow;
}

input { 
  margin: 4px; 
}

便利そうだけどデモのようなフォーム以外に活用するシーンが考えられなかった。:focus-withinを使ってドロップダウンメニューをつくるというのをそろそろ使える :focus-within 疑似クラス | 富永日記帳などで見たが、アクセシビリティ(WAI-ARIA)のことを考えると実際のウェブサイトで利用するのは難しいなあと思った(リンク先の記事にもそのようなことが書いてある)。

ウェブサイトのフォームを実装するときには活用したい。おわり。

区分分断の変換規則(2017/4/25 追記アリ)

書こうと思ってだいぶ月日が流れてしまったけどメモ。

Firefox52CSS Text Module Level3の区分分断の変換規則が実装された。原文でいうとSegment Break Transformation Rulesというやつ。

f:id:maiha2:20170410031618p:plain

こういう表示をしようとして、HTMLを書いたとき

<p>
  庭には
  二羽
  にわとりがいる。
</p>

要素の中で改行すると、ブラウザの表示では改行の箇所にスペースが挿入されてしまう。

f:id:maiha2:20170410015713p:plain

こんな感じに。 これが、例えば英語で

<p>
  The quick brown fox jumped over the
  lazy dogs.
</p>

としたときには the のあとの改行の箇所にスペースが入らない場合、改行の前後の thelazy がくっついて The quick brown fox jumped over thelazy dogs. となってしまうため、要素の中の改行にはスペースが入るのが適切となる。言語によってスペースが入ったほうがよかったりそうでなかったりするのだ。

それについて、区分分断の変換規則という仕様がある。その仕様では、white-space の値が normalnowrap のとき

区分分断は縮約可能になる。 そのような区分分断は、それらのうち連続するものは,スペース同様に 1 個のそれに縮約した上で、前後の文脈に依存して,それぞれが 1 個のスペース( U+0020)に変換されるか, または除去される:

とされている。そして、区分分断の直前、直後の文字が

両文字とも、東アジア圏の字幅プロパティ [UAX11] は [ F, W, H ( A ではない) ]のいずれかであって,かつハングルでない

の場合は、区分分断が除去されるという仕様だ。東アジア圏の字幅プロパティとはUAX11で定義されている字幅についてのプロパティで、日本語の全角文字、半角カナ文字、記号文字の字幅プロパティは前述の

[ F, W, H ( A ではない) ]

に該当する。東アジア圏の字幅については、東アジアの文字幅 - Wikipedia がわかりやすい。

F(Fullwidth; 全角)- 互換分解特性 を持つ互換文字。文字の名前に “FULLWIDTH” を含む。いわゆる全角英数など。
H(Halfwidth; 半角)- 互換分解特性 を持つ互換文字。文字の名前に “HALFWIDTH” を含む。いわゆる半角カナなど。
W(Wide; 広)- 上記以外の文字で、従来文字コードではいわゆる全角であったもの。漢字や仮名文字、東アジアの組版にしか使われない記述記号(たとえば句読点)など。
Na(Narrow; 狭)- 上記以外の文字で、従来文字コードでは対応するいわゆる全角の文字が存在したもの。いわゆる半角英数など。
A(Ambiguous; 曖昧)- 文脈によって文字幅が異なる文字。東アジアの組版とそれ以外の組版の両方に出現し、東アジアの従来文字コードではいわゆる全角として扱われることがある。ギリシア文字やキリル文字など。
N(Neutral; 中立)- 上記のいずれにも属さない文字。東アジアの組版には通常出現せず、全角でも半角でもない。アラビア文字など。 UAX#11では、これらの特性を次のように解釈することを推奨している。

よって、さっきの

<p>
  庭には
  二羽
  にわとりがいる。
</p>

は、この仕様が実装されたFirefox52では

f:id:maiha2:20170410031618p:plain

のように、スペースが挿入されず区分分断が除去される表示となった。


という記事を書こうとしたのだが、この仕様には

注記: これらの検査に入る前に、 分断 の後【直前/直後】のタブやスペースは,空白処理規則【前節】により すでに除去されていることに注意。

というNote(注記)がある。空白処理規則についての細かい仕様については省略するが、区分分断の変換規則が適用される以前に、空白処理規則によって white-spacenormalnowrappre-line のときに区分分断の直前と直後の空白(スペース U+0020 とタブ U+0009)は除去されることになっている。

<p>
  庭には
  二羽
  にわとりがいる。
</p>

となっている場合の表示は

f:id:maiha2:20170410031618p:plain

こうなるはずだった。

【2014年4月25日追記】2017年4月19日に正式リリースされたFirefox53で下記のバグは修正されました。

しかし、この仕様が実装されたFirefox52でこれを表示させても

f:id:maiha2:20170410015713p:plain

こう表示されてしまう。

<p>
  庭には
二羽
にわとりがいる
</p>

このように、1つめの改行以降のインデントのスペースを削除すると

f:id:maiha2:20170410031618p:plain

この表示になる。区分分断の変換規則を適用する前の、空白処理規則による空白の除去がされていないのだろうか。

調べてみるとこれはバグだった。

1316482 - Whitespace around the segment break should be removed before segment break transformation

英語が不自由なので正確に読み取ることができなかったが、上記のバグはFirefox 53で修正されるらしい。Firefox 53からは、仕様どおりに

f:id:maiha2:20170410031618p:plain

このように表示されるようになる予定だ。他のブラウザにも早く実装されるといい。

https://jsfiddle.net/zs06w8xf/1/

スペシャルサンクス

@ub_pnrさん、@myakuraさん、ご協力いただきましてありがとうございました!

参考

技術書展2に行ったよ

f:id:maiha2:20170409234152j:plain

今日アキバスクエアで開催された技術書展2に行ってきた。見物に行くくらいの気持ちだったので、混雑を避けて15時頃に会場へ向かった。

 

f:id:maiha2:20170409232926j:plain

開場〜昼過ぎまでは入場規制がかかっていたようだが、私たちが到着した時間にはスムーズに入場することができるほどになっていた。

会場を大雑把に計4巡ほどした。1巡目ではブースによっては人が溜まっていてよく見ることができなかったので、通路から見える範囲でぱっと見て回った。2巡目で知り合いのブースを探し挨拶しつつ購入。完売して片付けが済んでいるブースもちらほら。3巡する頃には人がだいぶ減ってきていたので1、2巡目で見られなかったブースを見て面白そうな本を買ったりした。仕上げに全体をぐるっとまわって、会場を出た。

 ブースの配置はジャンルごとや言語ごとに分けているわけではないように見えた。まとまっているほうがわかりやすい気がしたが、会場がそこまで広いわけではないのであまり気にならなかった。

 

完売しているもので気になるものもあったので、他の機会でまた出会えるようにサークルや著者のツイッターアカウント等が記載された名刺や簡単なフライヤーをいただけるととてもよいだろうなと思った。付箋にツイッターアカウントを書いたメモ的なものを渡してくれるだけでもありがたい。そういったものを配ってる人はあまりいなかった気がする。

興味や知識がないジャンルのものでも、技術の解説ではなく、「技術を使って○○した」的なテーマのものは手に取りやすかった。

 

 浅草橋で日本一うまいミートソースを食べて帰路についた🍝

f:id:maiha2:20170409234440j:plain

参加者の皆さんおつかれさまでした。あまり買わなかったけど次回以降は資金を用意して買い込んだりしたい。サークル参加もしてみたい。

 

終わり。

 

0泊2日フルレンタル前提でスノボに行くときの持ち物

東武トップツアーズで、スノーパル23:55(http://tobutoptours.jp/ski_snowboard/snowpal/ )というプランに申し込んだ。金曜の深夜に都内を出発〜翌日土曜の朝スキー場に到着。朝食取って、スノボした。16時頃にスキー場を出発〜20時半頃に都内へ帰ってきた。

来シーズン用に持ち物のメモをしておく。ボード、ウェアなどスノボ用品は全てレンタルを利用。

持ち物

  • ニット帽
  • 靴下(今日買う)
  • タイツ
  • ネックウォーマー
  • 日焼け止め
  • マスク(UVカット加工のフェイスマスクが欲しい)
  • モバイルバッテリー
  • 充電用ケーブル類
  • ブランケット(移動の電車・バスで使う)

移動前に買うもの

  • ビール
  • おつまみ
  • ポケットティシュ
  • ウェットティッシュ

これで問題なかった。シーズン終盤でほぼ春の気候だったので重装備で滑ってたら暑かった。ゲレンデはすごい空いていたので滑りよかった。

おいしかった中本限定メニュー【北極系以外】

これは蒙古タンメン中本 アドベントカレンダー 2016 18日目の記事です。

私が今年蒙古タンメン中本で食べた限定メニューの中で、「北極の○○」以外のメニューでおいしかったものを紹介します。

黒鬼

f:id:maiha2:20161219024159j:plain

黒鬼(辛さ5倍 麺1/4 味玉スラ玉)吉祥寺店で食べました。

蒙古麻婆とも樺太麻婆ともちがう麻婆が麺にかかったメニューです。中本の麻婆は、蒙古も樺太もいわゆる麻婆豆腐とはまったく異なる味わいのものですが、黒鬼は一般的な麻婆豆腐の風味があるような気がします。中本をしっかり味わえるおいしい麻婆豆腐でした。めちゃめちゃうまい。また食べたいです。食べに行った日はiPhoneを家に忘れたので食べたあとはハモニカ横丁で飲みながらDSで遊びました。写真は撮ってもらったもの。

冷し味噌冷麺

f:id:maiha2:20161219024858j:plain

冷し味噌冷麺(麺1/4 スラ玉)目黒店で食べました。

ヒヤミスープの冷やし中華的なメニューです。ヒヤミの味はほぼしませんし、個人的には全く辛みも感じなかったのですが、とってもおいしいです。麺もキリっと冷えててちゅるっとすすって夏の暑い日にぴったりでした。トッピングされている鶏のチャーシューっぽい肉と、辛いネギがよくあう。非辛メニュー(だと個人的には思っている)でリピートしたいメニューに出会えるとは思っていませんでした。限定メニューのうえトッピングが多いため、店員さんが不慣れの場合、トッピングをのせ忘れられてしまうことがあるかもしれません。

辛くないとか非辛とか書きましたが中本の道情報だと辛さ8なのでどうだかわかりません。

冷味中華

f:id:maiha2:20161219025733j:plain

冷味中華(麺1/4 かため スラ玉)西池袋店で食べました。

亀戸店の辛華丼の麺バージョンっぽいメニュー。冷味丼の餡と中華丼の餡が半分ずつ麺にかかっています。中本の中華丼の餡?具?が予想を超えるうまさで麺にもめちゃくちゃ合う&絡む最高の組み合わせでした。これも辛くなかったけどまた食べたいです。西池で食べた限定の中で一番好き。


f:id:maiha2:20161219032854j:plain

先日、高田馬場店へチャンタン麺を食べに行きました。すごく評判がいいので気になっていたのです。チャンタン麺のスープは野菜と魚介の甘味が強く、中本っぽい味をあまり感じませんでした。おいしかったんですが、食べたあとには北極が恋しくなりました。中本に行ったのに行ってないような、そんな感じ。

今年はあと何種類食べれるかな〜食べ納めは何にしようかな、とか考えています。

蒙古タンメン中本の店舗限定メニュー

これは蒙古タンメン中本アドベントカレンダー2016 11日目の記事です。

今回は、私が食べたことのある店舗限定系メニューについて書きます。蒙古タンメン中本には、一部の店舗のみで販売されているメニューがあります。メインメニューもサイドメニューもありますが、サイドメニューは量が少なく挑戦しやすいので、食べたことのないサイドメニューのある方は見かけたら是非挑戦してほしいです。麺量を減らしてプラス一品サイドメニュー、とかで。

辛やっこ

f:id:maiha2:20161212005422j:plain

目黒店にしかないと思っていたけど、ぐぐったら品川で食べてる人の記事がありました。あったっけ??

冷やし味噌プチスープにねぎと豆腐が入っています。目黒店は冷やし味噌プチスープが辛さ増し不可なので、これも不可です。中本の肉豆腐という感じですごいうまいです。味はヒヤミです。私は毎回ビールを注文するので、ラーメンを待っている間のつまみに最高です。店舗に常備されているもので提供可能な気がするので、なぜ全店でやらないのだろうかと思っています。やってほしい。

吉祥飯RED

f:id:maiha2:20161212010445j:plain   名前の通り吉祥寺店の名物サイドメニューです。たけのことひき肉を炒めたものと、千切りキャベツが乗っています。辛い味付けのものが吉祥飯REDで、辛くないものは吉祥飯です。プチ麻婆丼と同じ器で提供されます。肉まんの具って感じがしますが、おいしいです。

インド定食ほぐチャー

f:id:maiha2:20161212010900j:plain

写真右側がインド定食です。奥にあるのがご飯で、福神漬けがのっています。写真左は冷やし味噌プチスープで、その奥がほぐチャー。

新宿店限定のメニューです。写真のほぐチャーは単品ですが、他に定食と弁当があります。また、写真のインド定食は定食ですが、他に丼と弁当があります。ほぐチャーは、ほぐしたチャーシューときざんだエリンギを北極スープで煮た餡です。インドは日本の欧風カレーという感じです。おいしい。インドを定番のラーメンに加えるアレンジとかしてみたいものです。 

炒飯

f:id:maiha2:20161212011619j:plain

写真は品川店の炒飯ですが、もともとは町田店限定の限定メニューです。品川店でもたまに月替わり限定メニューとして登場します。 品川店でしか食べたことがないのですが、ひきにくと卵とねぎの入ったパラパラしたおいしい炒飯です。月替わり限定登場毎に一度は食べたいような気もします。ハーフがないので(前はあった気がする)量的につらいです。

北極ラーメン 辛さ抑えめ

f:id:maiha2:20161212012158j:plain

渋谷店にあります。写真は、結局辛さが欲しくなって唐辛子をかけた北極ラーメン辛さおさえめです。通称からおさです。北極スープの唐辛子を減らし、ゴマなどが加わった辛さおさえめバージョンです。北極スープがベースではありますが、ゴマのせいか担々麺のスープっぽい雰囲気もあり、北極ラーメンとは全くの別物です。おいしいですが、北極ラーメンを期待して食べると失敗した気分になります。


余談ですが、先週も限定メニューに関する記事を投稿したとおり、今年はかなり限定メニューを食べ歩きました。以前中本に通っていたころは北極ラーメンか冷やし味噌ラーメンしか食べないと決めていたので、近くの行きやすい店舗(その頃は御徒町か亀戸)にしか行きませんでした。限定は邪道だ!と通ぶった(?)こだわりがあったのかもしれないなぁと思います。当時は10代だったからね。

限定メニュー目当てでいろんな店舗に足を運ぶようになり、店舗独自メニューにも出会えましたし、店舗(調理する人)による味(辛さ)の差を感じたりすることができました。よかった。

 

 

穴子寿司

千駄木のお寿司屋さん 乃池の穴子寿司。絶品。

穴子というものはこんなに身に厚みがあったのか。と驚くほど、ボリュームのあるふわふわの身。

店内・土産ともに、2500円也。

f:id:maiha2:20161207150501j:image

普通のお寿司もおいしい。江戸前寿司

f:id:maiha2:20161207150747j:image

 https://tabelog.com/tokyo/A1311/A131106/13003554/

広告を非表示にする