投稿日：2019-02-09T16:56:59+09:00

html table セルの結合

結論

td、th要素にcolspan属性、rowspan属性を指定する。

colspan：横に結合
rowspan：縦に結合

index.html

<table frame="box" border="1">
    <tr>
        <td colspan="3">セルの横結合</td>
        <td rowspan="2">セルの縦結合</td>
    </tr>
    <tr>
        <td>セル第一形態</td>
        <td>セル第二形態</td>
        <td>完全体</td>
    </tr>
</table>

　 Tweet
Qiitaで続きを読む

投稿日：2019-02-09T16:02:57+09:00

CSS animation で遊び倒す - StarWars -

CSS animation day19 となりました。

本日は、CSS animation でスターウォーズを作ります。

1. 完成版

See the Pen StarWars by hiroya iizuka (@hiroyaiizuka) on CodePen.

2. 参考文献

sitepoint

3. 分解してみる

❶.
背景に以前作成した、Starを使います。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div id="stars"></div>
    <div id="stars2"></div>
    <div id="stars3"></div>

    <div class="titles">
      <div id="titlecontent">
        <p>Long time ago...
        </p>
      </div>
    </div>
  </body>
</html>

styles.css

body {
  height: 100%;
  overflow: hidden;
  background: #090a0f;
}

#content {
  position: absolute;
  color: #ffff70;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;

}

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  transform: perspective(100px) rotateX(10deg);
  animation: star 50s linear infinite;
  box-shadow: 779px 1331px #fff, 324px 42px #fff, 303px 586px #fff,
    1312px 276px #fff, 451px 625px #fff, 521px 1931px #fff, 1087px 1871px #fff,
    36px 1546px #fff, 132px 934px #fff, 1698px 901px #fff, 1418px 664px #fff,
    1448px 1157px #fff,

                         ... 


@keyframes star {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

いい感じです。

❷.
では、テキストを傾けて奥に向かわせるにはどうしたら良いでしょうか？

結論から言うと、rotateX するとできそうです。
スターでやってみましょう。

styles.css

body {
  height: 100%;
  overflow: hidden;
  background: #090a0f;
  transform: perspective(300px) rotateX(60deg) ;
}
#star{
  ...
}

画面全体をrotateX することで、奥に向かうようになりました。
では、これを、text に応用しましょう。

styles.css

#content {
  position: absolute;
  color: #ffff70;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) perspective(300px) rotateX(30deg);
  font-size: 40px;
}

大分いい感じになってきましたね。

❸.
では、最後に、このtext にアニメーションをつけましょう。

styles.css

#content {
  position: absolute;
  color: #ffff70;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  animation: text linear 15s infinite;
}


@keyframes text {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1000px);
  }
}

rotateX はこういう奥ゆきを出したい時に使うんですね。　
非常に勉強になります。
それでは、また明日〜

　 Tweet
Qiitaで続きを読む

投稿日：2019-02-09T15:57:23+09:00

display: inline-blockで並べたブロックが下にずれる

結論

vertical-align: top;を指定する。
index.html
<div>左...略</div>
<div>右...略</div>
index.css
div {
    display: inline-block;
    vertical-align: top;
}

　 Tweet
Qiitaで続きを読む

20190209のCSSに関する記事は3件です。

html table セルの結合

結論

CSS animation で遊び倒す - StarWars -

1. 完成版

2. 参考文献

3. 分解してみる

display: inline-blockで並べたブロックが下にずれる

結論

日付別

タグ一覧