こんにちは、デザイン担当のオガワです。
先日、人工知能開発・研究を専門にされている三宅陽一郎さんのお話を聞く機会がありました。現在はスクウェア・エニックスでゲームAIの開発をされています。私は技術的なことを聞いてもチンプンカンプンだったですが…質疑応答の中で気になったお話がありました。
ある方が「人工知能の発達で○○という職業はなくなりますか？」と聞かれたのです（○○の中には特定の業種が入っていたのですが何が入っても同じです）。確かに、世間では人工知能が発達することで、この職業が無くなる！とか、人間は必要なくなる！的なことが話題になっていますよね。
私はそうなったら大変だな～と、ボンヤリとしか考えてなかったのですが、たしかに今の仕事が人工知能に取られてしまったら…私は他に何もできることがありません(笑…えない)
でも、その質問に三宅さんはこう答えていました。
こんにちは。すーさんです。
HTMLで画像やテキストをレイアウトする時に、よく使うパターンなのに忘れてしまって毎回調べていることについて、備忘録を兼ねてまとめておきます。
今回は画像を配置したときにできる謎の隙間についてです。
○画像を並べたときにできる余白をなくす
数枚の画像を連続して並べたときに、意図しない余白ができることがあります。
HTML：
<body>
<img src=”img/rect1.png” alt=”rect1″>
<img src=”img/rect2.png” alt=”rect2″>
<br>
<img src=”img/rect2.png” alt=”rect2″>
<img src=”img/rect1.png” alt=”rect1″>
</body>
これを以下のように変更します。
CSS:
div {
line-height: 0;
}
HTML：
<body>
<div>
<img src=”img/rect1.png” alt=”rect1″><img src=”img/rect2.png” alt=”rect2″><br>
<img src=”img/rect2.png” alt=”rect2″><img src=”img/rect1.png” alt=”rect1″>
</div>
</body>
○divで囲んだ画像の余白をなくす
divタグで画像を囲むことはよくあるのですが、その場合にも何もしないと画像の下に余白ができます。(分かりやすいように、背景色を設定しています)
HTML：
<div>
<img src=”img/rect3.png” alt=”rect3″>
</div>
この場合は、下記のようにCSSで指定すると余白を消すことができます。
CSS：
img{
display: block;
}
まだあるのですが、今回はここまでにします。