TIL

Today I Learned. 知ったこと、学んだことを書いていく

Wi-Fiハンカチ(青海波柄)を作ったとき知ったこと - CSS

CSS つくってみた

codepen.io

これを作ったときに知ったことを書いていく

ソース

CSS

body {
  margin: 0px;
}

.row {
  white-space:nowrap;
}

/* 2行ごとに左にずらす */
.row:nth-child(2n) {
  position: relative;
  left: -40px;
}

.content {
  /* しましま */
  box-shadow:
    0 0 2px 4px #233d5b inset,
    0 0 0 8px #fff inset,
    0 0 0 12px #233d5b inset,
    0 0 0 16px #fff inset,
    0 0 0 20px #233d5b inset,
    0 0 0 24px #fff inset,
    0 0 0 28px #233d5b inset,
    0 0 0 32px #fff inset,
    0 0 0 36px #233d5b inset,
    0 0 0 40px #fff inset,
    0 0 0 44px #233d5b inset;
  margin-top: -80px;
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  /* z-index を効かせるため*/
  position: relative;
}

JavaScript

const createDiv = () => {
  const parent = document.getElementById("main");
  let row = document.createElement("div");
  let zIndex = 1;
  
  for (let i = 0; i < 900; i++) {
    if (i != 0 && i % 20 === 0) {
      parent.appendChild(row);
      row.classList.add("row");
      row = document.createElement("div");
      /* 列ごとにz-indexを変える */
      zIndex++;
    }
    const div = document.createElement("div");
    div.classList.add("content");
    div.style.zIndex = zIndex;
    row.appendChild(div);
  }
};

/* divたくさん作る */
createDiv();

wihte-space: nowrap;で折り返しをしない

インライン要素に対してwhite-space: nowrap;を適用すると範囲からはみ出しても折り返さなくなる

これはoverflow: hidden;じゃだめなの！？って思ったけど、margin: -80px;で上にもはみ出ているため、うまくいかなかった

overflow: hidden;ははみ出した部分を非表示にできる


overflow: hidden; にした場合

See the Pen overflow: hidden とした場合 by tamago (@tamago324) on CodePen.

:nth-child()を使うことで指定の要素にスタイルを適用できる

偶数行だけ左にずらしたかったため、偶数行にクラスをつけてスタイルを適用したが、もっといい方法はないかと探してみたところ、:nth-childという擬似クラスを見つけた

nth-childについては以下の記事に書いた

tmg0525.hatenadiary.jp

偶数番目の要素に対してスタイルを適用したいため、2nを使った

.row:nth-child(2n) {...}

box-shadowのinsetで内側に影を作れる

模様をつけるときにbox-shadowのinsetを使えばできそうだと思ったから、紺色と白色の影を交互に付けた

4pxごとに紺、白とした

.content {
  box-shadow:
    0 0 0 4px #233d5b inset,
    0 0 0 8px #fff inset,
  /* 以下、4pxごとに交互に付ける*/    
  ...
}

box-shadowについては以下の記事に書いた

border-radius: 50%;で円を作れる

border-radius: 50%;とすると円になる

円を作る

div {
  border-radius: 50%;
}

See the Pen 円 by tamago (@tamago324) on CodePen.

z-indexが効かないときはpositionを設定する

対処法は簡単です。z-indexを指定したい要素のpositionをrelative、absolute、fiexedのどれかにするだけです。今の要素の位置を変えたくない場合は、relativeにしましょう。

z-indexの使い方：CSSで重なり順を指定する

位置を変えたくない場合には、position: relative;を指定する

.content {
  position: relative;
  z-index: 1;
}

参考文献