初心者がサイトを作るにあたって覚えたことを書き殴る

初心者がサイトを作るにあたって覚えたこと

はじめに

　今回はdot installのjavascript編にある、「タイピングゲームを作ろう」を拡張して、英単語の勉強もできるタイピングゲームを作るにあたってうまくいかずに躓いたため、検索して得た知識を、ほぼ自分のために書き残すものになります。HTML, CSS, Javascriptのみで作ろうともがいています。

1.さまざまな要素の取得や削除

　作成するときに、すべてにidやらclassを着けるわけにはいかないのでJavascriptにはさまざまな要素の取得方法があります。

1. element.firstElementChild;

要素の最初の子要素を取得する。

2. element.nextElementSibling;

要素の隣り合う次の要素を取得する。

3. element.previousElementSibling;

要素の隣り合う前の要素を取得する。

4. element.parentNode;

要素の親要素を取得する。

5. element.removeChild;

要素内の子要素を削除する。removeChildはDOMから削除してもメモリには残るらしい。削除した後はoldChildを使うと再利用することができるらしいがまだやったことはない。

2.透明にするtransparent

カテゴリなどを作るときに横に矢印のような「＞」をdivを使ってCSSで作ろうとするときに使っていたプロパティ。borderで辺を作って反対部分をtransparentにして＞を作っている。
因みに他にも「＞」の画像をbackgroundにして当てていたりするサイトもあった。どれが一番良いのかな。自分は無理矢理positiion:absolute;で指定してやったけど、何が正解かわからん。

3.headerタグ、 position: absolute; 効かない問題

<!-- html -->
<header>
  <h1>タイトル</h1>
</header>
<div class="side-bar">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

/* css */
.side-bar {
  width: 300px;
  height: 100%;
  position: absolute;
  background: #543;
}

　このようなコードを書いてもside-barクラスのdivは左上には来ず、headerの左下を起点に位置づけされる。どこかで聞いたような気がするが、headerタグは特別で上に被らないようにできてる。用途を考えたタグ選択がもっと素早くできるように日々邁進していきたい。

4. Javascriptでの import, export

全てはこちら。
(初めて書くので色々なMarkdown記法を試しています。よろしく。)
モジュールを作っていて一番躓いたのは、___自分のローカル開発環境ではimport, exportができない___ということ。しっかりとネットに公開するなどすればうまくいくのかな。まだ試してはいない。

5. display:none;の要素をtransitionさせるときの注意点

全てはこちら
display: none;の要素を:hoverやらJSのelement.classList.add('class')を使って出現させつつ、transitionで動かしたい！、そんなときしかない今日この頃。しかしうまくいかない。

出現させるためのdisplay: block;などをしたときに生成されるため、初期値がなく、動かないとのこと。

0 ---> 100 …０から１００に移動ダァー。だけど、

0 --- (hoverなどで)...俺、参上！ ---> 100 ...これだと１００に参上してしまう。

ですので、

@keyframes fadeIn {
  from {
    opacity: 0;
  } to {
    opacity: 1;
  }
}

と、cssに書いて、animationプロパティでfadeInを指定すればうまくいく。

因みに、 transitionもanimationも
順不同で値を一括指定でき、時間は初めに書いた値が動く時間、２個目の値が遅延時間になる。

長くなったので２個に分けて書き留めておこう。１個目終わり