inlineで隙間が発生してしまうのはなぜ?

こんにちは、有村です!
体調崩し気味ですが、比較的元気なうちに記事を書くぞ!!

今日のテーマは、inlineで隙間が発生してしまうのはなぜ?
です!
最近これを人に説明することが多いな〜と思ったので、メモしておくことにしました。
(うまく書けたら 「これ見といて^^」 でやり過ごせるかもしれない!やったね!)

たとえば、このようなコードがあったとしましょう。

これで、実際にレンダリングされるときには、liは横並びで表示されますね。

が!!!!
横並びに表示されたけど………なんかそれぞれの要素に隙間ができるんですケド!?!?
という経験、皆さんおありじゃないですか。
こんなかんじ。
戦士 白魔道士 黒魔道士 竜騎士

なんかよくわかんねーけどスペース空くわーってことで、

みたいに ul のfont-sizeを0にしてみたりとか、

のように繋げて書いてみたりとかしてましたが。。

そもそもなんで勝手に隙間が空くんだ?

てことで、その理由。
Enterキーで改行を行うと、改行が空白類文字として扱われるから。
ということは…実態は、
戦士(ulのfont-sizeで空白類文字)白魔道士(ulのfont-sizeで以下略)黒魔道士(ulのfont以下略)竜騎士(ulの以下略)
こうなっていたということですね!!
だから、ulのfont-sizeを0にしてみたり、繋げて書いて改行を無くすと、不要な隙間が生まれなくなるんですね!

じゃあdisplayがblockのときはどうなるの?と思って調べてみましたが、MDNやW3Cで答えを探し当てることができず…。
が、先人の方々の説明等を読み漁ってみて、実際の挙動と照らし合わせてこうかな?と思いました。

blockの場合、開始と終了タグ前後の改行は無視される。
ただ、

としたときは、黒魔道士の項と白魔道士の項の先頭には空白が入らないものの、レンダリングしてみると、
「黒魔道士は いちばんつよいよ!」
「白魔道士も すきだよ!」
と文章中にスペースが空いてしまいます。なぜなら、開始と終了タグの前後の改行ではないから。

また、もはやブロックレベル要素というものはHTML5に存在しませんが、MDNのブロックレベル要素のページの、

ブラウザは一般的に、前後に新しい行を伴ってブロックレベル要素を表示します。

が理由のひとつなのかなと思いました。
「前後に新しい行を伴う」ことが前提であれば、そこに改行があろうともなかろうとも、

みたいな書き方をしても強制的に行が変わるので、「無視をする」という挙動になるのかな?と推測しました。

このあたりは自分もかなり悩んだので、今回記事にすることで頭の整理ができてよかったです!
それでは、きょうはこのへんで。

JSONとJSONPの違いって?その2

継続は力なり!1ヶ月なにも書いてなかった!
こんにちは継続失敗した有村です。忙しかったの(言い訳)

前々回の ボタン作成で失敗したこと への記事にコメントありがとうございました!
超遅くなったのですが返信させていただきました!
ボタン周りはあれから1ヶ月、さらに色々と気付きがあったので、「失敗したことシリーズ」としてちょくちょく纏められたらいいな〜と思ってます!(どれだけ失敗する気)

さてさて、では今日のお題。前回の続き。
「JSONPを使えば、どうして他ドメインのJSONを使えるの?」という、「は?結論はよ」なところで止まっていました。書きます。

まず、JSONPについて。なんの略かというと…
JSON with padding
…marginとかそういう系?…ではなくて。ここでのpaddingは「不必要な挿入句」とか、要らないけど入れたわ、みたいなニュアンスらしい。

じゃあ何をpaddingしてるの?というと、JavaScript
じゃば…すくりぷと………?

一度、JavaScriptの特性(?)を。JavaScriptは、外部サイトのものでも実行できる。
「あ〜jQueryダウンロードしてサーバに上げてってやるのめんどくせ〜、Googleのとこから持ってくるようにしちゃお」
ってやりませんか?具体的にはこう。

Googleはどう考えても外部サイトですよね。そうじゃなかったらそれは中の人だ。

で、ここで衝撃の事実!(私的には)
JSONPは、JavaScriptの実行だった!!
えーーーーーー!!!!
JSONは、同一元生成ポリシー(XMLHttpRequest)に引っかかるから、別ドメインのデータを読めない。
ならば、別ドメインでも実行できるJavaScriptでデータを受け渡せば良いじゃないか!という発想。な、なるほど…!!

一連の流れとしては、雑にまとめるとこうらしい。

1.
コールバック関数を用意します。その中にJSONデータを利用した処理を書きます。実行時、引数にデータが入ってきます。

2. リクエストを投げます。
3. 「データを引数としてコールバックを実行する」というスクリプトとして返ってきます。1で用意したコールバックが呼び出されます。

4. コールバックが実行されます。

以上。

…ん?でもこれって、JavaScriptの実行を相手に委ねちゃってることにならないか?ということは、悪用される危険もあるのではないか…??
あ!だから適当にJSONP使ったら殴るって言われたんだ!
リスクや信頼性を考慮した上で実装しなさいよ、ってことだったんですね…。

というわけで、「JSONとJSONPの違いって?」の結びとしては…
JSONは同一ドメインでしか使えない。JavaScriptではない。
JSONPはJavaScript。
という感じでしょうか!

そういえば、先輩に「VPNってなんの略?」と聞かれて、「ばーちゃる… なんちゃらねっとわーく……」と答えてしまったので、
過去記事が全く身についてないことが分かりましたね!やった!!
それでは、きょうはこのへんで。