frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

iphoneX実装方法・注意点まとめ html・css

近く実装案件も出てくるであろうiPhone Xの実装方法、注意点の記事をまとめました。
主に表示領域に対して処理を加えなければいけなくなりそうです。

iPhone X の Safari における Web コンテンツの表示

medium.com

<meta name="viewport" content="viewport-fit=cover">

viewport にこの値を設定することで、Safari の表示領域をフルスクリーンに設定できるようになる

constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)
safe-area-inset-*が示すとおり、上述のアプリのタッチイベントを認める領域である Safe Area が Safari の表示領域のどのくらい内側に存在するかを示す値です。

iPhone Xのモックアップ素材まとめ

www.nxworld.net

毎回新しいApple製品が発表された直後から様々なところでモックアップ素材を作成して配布しているのを見かけますが、先日発表されたiPhone Xも既に多数のモックアップ素材が配布されていたので、それらの中から目に付いたものをまとめました。

coliss.com

販売予約は、10月27日からでまだ少し先ですが、一足早く、iPhone XとiOS 11を楽しめるモックアップ素材とUIデザイン素材を紹介します。

iPhone X対応におけるデザイン上の注意ポイント

iPhone X対応におけるデザイン上の注意ポイント | fladdict

画面サイズ
サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。

機能的な対応そのものはautolayoutとかちゃんとやってれば動くだろうけど、UIとしての全体整合性がそろそろ。
どうするか悩ましいけど、市場規模が読めないので、総括としては各プレイヤー最低限の対応で逃げそう。このためiPhone Xのポテンシャルを発揮できるアプリは、体力のあるビッグプレイヤーに制限されそう。

Webサイトデザインを集めたサイト総まとめ 国内・海外・LP・スマートフォン・レスポンシブデザイン

国内Webサイト

Design-trigger

f:id:funclur:20170909131902p:plain
http://alan-trigger.info/

週刊ウェブデザイン

f:id:funclur:20170907233026p:plain
http://www.dailywebdesign.com/

現代デザイン

f:id:funclur:20170909132524p:plain
http://gendaidesign.com/

MUUUUU.ORG

f:id:funclur:20170907232129p:plain
http://muuuuu.org/

後発ならではの見やすさ、使いやすさ、載って嬉しいギャラリーサイトを目指して運営している、非営利目的のWEBデザインポータルサイトです。
情報設計の参考にしやすく、現場レベルでWEBデザイナーが参考にし易いであろう、縦に長くオーソドックスなレイアウトでかつ、非常にデザインが優れたサイトを厳選して掲載しております。

ズロック

f:id:funclur:20170907232651p:plain
http://www.zzrock.net/

遊びにきてくれてありがとう!!!ズロックは日々おもしろいなっと感じた世界中のWebサイトを管理人ゴトウがまとめたWebデザインのリンク集です。

イラストブックマーク

f:id:funclur:20170909134729p:plain
http://www.illustbookmark.info/

straightline bookmark

f:id:funclur:20170907232330p:plain
http://bm.straightline.jp/

WONDER BOOKMARKS

f:id:funclur:20170907232613p:plain
http://bm.wonderboxstudio.com/

優れたWebデザインをカテゴリー、サイトカラー、サイトタイプ別にブックマークしたWebデザイナーの為のWebデザイン・リンク集です。
Web制作を生業としています私自身が普段から様々なWebサイトを参考としており、自身の学習の意味も込めてこのサイトを立ち上げました。様々な方々のWeb制作にほんの少しでもお力添えができましたらとても嬉しく思います。

I/O 3000

f:id:funclur:20170909135826p:plain
http://io3000.com/

I/O 3000は、Webデザインに関わる人のための Webデザインギャラリーサイトです。
国内外を問わず、Web制作の参考となるサイトをセレクトしています。

bookma! v3

f:id:funclur:20170909001711p:plain
https://bookma.org/

81-web.com

f:id:funclur:20170909130822p:plain
http://81-web.com/

当サイトは、Webサイト制作に役立つ優れたデザインのサイトを集めたギャラリー&リンク集です。
サイトドメインの「81-web.com」は、日本の国際電話番号「81」に由来し、国内のサイトのみピックアップし、掲載しております

S5-Style

f:id:funclur:20170907232838p:plain
http://bm.s5-style.com/

カテゴリー、タグで絞り込み。AND検索とOR検索も可能なので目的のサイトをすばやく検索できます。
お気に入りのサイトを一時的に保存。保存したサイトリストはメーラーに貼付けることもできます。表示形式や背景色をカスタム可能。
視覚的に安定して探せるグレーや、サムネイルが引き締まるブラックなど好みに合わせて変更できます。

イイネ!WEBデザイン

f:id:funclur:20170909131944p:plain
http://www.ene-design.com/

Artnoc

f:id:funclur:20170909131705p:plain
http://art-noc.com/

ARTNOC.COMは、クリエイティブなWebデザインをサイトタイプ・業種タイプ・カラータイプ・レイアウトタイプ・視覚効果といった要素で分類し、データベース化した、Webデザインのギャラリーサイトです。
ARTNOC.COMでは有名・無名に関わらず、”クリエイティブでクオリティの高いWebデザインを紹介しています。

f:id:funclur:20170909131647p:plain
http://japan.2-wg.com/

web selection

f:id:funclur:20170909130712p:plain
http://web-selection.com/

ウェブセレクションではかっこいいサイト・きれいなサイト・使いやすいサイト等々、Webデザインの際に参考になるサイトを集めてます。ホームページ制作のお供にどうぞ。

WPデザインギャラリー

f:id:funclur:20170909130652p:plain
http://wpgallery.kachibito.net/

WebDesignClip

f:id:funclur:20170909130602p:plain
http://www.webdesignclip.com/

Web Design Clipは、WEBデザイン制作において、Webデザイナー・開発の方々などのインスピレーションを刺激するような日本国内の洗練されたWebサイトや、アイデア・技術に優れたサイトをクリップしています。

Good Design Web

f:id:funclur:20170909141545p:plain
http://gooddesignweb.com/

当サイトでは、デザインされたきれいなWEBサイトを紹介していきたいと思います。ただ、僕の主観でサイト選択しますので、ちょっと偏った選択になるかもしれませんが・・・
ちなみに、僕は素人ですので、素人目線でのサイト選択ということになります。掲載しなかったからといって、そのサイトのデザインがどうこう言う訳ではありません。あくまで、好みなので・・

バンドのWebデザインリンク集

f:id:funclur:20170909134815p:plain
http://banddbm.net/

イケサイ

f:id:funclur:20170909131031p:plain
https://www.ikesai.com/

ikesai.comはWEBデザインに役立つ、いけてるサイト、かっこいいサイト、おしゃれなサイト、クールなサイトなどを勝手にピックアップして掲載しているサイトです。

レスポンシブデザイン

Responsive Web Design JP

f:id:funclur:20170909134644p:plain
http://responsive-jp.com/

スマートフォン

Web Design Clip [S]

f:id:funclur:20170907233339p:plain
http://sp.webdesignclip.com/

iPhoneデザインボックス

f:id:funclur:20170909135046p:plain
http://design.web-hon.com/

LP

Web Design Clip [L]

f:id:funclur:20170907233306p:plain
http://lp.webdesignclip.com/

ランディングページ集めました。

f:id:funclur:20170909144844p:plain
http://lp-web.com/

ランディングページデザインリンク

f:id:funclur:20170909141948p:plain
http://www.landingpage-link.jp/

LANDINGPAGE_DESIGN BOOKMARK_SMARTPHONE

f:id:funclur:20170909145727p:plain
http://smartphone-landingpage.info/

バナー

バナーデザインアーカイブ

f:id:funclur:20170909134922p:plain
http://banner.keizine.net/

レトロバナー

f:id:funclur:20170909134842p:plain
https://retrobanner.net/

バナーデザイン・サンプルデータベース

f:id:funclur:20170909132030p:plain
http://aka-iro.jp/bd/

f:id:funclur:20170909132019p:plain
http://nonamedesign.info/banner/

バナーデザインまとめ。|Banner Matome

f:id:funclur:20170909132008p:plain
http://bannermatome.com/

パーツ

Webデザインの“ブブン”を集めたブブンデザインアーカイブ

f:id:funclur:20170909134955p:plain
http://bubundesignarchive.jp/

www.frontendmemo.xyz

gulpが動かない原因と対処法

先日gulpが動かなくなったのでその対処法の1つをメモしておきます。

発生経緯

webpackをインストールするためnodeとnpmのヴァージョンを下記に上げた。

  • node 6.11.2
  • npm 3.10.10

その後、環境構築済みのgulpを起動したら即強制終了するようになった。

対処法

node_modulesを全て消して、npm installしてgulpタスクを実行
gulp-sassがあーだこーだ言われたので個別で再度インストール。
無事起動し解決した。

nodeとnpmをアップデートさせた影響だと思うが、node_modules直下のディレクトリが大量に出来た。
しかし総フォルダ数は1/7くらいになっていた。

モジュール・コンポーネントを意識したhtml、css設計(後半)

www.frontendmemo.xyz

前回の続きで、モジュール・コンポーネントを意識したhtml、css設計の後半を書きます。

前回は、見出し、リストでしたが今回はリンク、レイアウト、ボックスです。
モジュール・コンポーネントは他にもありますが、この基本の5つを抑えることで応用できるかと思います。

リンクテキスト

リンクを作る時の注意点は以下です。
リンクはa:visited, a:hover, a:focus, a:activeを入れる。指定の順序も←のようにします。

  • visitedは訪問済みか否かをしています。
  • focusはTAB操作などで要素にフォーカスした時の指定です。こちらは通常hoverと同じ値にします。
  • activeはクリックされてから離されるまでの状態です。こちらも通常hoverと同じ値にします。

上記はアクセシビリティの観点からも必須となりますのでリンク要素、ボタン要素には必ず指定します。

See the Pen VzEVPP by funclur (@funclur) on CodePen.


a要素にあてるべきdisplayプロパティ

See the Pen MvxWvQ by funclur (@funclur) on CodePen.

a要素のdisplayプロパティの初期値はinlineです。この場合marginをあてても反映されません。
そこでリンクテキストにdisplay:blockをあてます。

display:blockにすることでmarginは反映されますが、テキストの範囲外(テキストの行)もクリッカブルになっています。
テキストだけをクリック可能にしたいためこのやり方も誤りです。

通常a要素はp要素やli要素で包括すれば、問題ありませんがa要素単体で使用する場合はdisplay: inline-blockをあてればmarginが反映されてテキストだけがクリッカブルになります。

また、ボックス全体をクリッカブルにしたい場合はhtml5ではa要素で包括することができます。その時はwidthを指定してdisplay:blockにします。

単一リンクとリンクリストを作る

リンクテキストは大きく分けて3種類あります。文章中リンクと単一リンクとリンクリストです。
単一のリンクとわかっている場合はp>a、リンクが増える場合はリストになるためul>liで組む必要があります。

See the Pen BdqGdx by funclur (@funclur) on CodePen.


リンクを作る時注意点まとめ

  • a:visited, a:hover, a:focus, a:activeに値をあてる。
  • テキストのリンクにはdisplay: blockを指定しない。逆にパネルリンクなどはa要素で囲みdisplay: blockを指定することも出来る。
  • リストのリンクはliで。ビュレット付きのリンクも折り返し時はビュレットの下に文字が来ないようにします。

レイアウト

いろんな横並びを理解しよう

下記は、float、inline-block、table、flex、gridで横並びにしています。

See the Pen MvzQOr by funclur (@funclur) on CodePen.

各々特徴があり、よくfloatは終わったなんて話も聞きますが、そんなことはなくそれぞれの特性や対応ブラウザを理解して使うことが重要です。

各々の特徴

float

レガシーブラウザも網羅している定番の横並びプロパティです。
clear:fixをする必要があります。

inline-block

親要素にfont-size:0を指定しないと横並びにした要素の間に余計な空きが出来てしまう。個人的にはテキストブロックを横並びにしたい時に使用する時があります。

table

float:に変わってdisplay:tableが使われることが多くなりました。しかし、マージンを空けることが思うようにいかなかったり下記のように1行にしか並ばないので複数行にする場合親で区切るしかなかったり運用性は悪くなります。

float

<ul>
<li></li>
<li></li>
</ul>

table

<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>

そのため、グローバルナビなどの1行の横並びに有用です。

flex

display:flexは横並びにするための様々なオプション(プロパティと値)が多数用意されています。

www.frontendmemo.xyz

使用する時は対応ブラウザはチェックしておきましょう。
http://caniuse.com/#search=flex

grid

最新のレイアウト手法がgridです。
横並びと言うより全体のレイアウトを組む時に検討価値があります。
自分も仕事ではまだ使用したことがありません。
http://caniuse.com/#search=grid

左右のマージン、上下のマージンを打ち消す

横並びの要素にマージンをあてる場合最初か最後の要素のマージンを打ち消す必要があります。first-childやlast-child、nth-childで消すことも可能ですが、下記のやり方がおすすめです。

See the Pen vJvBJq by funclur (@funclur) on CodePen.

親の要素に下と左にネガティブマージンをあて、子要素の下と左にマージンをあてます。そうすることでカラム数に限定しないマージンの打ち消しが可能です。

ボックス

  • 最初のマージントップを消す
  • テキストはp
  • ボックスサイジングを理解しよう

悪い例

See the Pen brOqmP by funclur (@funclur) on CodePen.

上記は1個目がマージントップで空きを統一した場合にできる余分な余白のボックスです。
2個目がマージンボトムで空きを統一した場合にできる余分な余白のボックスです。
この余分な余白を消してみましょう。

良い例

See the Pen vJvxMV by funclur (@funclur) on CodePen.


box-sizingを理解しよう

box-sizingは幅をpaddingを足した分として出さなくて良くなった革新的なプロパティです。

See the Pen MvZmWb by funclur (@funclur) on CodePen.

上記から分かるようにbox-sizing: border-box;は大変便利ですね。
そのため昨今のサイトでは全称セレクタにbox-sizing: border-box;指定したりします。

*, *::before, *::after {
    box-sizing: border-box;
}

では、もう1つの値であるbox-sizing: content-box;は使わないのかと言うとそうではありません。
レスポンシブデザインの構造部分でよく使用します。

See the Pen dzwWoq by funclur (@funclur) on CodePen.

幅が広いためcodepenのロゴをクリックして開発ツールで幅をご確認ください。

例えばコンテンツ幅が1000pxにしたいとします。
レスポンシブデザインの場合、ウィンドウ幅1000px以下だった場合のことも考えるためwidthではなくmax-width:1000pxにします。

しかしそれだけだとテキストなどが幅いっぱいに広がりますので、paddingを使用します。ここでbox-sizing: border-boxを使用していた場合1000 - 60の940pxがコンテンツ幅になってしまうため1000pxのコンテンツが実現されていません。

content-boxをあてる、またはpadding60pxを足した1060pxを使う必要があります。

まとめ

以上で、モジュール・コンポーネントを意識したhtml、css設計の後半でした。
全てサイトを構築する上でよく使用されるモジュール・コンポーネントです。

一つ一つ正しく理解しましょう。

www.frontendmemo.xyz

モジュール・コンポーネントを意識したhtml、css設計(前半)

kojikaさんのブログでcss設計についての記事を読みました。その中では命名規則やセレクタではなく宣言(プロパティと値)について書かれてました。とても詳細に丁寧に書かれていますが、ご本人がおっしゃるように他にも運用性・保守性のある宣言の書き方はあるのでそれも含めて普段自分が意識しているモジュール・コンポーネントを意識したhtml、css設計を書いてみます。

宣言ブロックのCSS設計|Web Design KOJIKA17

運用・保守性を上げるモジュール・コンポーネントとは?

運用・保守性を上げるモジュール・コンポーネントとは以下の3つが達成できていることです。

  • 文言量が増えたり、逆に要素をなくしても崩れない

運用していると色々なパターンが起こりうります。ブラウザに表示している時は、崩れていなくても文言の増減であったり要素の追加・削除などで崩れるソースで組まないことが重要となります。

  • 使いまわせる

使いまわせるモジュール・コンポーネントを意識することが重要です。webページはヘッダー、サイド、フッターの構造部分と見出しなど繰り返して使うパーツに分けられます。このパーツを汎用性のあるモジュール・コンポーネントにすることが重要です。例えば、モジュールを組み合わせた時に意図しない空きが出来るなどは防がなければいけません。

  • ルール付け

命名規則や格納ルールなど、ルールがあいまいだと一気にサイトは崩壊します。また、長く運用していると更新者が変わり受け継がれなくなることもあります。設計時にしかっりしたルール付けと引継ぎの為のwikiやコーディングスタイルガイドを作成する必要があります。

上マージンか下マージンか 上マージンを勧める理由

モジュールの前にマージンの話をします。
上マージンか下マージンかを実装を始める前に決めることは重要です。
途中でルールがぶれないように慎重に選定しましょう。

上マージンとは?

統一して要素に対してmargin-topを当てます。
例外以外はmargin-bottomを当てないようにします。

See the Pen GvxOjK by funclur (@funclur) on CodePen.


マージンの打ち消し

空きを上マージンとした場合最初の要素も不必要に上に空きが出来てしまいますね。
その為コンテンツ内の最初の要素はマージンを打ち消します。

.heading:first-child {
  margin-top: 0;
}
#contents > *:first-child {
  margin-top: 0;
}

下マージンとは?

統一して要素に対してmargin-bottomを当てます。
例外以外はmargin-topを当てないようにします。

See the Pen JyLOEm by funclur (@funclur) on CodePen.


マージンの打ち消し

空きを上マージンとした場合コンテンツ内最後の要素も不必要に上に空きが出来てしまいますね。
その為コンテンツ内の最後の要素はマージンを打ち消します。

#contents > *:last-child {
  margin-bottom: 0;
}

ところがボックス内のマージンも最後の要素の下に余分な空きが出来ています。こちらも消す必要があります。

.box > * {
  margin-bottom: 0;
}
.box2 > * {
  margin-bottom: 0;
}

このように下マージンの方が打消しが多くなります。
上記で考えればまだ3つ済んでいますが、ボックスのモジュールが増えれば増えるほど打ち消しは増えます。
そうすると抜け漏れが増える原因にもなりますね。

line-heightを考慮したマージンに設定するか

マージンを設定する時、ボックス同士であればそのままのマージン値が反映されますが、テキストとボックス、テキストとテキストであればline-height(行間)が加算されます。
下記がその例です。

See the Pen eErzpR by funclur (@funclur) on CodePen.

1.がボックスとボックスのマージン、2.がボックスとテキストのマージン、3ががボックスとテキストの調整したマージンです。
1と2はmargin-topを20pxにしていますが、3は以下の計算から割り出した値13pxを当てています。
興味がある方が参考にしてください。

www.frontendmemo.xyz

line-heightは考慮すべき?

デザイナーが別の人であればその行間を考慮したマージンなのかを協議する必要があります。
そうでないとこんなに空く想定じゃないと思われてしまいます。先に説明しておく方がよいです。
上記記事でも書きましたが文字サイズが変わると行間(行間は単位を書かない)も変わるため完璧にするのは非常に困難ですし、そこまでする必要は個人的にないと思っています。大事なのは知った上で、対応できるできないを判断することです。

見出し

ここからモジュール・コンポーネントです。

この見出し、何が問題かわかりますか。
codepen右上のロゴをクリックして別ウィンドウで確認してみてください。

See the Pen NvzPWd by funclur (@funclur) on CodePen.

折り返しても崩れないようにする

見出しでよくある失敗が折り返した場合が考えられてないことです。

昨今私自身はレスポンシブデザインで作るサイトがほとんどです。レスポンシブデザインでなくてもですが見出しが折り返すことは運用していって十分考えられることです。

上記例はborder-leftがpxで指定されている為、2行になったとき伸びません。
その為%で指定する必要があります。

See the Pen LjrqKj by funclur (@funclur) on CodePen.


line-height

また、bodyにline-heightを指定しても見出しはpx数が大きくなるので行間が意図したものと違う場合があります。
そこも確認して必要に応じて見出しにline-heightを指定しましょう。

装飾は出来る限りcssで対応

見出しは昨今装飾が入ることが多いですがほとんどがcssで対応できるものです。
出来るだけcssで対応しましょう。

見出しを作成する時の注意点まとめ
  • 折り返しても崩れない
  • line-hightを指定する
  • 装飾は出来る限りcssで対応

リスト

デフォルトのビュレット(・)を消して、色のついたビュレットを実現したい時のソースになります。

こちらは何が問題でしょうか。

See the Pen EvRrqN by funclur (@funclur) on CodePen.


折り返した時ビュレットの下にテキストが来ないようにする

見出しと同じで改行が考えられていません。

改行した場合ビュレット(・)の下に文言が来ないようにスタイルを当てる必要があります。

See the Pen LjBmLq by funclur (@funclur) on CodePen.

違いは下記です。

ビュレットの下にテキストが来る
ul > li {
    padding-left: 15px;
    margin-top: 5px;
}
li::before {
  content: "";
  background: blue;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
ビュレットの下にテキストが来ない
ul > li {
    padding-left: 15px;
    margin-top: 5px;
    position: relative;
}
li::before {
  content: "";
  background: blue;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: absolute;
  left: 0;
  top: 7px;
}

display: inline-block;で位置するのではなく、absoluteで絶対配置させることがポイントです。

ol、ulの違い

olとulの違いは皆さんお分かりでしょうか。

下記はol、ulどちらでしょう。

大事なことリスト

  • 1.折り返しても崩れない
  • 2.装飾は出来る限りcssで対応
  • 3.line-hightを指定する


数字がつく場合はolと思っている方もいるかもしれません。

これはulです。数字がついていますが単純に3つ上げているだけです。
olは数字がつくリストではなく、順序のあるリストを表示する際に使用します。

例えば下記はolの正しい使用例です。

カップラーメン作り方の手順

  • 1.お湯を沸かす
  • 2.蓋を開け注ぐ
  • 3.3分待つ

この場合順序を変えられないですよね。順序のリストかどうか迷う場合は順序を変えてみて意味が通るかを考えると良いです。
このように文書構造や文脈を考慮してマークアップすることをセマンティックと言います。

セマンティック:
一般的には「意味」や「意味論」に関することを指す語である。IT用語としては、コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語である。

入れ子

リストは入れ子が発生しうるモジュールです。
リストには通常のリスト、順序リスト、注釈リスト、記述リストなど様々なリストがありますが、それら全てを入れ子にして余分なマージンがあったりなさ過ぎたりをテストしてみることをオススメします。
例えば入れ子が考えられてないリストモジュールは以下のような例です。

See the Pen RZJdLq by funclur (@funclur) on CodePen.

olの左が空き過ぎています。入れ子のolにpadding-left:20px;を当てると調度良くマージンが空くはずです。

リストを作成する時の注意点まとめ
  • 改行
  • ol、ulの違いを意識
  • 入れ子でも崩れない

まとめ

以上モジュール・コンポーネントを意識したhtml、css設計前半でした。
後半は来週書く予定です。

www.frontendmemo.xyz

android端末でfocusが外れない場合の対処法

なかなか遭遇しないバグだと思うのですが、念のためmemoします。

エラー発生条件・環境

android5を使用。カルーセルのサムネイルをタップしてから、スワイプする。

エラーの状態

スワイプ後もタップしたサムネイルからフォーカスが外れず、スワイプした画像のサムネイルもフォーカスした状態。

対処法

jsでフォーカスを外す カレントにフォーカスさせる

タップ、スワイプしたサムネイルはclassを付与しcssを当てているので本来jsでフォーカスを外す、フォーカスさせる処理を書く必要なありません。
jsで処理する場合は下記のようにします。

<ul>
    <li><button>1</button></li>
    <li><button>2</button></li>
    <li><button>3</button></li>
    <li><button>4</button></li>
</ul>
$('li button').blur();
var len = $('li').length;
for(var i = 0; i < len; i++){
    if($('li').eq(i).hasClass('current')){
        $('li').eq(i).find('li button').focus();
    }
}

ただこちらだけではフォーカスは外れているはず(オレンジの枠は移動している)なのに:focusで指定したスタイルが効いてしまっている状態でした。

cssのfocusを消す
&:hover, &:active, &:focus {
    //focus後のスタイル
}

要はタップした時のフォーカスのスタイルがずっと効いている状態(他の要素をタップするまで)になっているため、
cssで指定した擬似セレクタの:focusの指定を消しました。

レスポンシブデザインであればPCでは上記を指定し、スマートフォン幅で効かなくなるようメディアクエリを設定するとよいです。

www.frontendmemo.xyz

意外と知られていない!?dlの直下にdivを置いてもOK!

質問サイトにもdl要素の直下にはdt、dd以外置いていけないという答えで終わっており意外と知られていないかもしれません。

MDNのdl要素のページでも下記のように記しています。

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

WHATWG HTMLは

要素の
要素に各名前 - 値グループをラップできます。これは、マイクロデータを使用する場合、またはグローバル属性がグループ全体に適用される場合、またはスタイリングの目的に役立ちます。

つまりCSSでスタイリングする目的でdivを挟むことに問題はありません。

ulはliしか直下に置けないですが、dlに関してはバリデータエラーが出ないことが確認できると思います。

dt ddをdisplay:flexで横並びにする

floatからflexへ移行してる流れでdtddは未だにfloatで横並びにしている人も多いと思います。
もちろんそれが悪い訳ではありません。選択肢を増やすことをこの記事では紹介したいと思います。

See the Pen Yxxbyz by funclur (@funclur) on CodePen.

一つ目は、dtにclearプロパティを指定し、floatを解除しています。dlの::after要素にもclearfixが必要ですね。

二つ目が、div要素を挟みdivにdisplay:flexを指定するだけです。

htmlは記述が増えますが、cssはプロパティ1つでdt,ddを横並びにすることができました。

dlのスタイリングにdt,ddだけでは要素が足りない場合は遠慮なくdivを挟みましょう!