- 投稿日：2019-11-01T23:42:20+09:00
HTML付近のあれこれ
HTML付近のあれこれ
HTMLやCSSなどの勉強していて，「あれ？これどうするんだっけ」と思ったところがあった。そういうものをメモ程度にまとめていく。
目次
HTMLとCSS
1. position
2. ol, ul, dl
3. px, %, em, rem
4. PNG, JPEG
5. font-family
6. margin, padding
7. float
8. 命名規則SEO対策
1. div, 構造化タグ
2. レスポンシブ
3. JavaScriptやCSSをHTMLから呼び出すツール
参考
HTMLとCSS
1. position
positionのプロパティ
- static
- 初期値。
- fixed
- 画面の決まった位置に固定。
- absolute
- 親要素を基準に絶対的な位置を決定。
- relative
- 現在の位置を基準に相対的な位置を決定。
よく使うのは，absoluteとrelativeの2つ。
absoluteとrelativeの用途
- 画像の上にテキスト，別の画像を重ねておきたいとき。
2. ol, ul, dl
リストと聞いたら，この3つが思い浮かぶ。
ol（ordered listの略）の用途
- 何かの操作手順。
- パンくずリスト。
ul（unordered listの略）の用途
- グローバルナビゲーション。
- ローカルナビゲーション。
- 順序関係なく列挙したい項目。
- 例えば，注意事項。
dl（definition listの略）
- 入力フォーム。
- 例えば，問い合わせフォーム。
<!--問い合わせフォームで使用する例--> <dl> <dt>氏名<dt> <dd>kotti</dd> </dl>この3つは略称ではなく，正式名称で覚えておくと，どれを使ったらいいかすぐに思い出せるかも。
3. px, %, em, rem
サイズの絶対指定
- px
- ブラウザや端末に依存せず，フォントサイズを指定できる。
サイズの相対指定
- %
- 親タグのフォントサイズと比較したときのサイズを指定できる。
- em
- %と同じ意味。
- 書き方が違うだけ。1emは100%と同じ意味。
- rem
- 基準としているものが，ルート要素。
- あんまり使わない印象。
4. PNG, JPEG
- 塗りつぶしの多い画像（イラスト系など）はPNG。
- 複雑な画像（写真系など）はJPEG。
5. font-family
- Webページ全体の文字に対してまとめて適用するため，bodyをセレクタとして指定する。
6. margin, padding
- ブラウザ依存で，文字などの位置が変わらないように両方0に指定する。
h1を例にするなら，下記のように書く。
h1 { margin: 0; padding: 0; }
- HTMLタグは，ボックスで成り立っており，content, padding, border, marginの4構成。
- paddigはボックス内で位置調整のために使用。
- marginはボックス間の位置調整のために使用。
7. float
test.html<!Doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>position</title> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div class="box1"> <p>box1</p> </div> <div class="box2"> <p>box2</p> </div> <div class="box3"> <p>box3</p> </div> <div class="box4"> <p>box4</p> </div> </body> </html>test.cssは，test.htmlと同階層に保存。
test.css@charset "UTF-8"; .box1 { background: red; } .box2 { background: blue; } .box3 { background: green; } .box4 { background: pink; }htmlファイルを開くとこんな感じ↓
box2とbox3を横並びにするために，
floatを使う。
具体的に，下記のように記述（変更した箇所のみ記述）。test.html<!--box2とbox3を横並びにする--> <div class="box"> <div class="box2"> <p>box2</p> </div> <div class="box3"> <p>box3</p> </div> </div> <!--/box2とbox3を横並びにする-->test.css.box::after { content: ""; display: block; clear: both; } .box2 { background: blue; float: left; width: 50%; } .box3 { background: green; float: right; width: 50%; }横並びになった。
これを応用すれば，Webページのレイアウトが簡単に調整できる。
ちなみに，これを使えば，リストを横並びにもできる。
test02.html<body> <div class="menu"> <ul> <li><a href="#">トップ</a></li> <li><a href="#">会社案内</a></li> <li><a href="#">問い合わせ</a></li> </ul> </div> </body>test02.css@charset "UTF-8"; .menu ul { margin: 0; padding: 0; list-style: none; } .menu li a { display: block; padding: 5px; color: #000000; text-decoration: none; } .menu li a:hover { background-color: #eeeeee; } .menu ul::after { content: ""; display: block; clear: both; } .menu li { float: left; }8. 命名規則
- CSSはケバフケースで記述（これについては賛否ありそう）。
ちなみに，7. floatで，クラス名をbox1などとしてたけど，あれは具体例として雑につけたやつ。
本来は，〇〇-boxとか，〇〇-blockとかにした方がいいのではと思う。SEO対策
SEOとはSearch Engine Optimizationの略で，検索エンジンの最適化という意味。
1. div, 構造化タグ
div
- 要素のまとまりごとにつける。
構造化タグ
- header, main, section, aside, footerなど。
- HTML5で追加。
- 使用することで，検索エンジンに正しく内容を認識してもらえる。
- HTML5以前は，divにidを指定して記述していた。
- 例えば，
<main></main>は，<div id="main"></div>と記述されていた。- ブラウザによっては適用されない場合がある。
- IE8以下は適用していない。
- 逆に言えば，特定のブラウザ（IE8以下など）に適用させるために，divを使用する場合もある（たぶんもうないと思うけど）。
2. レスポンシブ
- メディアクエリ（@media）でサイズに応じたデザインを作成。
- メディアクエリで場合分けした分，CSSのコード量が増える。
- ブレイクポイントはいろいろあるらしい。2019年は560px/960px？
- 560px未満はスマホ，960px未満はタブレット，960px以上はPC。
3. JavaScriptやCSSをHTMLから呼び出す
CSSの場合
- 基本的に，headタグのtitleタグ下に記述する。
- 全要素をCSSの対象範囲とする
* { }のような書き方は避ける。JavaScriptの場合
- bodyタグ内の一番下に記述。
- headタグ→bodyタグの順に読み込まれるため，headタグに記述するとぺージが表示されるまでに時間がかかってしまう。
- Google Analyticsなどの解析に関するものは，head内に記述。
- bodyタグに記述してしまうと，JavaScriptのコードが実行される前に，ユーザーがページから離れてしまう可能性がある。
ツール
使用しているツール
Chrome デバッカーツール
- Windowsなら
F12，MacならCommand+Option+Iで呼び出せる。- スマホやタブレットのエミュレート機能が便利！
ColorPick Eyedropper
- Chromeの拡張機能。
- ブラウザ上に表示されているものの色を調べられる。
参考
1. Webサイト
[1] CSSのpositionを総まとめ！absoluteやfixedの使い方は？
[2] CSSでのサイズ指定はどれがいい?「px」「%」「em」「rem」の違い
[3] PNGとJPEGどっちがいいのか？「画像のベストな保存形式」
[4] font-familyの書き方まとめ：CSSでフォント種類を指定しよう
[5] CSSのmarginとpaddingを使い分けるための4つのポイントを紹介! 違いについても理解しよう
[6]レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版]
[7] HTMLとCSSクラスでよく使う命名について
[8] CSSのクラス名を決めるときに使うリストをつくりました2. 書籍
- HTML5&CSS3 デザインブック（ソシム）
- 世界一わかりやすいHTML5&CSS3コーディングとサイト制作の教科書（技術評論社）
- 現場のプロから学ぶ SEO技術バイブル（マイナビ）
- 投稿日：2019-11-01T21:31:17+09:00
6行HTMLブラックジャック
上海が短くならなかったので気晴らしに。
絵文字版
See the Pen
jOOYNQd by nagtkk (@nagtkk)
on CodePen.
テキスト版
See the Pen
Blackjack6 by nagtkk (@nagtkk)
on CodePen.
再ゲームはリロード(右下の Rerun) で。
なんか最近 CodePen 重いなあ。
github.io のほう
https://nagtkk.github.io/shortcoding/bj6-text.html
https://nagtkk.github.io/shortcoding/bj6-emoji.html
- 投稿日：2019-11-01T20:50:35+09:00
?上海のクリア可能パターン生成
?上海?
「上海」とは、積み上げられた麻雀牌の山から、
- 左右少なくとも一方に隣接する牌が無く、
- 上に別な牌が積み重なっていない、
- 同じ柄の牌の組
を取り除いて行き、すべて取り除いたらクリアというパズルゲームです。
基本的には 144枚(数牌+字牌+花牌+季節牌)の牌を使いますが、難易度や盤面設定により様々なバリエーションがあります。牌の積み方も色々。
上海の指南書や攻略サイトなどでは、
- 左右少なくとも一方に隣接する牌が無く、上に別な牌が積み重なっていない牌
のことを、自由牌と呼ぶようです。
この定義を使って言い換えれば、「上海」は、
- 積み上げられた麻雀牌の山から、同じ柄の自由牌の組を取り除いて行き、全て取り切ったらクリアというパズルゲーム
ということになります。
サンプル: とりあえず遊んでみよう
See the Pen Shanghai by nagtkk (@nagtkk) on CodePen.
- マウスクリックで選択
- 全部消せたら clear
- これ以上取ることができない状態(詰み)になったら game over と表示されます。
- 各種ボタン
- Undo: 一手戻る
- Reset: 最初に戻る
- New: 新規問題を生成
- 生成される問題は、解答が一つ以上存在します。
本題
前回、四川省をやったのでその流れで上海、なんですけど、
上海は真面目に作ろうとすると結構難しい。
コード自体は割とシンプルに収まるのですが、盤面の生成周りが色々と大変。
少なくとも初心者向きとは言い難い。と言うわけで、前回と異なり実装例の紹介まで行きません。
基礎部分の作り方と盤面生成の話をメインにしようかと思います。サンプルの中身が見たい方は CodePen からどうぞ。
描画部分は相変わらず手抜き気味ですが。あとは四川省でやったショートコーディングも無しです。
上海は色々と理由があって向かないと思っているので。基礎部分: 盤面状態の表現と自由牌判定
さて、上海を作るには、まず麻雀牌の山をデータとして表現する必要があります。
上海で用いられる麻雀牌の山は、山と言うくらいですから３次元です。
また、単に並んでいるだけではなく牌を縦横「半分ずらして」配置することができます。やり方は一通りではありませんが、今回は「縦横二倍の密度の盤面」を高さ毎に用意し、
4マスセットで一つの牌を表現することにします。
こうしておけば、「半分ずらし」も問題なく表現できます。
「隣の牌」は、データ上「2マス」離れていることになります。この形式のデータで自由牌か否かを判定するには、判定対象の座標を
(x,y,z)とすると、以下の領域に他の牌があるかを判定すれば良いことになります。
柄の判定は、柄 ID でも付けて比較すればよいので略。
これで実行に必要なものは一通りそろいました。
選択された二つの牌が、
- 同じ柄である
- どちらも自由牌である
ならば、取り除くだけです。
いやあ楽ちん楽ちん、
とならないところが上海の怖いところ。
乱数による盤面生成の問題点
前回の「四川省」も、今回の「上海」も、単に乱数のみで盤面を生成すると、最初から詰んでる(クリア不能)パターンが発生することがあります。
四川省の時は、実装例では「内部的に一度手当たり次第に解いてみて、解けなかったら再生成」としていました。
ショートコーディング版ではそれすらさぼって、「詰んでたらプレイヤーがリロードしてね」と雑な対処をしていました。
「四川省」は、そもそも初期状態で詰んでいる可能性が低いので、こんなんでも割と遊べてしまいます。が、「上海」ではそうもいきません。乱数頼りで盤面生成すると、最初から詰んでいるケースが多いのです。
どのくらい詰みやすいかは、牌の積み方で変わってきますが、今回使った積み方 TURTLE (サン電子版では「龍」)では、50個生成して全部クリア不能 みたいなことも起こります。
何らかの対処をしないと「普通に遊べる」状態になりません。
一つのやり方は、盤面をランダムに生成しコンピュータに解かせるプログラムを書いてしまう方法です。
実際に解けたもののみ採用すれば、最初から詰んでいる状態は回避できます。
時間がかかるので、実行時にやるのではなく、事前に作りためて実行時には単にロードするだけ。
ついでに難易度のラベリングなんかもしておけば、ゲームの幅が広がります。
(自動で難易度判定するのは、それはそれで別方向で難しい話ですが)あるいは、製作者が解いてみて解けたやつを記録するとか、手作業で盤面作るとかいう手もありかもしれません。(大変そう)
今回は別なアプローチで、「必ず一つ以上解が存在する」ように上海の盤面を自動生成する方法を解説しようかと思います。
追記: なお、白紙の状態から牌の組を置いていく、と言う方針を取ると、色々と問題がでてきます。コメント欄にて。
無地上海を利用した盤面生成
無地上海、という名前は今適当に決めました。
要は「柄のない」(あるいは「柄がすべて同じな」)上海のことです。
柄が無いので、自由牌ならどれでも組にできます。生成したい普通の上海と同じ牌の積み方で無地上海を作り、自由牌からランダムに組を作って取り除いて行きます。
このとき、取った牌の組を元の位置も含めて覚えておきます。
そして、解いた後に実際に組(ペア)になった牌に後付けで柄を決め、元の形になるように積みなおします。
こうして出来上がった上海は、無地上海と同じ手順で解くことができます。
つまり、解が一つ以上存在する、を満たせたわけですね。上海に限らず、パズルゲームでは「制約緩めて解いてしまって後付けで都合のいい条件を追加する」やり方がいろんな場面で役に立ったりします。自作のパズルゲーム作るときとか。
閑話休題。これで詰んでない上海が作れた、
と言いたいところですが、これでも上手くいかないのが上海の怖いところ。(二回目)
無地上海にも解いている最中に「詰み」が発生する可能性があるので、完全ランダムではなく、詰みを回避するように解く必要があります。
無地上海の詰む・詰まない
柄のない上海が詰むのは「組が作れない」つまり「自由牌が一つしかない」ためです。
例えば以下のようなケース。
最終的に自由牌が 1 になって詰みます。
これらはあくまで一例で、他にも色々と自由牌 1 に至るパターンがあります。「自由牌が 1 になったその時に詰んでいる」のではない点にご注意ください。
その前段階から、回避手段が存在しないので既に詰んでいます。
つまり、詰み回避のためには、「最終的に自由牌が 1 になるルート」に突入しないことが必要です。逆に、詰み回避できているパターンも見てみましょう。
上は、「取り方によっては詰むけれど、順番を間違えなければ詰まない」ケース。
下は、「どうあがいても詰まない」ケースです。これらは詰むパターンと一体何が違うのか、というのを厳密にやりだすとひたすら長くなるので、十分条件で抑え込んでしまいましょう。
$$ {\rm 最も高い自由牌の高さ} - {\rm 二番目に高い自由牌の高さ} \lt {\rm 自由牌の個数}$$
の時、まだ詰んでいません。そうでない場合、詰んでいる可能性があります。
とりあえず詰み回避条件とでも呼びましょうか。よくわからんと言う人は、上の図と見比べてみるとわかりやすいかも。
要は、「自由牌 1 」の状態は「高低差を埋めるために必要な自由牌が足りない」時に発生するので、高低差が開きすぎちゃうと取り方工夫しても挽回できなくなるかもよ、ということですね。初期状態で詰み回避条件に合致していれば、この条件を維持するように取ることで、無地上海は詰まずに解ききることが可能です。
この方法は、十分条件で縛っているので、本来詰まないパターンも一部回避してしまっている(理論的に生成可能なパターンをすべて網羅はできない)ことになります。
実用上十分だろうと思いますが、一手間違えただけで即詰むようなスリルのある上海がやりたい、という場合には、この方法は適していません。また「高さがある牌の下面には他の牌がある」という前提での話ですので、変則的な上海には適用できませんのでご注意を。
コーナーケース
今回の TURTLE では起こらない話ですが、牌の積み方によっては、実際には解けるけど初期状態で詰み回避条件に合致していない、と言うケースもあります。
その場合は、条件を満たすまで「最も高い自由牌を含む組」を取っていきます。
進めていくと、高低差が維持あるいは減少し、解が存在するならばいずれ条件を満たすようになります。もし詰み回避条件を満たさないまま詰んでしまった場合。
その牌の積み方には、そもそも解が存在しません。
普通の上海としてもクリアパターンが存在しないことになります。ちなみに、組の両方とも常に高いものから取っていくという方法でも、解が存在する場合には無地上海を解ききることができます。
ただし最終的に出来上がる上海は、とりあえず上から取っていけばクリアできるイージーモードになります。
ミニゲームとかはそれでもいいのかも。詰み回避条件の維持
今回サンプルで使った方法は、基本的にはランダムに自由牌の組を選びますが、
$$ {\rm 最も高い自由牌の高さ} - {\rm 二番目に高い自由牌の高さ} + 2 \ge {\rm 自由牌の個数}$$
の時は、取り除く牌を、
- 一つ目は最も高いもの
- 二つ目はランダム
にする、というものです。
詰みルートに突入する可能性があるときに、片方を最も高いものから取ることで高低差が開かない(=詰み回避条件を維持する)ようにしています。
コーナーケースの場合にも、最も高い自由牌を含んだ組が選ばれます。詰む危険性がない時には単にランダムに取っていくので、常に簡単になってしまうという心配はあまりありません。
さて、これで詰まずに無地上海が解けるようになったので、前述の方法で解が一つ以上存在する上海のパターンが作れます。
おつかれさま！
おまけ: 麻雀牌
スタイルシートでごり押し。
若干おかしいけど、まあ、黙ってりゃバレないバレない。See the Pen Mahjong Tile by nagtkk (@nagtkk) on CodePen.
余談: なぜショートコーディングに向かないのか
一つには、ここまで散々述べてきたように、詰みパターンの回避を入れないとそもそも遊べる状態になりにくいからです。
ショートコーディング的には、その手のものを省いてでも短さを追求する方が「ぽい」と思うのですが、遊べないものを作ってもなあ、と色々と悩みどころ。で、二つ目に「牌の積み方」が大半を占めてしまうから、というのがあります。
今回のサンプルでは、積み方データは牌の有無を表す 0 or 1の 配列で 32 * 17 * 5 = 2720 要素あります。でかい。
牌は144個しかないので、座標で持つようにすれば 144 要素にできますが、それでもまだでかい。
牌の有無を一行まとめて 32 ビットの整数として扱えば、17 * 5 = 85 要素。一要素当たりのコードが長くなるので効果はいまいち。
で、ここから短くしようと考えると、ランレングスかハフマンか、いや事前に要素間の差分を取ったほうが……それもうショートコーディングっていうかデータ圧縮の話だよね？
面白さが無いとは思いませんが、どんどん別物になってくるので、個人的にはショートコーディングには向いてないなあという結論に至りました。
上海自体は面白いんですけどね。まとめ
- 上海のサンプルと基本的な作り方を解説しました。コード解説はサボった。
- 適当に盤面作るとまともに遊べないぞ！気をつけろ！
- 事前に盤面作ってもいいけど、楽したいよね。
- 無地上海使うと盤面生成できるぞ！
- 無地上海にも詰みがあるぞ！
- 詰みルート回避しよう！
- 回避できた！
- でもショートコーディングに向かない。悲しい。
- ｼｬﾝﾊｰｲ
- 投稿日：2019-11-01T20:19:40+09:00
ドロップダウンメニューを作ったら、マウスホバー時に border-bottom が消える奇妙な現象がEdgeでのみ起こったという話
その日、私はとある企業向けのwebアプリのブラウザ検証を行っていた
ブラウザ検証と言っても ie11 と Edge で動けばいいよ～程度のモノだ。
私はまず Edge を立ち上げ、開発サーバのURLを叩き、意気揚々とログインした。
トップページのヘッダに置かれた三本線のボタンを押すと、縦に並べられたメニューが画面左側からフェードインしてくる。
いわゆるハンバーガーメニューだ。(´-`)oＯ(とりあえず上から順に一通りのメニューを開いてみるか)
私はメニューの数を数えるように、何気なくマウスをメニューの上でゆっくりと滑らせた。
そのとき事件は起こった。あれ……？メニューの表示が何かちらつくぞ……？
メニューに引かれた borderが、マウスの動きに合わせて消えたり現れたりしていたのだ。
間違ってもそんな仕様ではない。
おかしい、以前は普通だった気がするのだが……？Edgeでも動作確認してたハズだけどな……
下はこの現象を再現出来るコードだ。
See the Pen NWWwooe by 8810hayate (@K-Z) on CodePen.
と言っても、この現象は特定の条件によって発生するものなので、この画面を触ってみても、この記事をご覧の方の環境では現象が再現しないかもしれない。
現象が発生したときのスクショを併せて貼っておく。
本来は全てのメニューに 1px のボーダーボトムが設定されていたのだが、画像では消えてしまっているのがお分かりいただけると思う。
そして調査が始まる
とりあえず、IE、Edge、おまけでChromeを立ち上げてメニューの上で同じようにマウスを動かしてみる。
……現象が再現するのは Edge だけだ。
じゃあ Edge の不具合？なのか？？
次に隣の後輩に自分の画面を見せる。
説明して、後輩の端末でも同じことが起きるか確認してみた。すると……
再現しない！！これはビンゴだ、しめしめ。
OSやブラウザのバージョンを後輩と比較して確認してみる……しかし。
全く同じだ。
私がテストしていた端末、後輩の端末のOS、ブラウザのバージョンは以下の通りで、全く同じだったのだ。
OS Windows 10 Pro
バージョン 1809
OSビルド 17763.775IE バージョン 11.775.17763.0
IE 更新バージョン 11.0.147Microsoft Edge 44.17763.771.0
Microsoft EdgeHTML 18.17763Google Chrome 78.0.3904.70
OS や Edge のバージョンによるものではない……。
発生条件は何だ！？
私と後輩の環境で何が違うのか……バージョンじゃないとすると何かしらの設定か……？
特別な設定なんて何か入れたっけ……？そのとき、後輩が私の画面を見ながら不思議そうに呟いた。
「先輩の画面、少し文字が大きいですね」
「え？」原因は拡大率？
私が自分の端末の Edge で拡大率を確認すると 105%、後輩のところは 100% だった。
まさかそんなことで……？
じゃあ、拡大率を変えれば他のブラウザでも現象が再現するのか……？
私は後輩に礼を言って、自分の端末に向き直り、改めてそれぞれのブラウザで拡大率を変えながら確認する。結果……
IE11
拡大 80% 85% 90% 95% 100% 105% 110% 115% 120% 125%
いずれも現象再現なし。Microsoft Edge
拡大 80%、85%、105%、110%
現象再現。
拡大 90%、95%、100%、115%、120%、125%
現象再現なし。Google Chrome
拡大 80% 90% 100% 110% 125%
いずれも現象再現なし。やっぱ Edge だけやんけ！なんやこれ！
border-top の場合は発生しない！？
理屈はよく分からないが、現象が発生する環境はある程度絞られた。
なら、どうコードを修正すればこの現象を避けられるのだ？私はコードを弄りながら試行錯誤を繰り返した。
余分なモノを少しずつ削りながら、現象が再現するか確認しては元に戻す。そうして分かったことは、
border-bottom
は消えたり現れたりするが、
border-top
ならセーフだということだ。
Edge を使用出来る環境の方は、先ほど上に載せたコードで発生していた現象が、この下に載せたコード(スタイルシートのborder-bottomをborder-topに書き換えたもの)で発生しないことがおそらく確認出来ると思う(『思う』と言っているのは、もしかしたらOSやブラウザのバージョンで再現しないものもあるかもしれないからである。そこまでの検証は出来ていないので)。
See the Pen RwwjdPy by 8810hayate (@K-Z) on CodePen.
また、調査を進めるうちに、border-bottom であっても、メニューの float を解除すれば現象が再現しないことも分かった。
完全に解決したとは言えないが
いや、でも俺は bottom にボーダーを引きたいし、float にしたいんだよ。
どうしろっての？頭を捻って無理やり解決した。
border-bottom はやめて、border-topにする。
ただしこれではボーダーの位置が変わってしまうので、一番上のメニューだけボーダーを消し、一番下のメニューの下に架空の高さ1pxのメニューをでっちあげた。See the Pen oNNoVjG by 8810hayate (@K-Z) on CodePen.
おわりに
書いておいて何だが、こんなものはバッドノウハウだと思う。
もっといい解決は何かないものか……
- 投稿日：2019-11-01T20:19:40+09:00
マウスホバー時に border-bottom が消える奇妙な現象がEdgeでのみ起こったという話
その日、私はとある企業向けのwebアプリのブラウザ検証を行っていた
ブラウザ検証と言っても ie11 と Edge で動けばいいよ～程度のモノだ。
私はまず Edge を立ち上げ、開発サーバのURLを叩き、意気揚々とログインした。
トップページのヘッダに置かれた三本線のボタンを押すと、縦に並べられたメニューが画面左側からフェードインしてくる。
いわゆるハンバーガーメニューだ。(´-`)oＯ(とりあえず上から順に一通りのメニューを開いてみるか)
私はメニューの数を数えるように、何気なくマウスをメニューの上でゆっくりと滑らせた。
そのとき事件は起こった。あれ……？メニューの表示が何かちらつくぞ……？
メニューに引かれた borderが、マウスの動きに合わせて消えたり現れたりしていたのだ。
間違ってもそんな仕様ではない。
おかしい、以前は普通だった気がするのだが……？Edgeでも動作確認してたハズだけどな……
下はこの現象を再現出来るコードだ。
See the Pen NWWwooe by 8810hayate (@K-Z) on CodePen.
と言っても、この現象は特定の条件によって発生するものなので、この画面を触ってみても、この記事をご覧の方の環境では現象が再現しないかもしれない。
現象が発生したときのスクショを併せて貼っておく。
本来は全てのメニューに 1px のボーダーボトムが設定されていたのだが、画像では消えてしまっているのがお分かりいただけると思う。
そして調査が始まる
とりあえず、IE、Edge、おまけでChromeを立ち上げてメニューの上で同じようにマウスを動かしてみる。
……現象が再現するのは Edge だけだ。
じゃあ Edge の不具合？なのか？？
次に隣の後輩に自分の画面を見せる。
説明して、後輩の端末でも同じことが起きるか確認してみた。すると……
再現しない！！これはビンゴだ、しめしめ。
OSやブラウザのバージョンを後輩と比較して確認してみる……しかし。
全く同じだ。
私がテストしていた端末、後輩の端末のOS、ブラウザのバージョンは以下の通りで、全く同じだったのだ。
OS Windows 10 Pro
バージョン 1809
OSビルド 17763.775IE バージョン 11.775.17763.0
IE 更新バージョン 11.0.147Microsoft Edge 44.17763.771.0
Microsoft EdgeHTML 18.17763Google Chrome 78.0.3904.70
OS や Edge のバージョンによるものではない……。
発生条件は何だ！？
私と後輩の環境で何が違うのか……バージョンじゃないとすると何かしらの設定か……？
特別な設定なんて何か入れたっけ……？そのとき、後輩が私の画面を見ながら不思議そうに呟いた。
「先輩の画面、少し文字が大きいですね」
「え？」原因は拡大率？
私が自分の端末の Edge で拡大率を確認すると 105%、後輩のところは 100% だった。
まさかそんなことで……？
じゃあ、拡大率を変えれば他のブラウザでも現象が再現するのか……？
私は後輩に礼を言って、自分の端末に向き直り、改めてそれぞれのブラウザで拡大率を変えながら確認する。結果……
IE11
拡大 80% 85% 90% 95% 100% 105% 110% 115% 120% 125%
いずれも現象再現なし。Microsoft Edge
拡大 80%、85%、105%、110%
現象再現。
拡大 90%、95%、100%、115%、120%、125%
現象再現なし。Google Chrome
拡大 80% 90% 100% 110% 125%
いずれも現象再現なし。やっぱ Edge だけやんけ！なんやこれ！
border-top の場合は発生しない！？
理屈はよく分からないが、現象が発生する環境はある程度絞られた。
なら、どうコードを修正すればこの現象を避けられるのだ？私はコードを弄りながら試行錯誤を繰り返した。
余分なモノを少しずつ削りながら、現象が再現するか確認しては元に戻す。そうして分かったことは、
border-bottom
は消えたり現れたりするが、
border-top
ならセーフだということだ。
Edge を使用出来る環境の方は、先ほど上に載せたコードで発生していた現象が、この下に載せたコード(スタイルシートのborder-bottomをborder-topに書き換えたもの)で発生しないことがおそらく確認出来ると思う(『思う』と言っているのは、もしかしたらOSやブラウザのバージョンで再現しないものもあるかもしれないからである。そこまでの検証は出来ていないので)。
See the Pen RwwjdPy by 8810hayate (@K-Z) on CodePen.
また、調査を進めるうちに、border-bottom であっても、メニューの float を解除すれば現象が再現しないことも分かった。
完全に解決したとは言えないが
いや、でも俺は bottom にボーダーを引きたいし、float にしたいんだよ。
どうしろっての？頭を捻って無理やり解決した。
border-bottom はやめて、border-topにする。
ただしこれではボーダーの位置が変わってしまうので、一番上のメニューだけボーダーを消し、一番下のメニューの下に架空の高さ1pxのメニューをでっちあげた。See the Pen oNNoVjG by 8810hayate (@K-Z) on CodePen.
おわりに
書いておいて何だが、これで表面上は解決できるのだとしても、ある種のバッドノウハウじゃないかと思う。
もっといい解決は何かないものか……
- 投稿日：2019-11-01T19:03:51+09:00
画像などに設定したリンクが効かない
position: absolute;
で位置を変えた画像に設定したリンクが効かなかった。
z-index: 99;
で解決した。画像にかかわらず、クリック・ホバー時の動きが全く反応がない場合、見えない何かが上に被さってる場合が多い。今回は、近くの要素の
paddingが画像を覆っていたため反応がなかったっぽい。
- 投稿日：2019-11-01T18:33:01+09:00
完全レスポンシブデザインにする必要があるかどうか
レスポンシブデザインでwebサイトを開発する場合、スマホ用とPC用でデザインをあてることになる。
ここで、PCにおいて完全にレスポンシブにする必要はない場合が多い。
わざわざ画面幅を変えた時の挙動を考えずとも、一番外のレイヤーに
min-width: 1000px;
のように書いてしまえば良い。初めてレスポンシブデザインを開発する場合などは流れでちゃんと作ろうとしてしまうが、そもそもその必要があるのか、視野が狭くなっていないかなどは常に気を付けていきたい。
- 投稿日：2019-11-01T11:00:57+09:00
[html css]簡易リンク集の作成方法
簡易リンク集の作成方法
以前仕事中によく使われていたので、bak&紹介します
リンク集.htm<html> <head> <title>◆□■◇リンク集</title> <script language="JavaScript"> <!-- function rsz1() { alert("ブラウザの最適サイズを自動調整にしようと思ったが、未対応") //alert(window.outerWidth); //alert(window.outerHeight); //window.resizeTo(1226, 714); //window.outerWidth=1226; //window.outerHeight=714; } --> </script> </head> <body style="backgound-color:#CCCCCC;"> <table style="width:100%;border:0px;margin:0px 0px;padding:0px 0px;"> <tr> <td style="width:12%;font-size:10;">2019/11/01～随時更新中</td> <td style="width:28%;font-size:10;color:white;"><marquee behavior="scroll" bgcolor="red">最優先</marquee></td> <td style="width:28%;font-size:10;color:red;"><marquee behavior="scroll" bgcolor="yellow">優先</marquee></td> <td style="width:28%;font-size:10;color:white;"><marquee behavior="scroll" bgcolor="green">★★★ 勤務表：毎月10日、20日に注意</marquee></td> <td = style="width:4%;text-align:right;"> <input style="font-size:1;" type="button" value="..." onclick="rsz1();" title="リサイズ"/> </td> </tr> </table> <hr> <div class="divContents"> <span class="spanPartTitle">◆□Shareサーバー:ABC</span> <table class="tbl"> <tr> <th class="th"> 標題1 </th> <td class="td1"> <a href="link1" target="_blank" title="link1_title">linkComment1</a><br> </td> <td class="td2">link備考1</td> </tr> </table> <span class="spanPartTitle">■◇ローカル資料</span> <table class="tbl"> <tr> <th class="th"> 標題2 </th> <td class="td1"> <a href="link2" >linkComment2</a><br> </td> <td class="td2">link備考2</td> </tr> </table> </div> <hr> <div style="text-align:right;font-size:10;">@個人作業用。効率的に</div> </body> <style> .tbl{ width:90%; } .th{ background-color:#AAAAAA; color:white; width: 30%; align: center; font-size:13; } .td1{ background-color:#AAAAAA; width: 60%; font-size:12; } .td2{ background-color:#AAAAAA; width: 10%; font-size:10; } .divContents{ background-color:#BBBBBB; height:520px; overflow-x:hidden; overflow-y:scroll; padding:5px; boder:0px solid #000; } .spanPartTitle{ font-size:22; } </style> </html>※ブラウザはIEを推薦。
※ブラウザの最適サイズをJsで自動調整にさせようと思ったが、良い方法をまだ