質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.45%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

281閲覧

[css]改行した時に生まれる微妙な隙間を消したい

moscow3

総合スコア201

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/02/25 00:51

次のような感じで四角形を次々と登場させていくということをやっているのですが、自動的に改行された際、ブロックとブロックの間に微妙な隙間が生まれます。
これを消したい場合はどうするべきでしょうか?
イメージ説明

html

1<div id="square0" class="square" style="background: rgb(244, 179, 194); opacity: 0; animation-delay: 0ms;"></div> 2<div id="square1" class="square" style="background: rgb(212, 172, 173); opacity: 0; animation-delay: 100ms;"></div> 3<div id="square2" class="square" style="background: rgb(225, 169, 171); opacity: 0; animation-delay: 200ms;"></div> 4<div id="square3" class="square" style="background: rgb(246, 191, 188); opacity: 0; animation-delay: 300ms;"></div> 5<div id="square4" class="square" style="background: rgb(245, 177, 170); opacity: 0; animation-delay: 400ms;"></div> 6<div id="square5" class="square" style="background: rgb(228, 171, 155); opacity: 0; animation-delay: 500ms;"></div> 7<div id="square6" class="square" style="background: rgb(240, 145, 153); opacity: 0; animation-delay: 600ms;"></div> 8<div id="square7" class="square" style="background: rgb(242, 160, 161); opacity: 0; animation-delay: 700ms;"></div> 9<div id="square8" class="square" style="background: rgb(240, 144, 141); opacity: 0; animation-delay: 800ms;"></div> 10111213

CSSアニメーション

css

1 2body{ 3 margin:0; 4 padding: 0; 5} 6@keyframes arrival { 7 100%{ 8 opacity: 1; 9 transform: rotateY(360deg); 10 } 11} 12#div{ 13 line-height:0; 14} 15.square { 16 display:inline-block; 17 width: 100px; 18 height:100px; 19 animation: forwards; 20 animation-name: arrival; 21 animation-duration: 300ms; 22}

javascript

1num=100 2delay=100 3colors=['F4B3C2', 'D4ACAD', 'E1A9AB', 'F6BFBC', ・・・・] 4div=document.createElement("div") 5div.id="loading1" 6document.body.appendChild(div) 7 8for (i=0;i<num;i++){ 9 square=document.createElement("div") 10 square.id="square"+i 11 square.classList.add("square") 12 13 square.style.background="#"+colors[i] 14 square.style.opacity="0" 15 square.style.animationDelay=i*delay+"ms" 16 17 div.appendChild(square) 18} 19

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

インラインブロックはvertical-align:bottomでボックスの縦位置基準を行の下部に揃えることで隙間が解消します.

CSS

1.square { 2 display:inline-block; 3 width: 100px; 4 height:100px; 5 animation: forwards; 6 animation-name: arrival; 7 animation-duration: 300ms; 8 vertical-align: bottom; 9}

参考
https://developer.mozilla.org/ja/docs/Web/CSS/vertical-align

投稿2018/02/25 01:03

defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問