Engineering

《注》この記事はAIに生成させたものです

みなさん、こんな経験ありませんか?

<p style="line-height: 1.5;">
  <img src="cat1.jpg" alt="猫1" width="200">
  <img src="cat2.jpg" alt="猫2" width="200">
  <img src="cat3.jpg" alt="猫3" width="200">
</p>

↑これだけで画像の下に謎の隙間ができてしまう…!

原因(超ざっくり)

<img>はインライン要素なので、文字と同じように「ベースライン」に合わせようとします。
line-height: 1.5 のときに、小文字の「p」や「y」が下に伸びる分のスペースを確保してしまう → 隙間誕生!

最強の解決法(これだけ覚えて!)

p img {
    vertical-align: bottom;   /* ← これだけで完璧! */
}

top や middle でもOKですが、bottom が一番確実に隙間ゼロになります。

その他の方法(比較表)

方法 コード例 メリット デメリット
vertical-align(おすすめ) vertical-align: bottom; 簡単・確実・インラインのまま ほぼなし
line-height: 0 p { line-height: 0; } 簡単 テキストが入ると行間が潰れる
font-size: 0 p { font-size: 0; } 昔からある定番 少し強引
Flexbox p { display: flex; flex-direction: column; } モダンで自由度高い 古いブラウザ非対応

結論:ほとんどの場合は vertical-align: bottom; で十分!

これで一生この隙間で悩まなくて済みます♪
お疲れ様でした!

limit 10,18446744073709551615 のように指定します。

MySQLではOFFSETのみの値を受け付けません。

↑この質問者さんと同じ疑問をいだいて検索した結果、この回答に当たった訳だが…
正直、「18446744073709551615」を指定しろとか、
 そんなわけあるかーいっ!
っと思いました。

が、そんなわけありました…。
特定のオフセットから結果セットの最後までのすべての行を取得するために、2 番目のパラメータにある程度大きい数字を使用できます。 次のステートメントは、96 行目から最後の行までのすべての行を取得します。

SELECT * FROM tbl LIMIT 95,18446744073709551615;


私の場合、PHPで扱うので、こうしてみた。
$sql = 'SELECT * FROM tbl LIMIT 95,' . PHP_INT_MAX . ';';
PHP_INT_MAX (int)
この PHP がサポートする整数型の最大値。32bit のシステムでは 通常は int(2147483647)。 64bit のシステムでは、int(9223372036854775807)。

「18446744073709551615」(0xFFFFFFFFFFFFFFFF) より小さい(ほぼ半分)になってしまうけど、そんな行数のあるデータなんて扱わないだろうし(^_^;

うーん、遠い昔に同じことで悩んだような希ガス
もしかして、このブログの過去記事に存在するかも…メンドイから探さないけどナー

さて、本題に入るとしよう。

ChromeのDevToolsなどで読み込みタイミングを見ることができる便利ヘッダー「Server-Timing」を使おうと思ったんですよ。
んで、PHPでこんな感じにしたわけですよ。
$start_at = microtime(true);
// 処理1
header('Server-Timing: timing1;dur=' . (microtime(true) - $start_at * 1000);
// 処理2
header('Server-Timing: timing2;dur=' . (microtime(true) - $start_at * 1000);
// 処理3
header('Server-Timing: timing3;dur=' . (microtime(true) - $start_at * 1000);

ところがどうしたことでしょう、DevToolsで見ると、最後のtiming3しか無いんです…orz

結論から言うと、こうです。
$start_at = microtime(true);
// 処理1
header('Server-Timing: timing1;dur=' . (microtime(true) - $start_at * 1000, false);
// 処理2
header('Server-Timing: timing2;dur=' . (microtime(true) - $start_at * 1000, false);
// 処理3
header('Server-Timing: timing3;dur=' . (microtime(true) - $start_at * 1000, false);

そう。header関数の第2引数にfalseを渡すだけ。

PHPマニュアルにこう書いてありました。
replace
オプションのパラメータ replace は、ヘッダが 前に送信された類似のヘッダを置換するか、または、同じ形式の二番目の ヘッダを追加するかどうかを指定します。デフォルトでは、この関数は 置換を行ないますが、二番目の引数に false を指定すると、同じ型の 複数のヘッダを強制的に生成します。例えば、
<?php
header('WWW-Authenticate: Negotiate');
header('WWW-Authenticate: NTLM', false);
?>

なんというわかりにくい表現かっ!
↓こんなんでいいんじゃね?
第2引数にtrue(デフォルト)を渡すと同名のヘッダーは上書きされ最後のもののみ送信されます。第2引数にfalseを渡すと複数送信されます。
「mod_deflate 確認」でググったところ1番上にヒットしたのが下記記事。
mod_deflateの動作確認方法3つ | 猫ITソリューションズ - 川越のホームページ・Web制作会社

しかしながら、3つとも使いたくなかった…。
っていうか、使う必要なかったよ!
…でも、参考にはなったからね!

ブラウザに搭載のDevTools(開発ツール/デベロッパーツール/F12ツール)を使うだけでした。
「network(ネットワーク)」タブで調べたいURLを選択
右ペインの「headers(ヘッダー)」タブを選択
「Response Headers(応答ヘッダー)」セクションの「Content-Encoding」の値を確認
この値が「gzip」になっていれば成功!
「Content-Encoding」が見つからなかったら失敗…。

なお、Firefoxの開発ツールだと、ネットワークタブの一覧で「転送量」と「サイズ」が確認できるぞ。
「転送量」が圧縮されて転送されたサイズ、「サイズ」はそれを解凍したサイズ、のようだ。
どれくらいの圧縮がされているかわかって便利だぞ。
フォクすけタソGJ!
お題:selectタグ内のoptionをjavascript(jQuery)でランダムに選択する
これについて検索した結果。

var $options = $('#sel').find('option'),
random = ~~(Math.random() * $options.length);

$options.eq(random).prop('selected', true);

なるほどー。…って、なんだこのニョロニョロは?
という訳でこれが本記事のタイトル前半部分。
後半部分の話はこれ。
 ↓
js ~~ - Google 検索
ダメ元で記号で検索してみたところ…
ちゃんとヒットするではないか!
という訳で、「~~」について詳しく解説されている記事にたどり着くことができました。
 ↓
【JavaScript】~~ で小数の切り捨て(ビット演算子 ~2つで0方向へ切り捨て) at softelメモ

#自分が「鬱陶しい昔語りのおじさん」になっていく…今となってはあの人達の気持ちがわかる…。
昔は検索語に入れた記号は無視されたんだよ。
意味がわからない記号に遭遇したときは苦労したものさ。
そこで、記号の意味を調べるための記事を作ってみたことがあったなー。
便利になったものだ。
続きを読む