テーブル

<table border="5" bordercolor="色"　bgcolor="yellow"　width="100px" height="200px"　cellpadding="10"> 
// 枠線の太さ、色の指定　背景色 表のサイズ　セルの余白
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
    <tr>
      <td>高橋</td>
      <td>2３</td>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>２２</td>
    </tr>
 </table>

セルを結合

//横方向に結合する
<td colspan="2">apple</td>
//縦方向に結合する
<td rowspan="2">りんご</td>

文字のレイアウト

<tr align="left"> //左寄せ
<tr align="center">　//中央
<tr align="right">　//右寄せ

擬似要素が適用できない

sample.html

<div class="sample">
  <img src="" class="sample-img">
</div>

sample.scss

.sample-css{
  &:before{
    content: "";
    width: 20px;
    height: 20px;
    background-clor: red;
 }
}

本来ならば、上記の様なコードで擬似要素が適用できます。

しかし、ディベロッパーツールで見ても存在しない

コードの記載に間違いがない場合にまず確認して欲しいことが今回説明する、「擬似要素が使えるhtmlタグかどうか？」です。

擬似要素が使えないタグとは？？

例えば、imgタグです。

使えない理由は、閉じタグがないからです。

なぜ、閉じタグがないと使えないか？

→要は、閉じタグのない要素はカラ要素だと判断されるため、仕様的に擬似要素が適用出来ません。

imgタグ以外にも、selectタグや、optionタグ、お同じですね。

擬似要素が適用できないときはチェックすべき項目ですね。

参考

・imgタグにafter要素（疑似要素）はつけれないだとーーー！！

はじめに

初心者・新卒の方々にHTML・CSSを教える機会が増え、
自分が初心者のときに
こんなものがあったら有難かったなと思ったので簡単にまとめてみました。

登場する書き方は私がお世話になっている書き方なので
より美しい書き方があればご教示いただけますと幸いです。

よくあるレイアウト

ロゴのみ右寄せになっているヘッダーナビゲーション

よくみるこのような形のレイアウト。

どうやって実装するのでしょうか？
以下のように実装することができます。

index.html

    <nav>
      <ul>
        <li class="logo">ロゴ</li>
        <li><a href="#">リスト1</a></li>
        <li><a href="#">リスト2</a></li>
        <li><a href="#">リスト3</a></li>
        <li><a href="#">リスト4</a></li>
      </ul>
    </nav>

style.html

nav ul {
 height: 60px;
 padding: 0 40px;
 display: flex;
 justify-content: flex-end;
 align-items: center;
 background: #b0c4de;
}
nav ul li {
 margin-right: 20px;
 list-style-type: none;
}
nav ul li:last-of-type {
 margin-right: 0;
}
nav ul li.logo {
 margin-right: auto;
}
nav ul li a {
 color: #333;
 text-decoration: none;
}

全体にdisplay: flexとjustify-content: flex-end;をつけ、
右寄せにしたい項目にmargin-right: autoを付与します。
左寄せにしたい場合はmargin-left: autoを付与します。

トップ固定のヘッダーナビゲーション

スクロールしてもトップの同じ位置に固定され続ける
上記のようなナビゲーションはこのように実装します。

index.html

    <nav>
      <ul>
        <li class="logo">ロゴ</li>
        <li><a href="#">リスト1</a></li>
        <li><a href="#">リスト2</a></li>
        <li><a href="#">リスト3</a></li>
        <li><a href="#">リスト4</a></li>
      </ul>
    </nav>

style.html

body {
 position: relative;
}
nav {
 width: 100%;
 position: fixed;
 top: 0;
}

position: fixedで固定指定をするだけです。

要素を親要素の上下中央に配置する

このように親要素の上下中央に子要素を配置したい場合です。
（これがまたよく使います..！）

index.html

      <div class="parent">
        <p>親要素</p>
        <div class="child">
          <p>子要素</p>
        </div>
      </div>

style.html

.parent {
 position: relative;
 width: 500px;
 height: 500px;
 margin: 30px auto 0;
 border: solid 2px #000;
}
.child {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 200px;
 height: 200px;
 border: solid 2px #ff0000;
 transform: translate(-50%, -50%);
}

transform: translate(-50%, -50%);は魔法のように覚えておくと良いです。

aタグ(リンク)をボタンのように見せたい

aタグをボタンのように見せたい場合、
以下のように文字を縦中央に配置することができず
悩むことがあるかもしれません。

paddingで調整したり、前述したようにpositionで調整することもできますが
以下のようにするとシンプルです。

index.html

<a href="#" class="button">ボタン</a>

style.html

.button {
 display: block;
 width: 200px;
 height: 40px;
 background: #4682b4;
 color: #fff;
 text-decoration: none;
 text-align: center;
 border: none;
 border-radius: 4px;
 line-height: 40px; /* 要素の高さと同じだけline-heightを取ってあげる */
}

同じサイズの要素を横並びにしたい

これが一番よくあるレイアウトなのですが、
要素の中ですべて同じサイズにしたいということがあると思います。

そのような場合は以下のようにすると良いでしょう。

index.html

    <div class="wrap">
      <div class="card">1</div>
      <div class="card">2</div>
      <div class="card">3</div>
      <div class="card">4</div>
      <div class="card">5</div>
    </div>

style.css

.wrap {
 display: flex;
 width: 900px;
 margin: 20px auto;
 background: #eee;
}
.card {
 flex: auto;
 height: 200px;
 border: dotted 1px #888;
 text-align: center;
 line-height: 200px;
}

flex: auto;を付けるとすべて.cardが同じ幅になります。
他のプロパティについてはぜひこちらをご参照ください。

さいごに

今回ご紹介したものはとても初歩的な技術です。
調べれば出てくるようなものばかりですが、
始めの一歩として参考にしていただければと思います

widthを決定する必要のある場合は、
margin:0 auto;
で中央に持ってこれば良い

widthを決定する必要のない場合は、
display:flex;
justify-content:center;
で中央に持ってこれば良い

以上。

CSSについて改めてドキュメントを読んでみて、今更「疑似クラス」なるもの存在を知る。
スクリプトを書かなくても似たような実装がCSSだけで出来る模様なので、用途毎に整理。
目次を見て、探してる用途に合った内容があれば、コピペして使えばいいのかなぁと。

ブラウザは、Chrome・FireFox・InternetExplorer・Edge・safariに対応している内容のみを書きました。
調べてみると「InternetExplorer」「FireFox」未対応の「疑似クラス」が多い。。
ブラウザ依存が無ければ、もっと色々できるみたいなんだけど・・。

参考

疑似クラス

オプションボタン・ラジオボタン・チェックボックス・チェックON時に発火

チェック用ボックスとかを非表示(display:none)にして、ボタンとか要素クリック的な使い方もできそう？
※色の切り替えや要素の表示・非表示程度だろうけども・・。

sample.html

<div>
    <input type="radio" name="my-input" id="yes">
    <label for="yes">Yes</label>

    <input type="radio" name="my-input" id="no">
    <label for="no">No</label>
  </div>

  <div>
    <input type="checkbox" name="my-checkbox" id="opt-in">
    <label for="opt-in">Check me!</label>
  </div>

  <select name="my-select" id="fruit">
    <option value="opt1">Apples</option>
    <option value="opt2">Grapes</option>
    <option value="opt3">Pears</option>
  </select>


  <br />

  <label for="toggle" style="cursor: pointer;background:#00188f; color:#fff; padding:5px;
    border-radius:5px;">ボタン風ラベル</label>
  <input type="checkbox" id="toggle" style="display: none;">
  <div class="clicksample">テキスト
  </div>

sample.css

    div,
    select {
      margin: 8px;
    }


    /* チェックが入った入力のラベル */
    input:checked+label {
      color: red;
    }

    /* チェックが入ったラジオボタン */
    input[type="radio"]:checked {
      box-shadow: 0 0 0 3px orange;
    }

    /* チェックが入ったチェックボックス */
    input[type="checkbox"]:checked {
      box-shadow: 0 0 0 3px hotpink;
    }

    /* 選択されたオプション */
    option:checked {
      box-shadow: 0 0 0 3px lime;
      color: red;
    }

    /* 「テキスト」 */
    .clicksample {
      background: lightgray;
    }

    /* ボタン風ラベルクリック時 */
    #toggle:checked+.clicksample {
      background: lightgreen;
    }

結果

disabled状態の場合

たまに「disabled」の色を変えたいって、お客様いますよね。

sample.html

<form action="#">
  <fieldset id="shipping">
    <legend>送り先</legend>
    <input type="text" placeholder="名前">
    <input type="text" placeholder="住所">
    <input type="text" placeholder="郵便番号">
  </fieldset>
  <br>
  <fieldset id="billing">
    <legend>請求先</legend>
    <label for="billing_is_shipping">送り先と同じ:</label>
    <input type="checkbox" id="billing-checkbox" checked>
    <br>
    <input type="text" placeholder="名前" disabled>
    <input type="text" placeholder="住所" disabled>
    <input type="text" placeholder="郵便番号" disabled>
  </fieldset>
</form>

sample.css

input[type="text"]:disabled {
  background: #ccc;
}

sample.js

// ページの読み込みの終了を待つ
document.addEventListener('DOMContentLoaded', function () {
  // チェックボックスに 'change' イベントリスナーを追加
  document.getElementById('billing-checkbox').onchange = toggleBilling;
}, false);

function toggleBilling() {
  // 請求先のテキストフィールドを選択
  var billingItems = document.querySelectorAll('#billing input[type="text"]');

  // 請求先テキストフィールドを切り替え
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}

enabled状態の場合

「disabled」もあるので、「enabled」ものせておきます。

sample.html

<form action="url_of_form">
  <label for="FirstField">First field (enabled):</label>
  <input type="text" id="FirstField" value="Lorem"><br>

  <label for="SecondField">Second field (disabled):</label>
  <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>

  <input type="button" value="Submit">
</form>

sample.css

input:enabled {
  color: #2b2;
}

input:disabled {
  color: #aaa;
}

フォーカス時

こちらは、業務アプリ系だとよくやっていますね。

sample.html

<input class="red-input" value="I'll be red when focused."><br>
<input class="blue-input" value="I'll be blue when focused.">

sample.css

.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}

結果

ホーバー(hover)時

これは、要望あるかな・・？ありそうで無さそうな。

sample.html

<a href="#">Try hovering over this link.</a>

sample.css

a {
  background-color: powderblue;
  transition: background-color .5s;
}

a:hover {
  background-color: gold;
}

結果

リンク(aタグ)の状態に応じて、スタイルを変える。

こちらは、あまり要望ないかも・・？

sample.html

<p>この段落にはリンクが含まれています。
  <a href="#">このリンクはクリックすると赤色になります。</a>
  この段落は段落やリンクをクリックすると灰色になります。
</p>

sample.css

a:link { color: blue; }          /* 未訪問リンク */
a:visited { color: purple; }     /* 訪問済みリンク */
a:hover { background: yellow; }  /* ホバー時 */
a:active { color: red; }         /* アクティブなリンク */
p:active { background: #eee; }   /* アクティブな段落 */

否定(not)文？

たまにスクリプトのセレクタでも使います。
一つ一つ、classとかの適用がめんどいときに使える？

sample.html

<p>I am a paragraph.</p>
<p class="fancy">I am so very fancy!</p>
<div>I am NOT a paragraph.</div>

sample.css

.fancy {
  text-shadow: 2px 2px 3px gold;
}

/* <p> elements that are not in the class `.fancy` */
p:not(.fancy) {
  color: green;
}

/* Elements that are not <p> elements */ 
body :not(p) {
  text-decoration: underline;
}

/* Elements that are not <div> and not <span> elements */
body :not(div):not(span) {
  font-weight: bold;
}

/* Elements that are not `.crazy` or `.fancy` */
/* Note that this syntax is not well supported yet. */
body :not(.crazy, .fancy) {
  font-family: sans-serif;
}

要素の位置を指定する場合

縞模様とかで一覧系だとよく使いそう。

sample.html

<h3><code>span:nth-child(2n+1)</code>, WITHOUT an
   <code>&lt;em&gt;</code> among the child elements.</h3>
<p>Children 1, 3, 5, and 7 are selected.</p>
<div class="first">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br>

<h3><code>span:nth-child(2n+1)</code>, WITH an
   <code>&lt;em&gt;</code> among the child elements.</h3>
<p>Children 1, 5, and 7 are selected.<br>
   3 is used in the counting because it is a child, but it isn't
   selected because it isn't a <code>&lt;span&gt;</code>.</p>
<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br>

<h3><code>span:nth-of-type(2n+1)</code>, WITH an
   <code>&lt;em&gt;</code> among the child elements.</h3>
<p>Children 1, 4, 6, and 8 are selected.<br>
   3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>, 
   not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
   children of that type. The <code>&lt;em&gt;</code> is completely skipped
   over and ignored.</p>
<div class="third">
  <span>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>

sample.css

html {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
  background-color: lime;
}

プレースホルダー表示中の間だけスタイルを適用

たまに要望があるかも・・？

sample.html

<input placeholder="何か入力してください！">

sample.css

input {
  border: 2px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: red;
}

結果

未入力

入力済

---

とまぁ書いておきながら、結局全部スクリプトで書いちゃえ！って、思ってしまいそうではある。。

what

シンプルなタイピングゲームを作成。

why

HTML,CSS,JavaScriptの学習、理解を深めるため

issue

・半角英数小文字のみ対応なので、全角日本語入力への対応。
・ミスタイプした際ライフポイントゲージが減り、０になるとゲームオーバーの機能。

index.html

<!DOCTYPE html>
<html lang=ja>
  <head>
    <meta charset="utf-8">
    <title>Typing Game</title>
    <link rel ="stylesheet" href="css/styles.css">
  </head>
  <body>
    <p class="bg">
      <img src="bg.png" alt="背景"title="背景">
    </p>

    <div class="title">
      <p id="title">Typing Game</p>
    </div>

    <div class="target">
      <p id="target">click to start</p>
    </div>

    <p class="info">
      Letter count:<span id="score">0</span>
      Time left:<span id="timer">0.00</span>

      Miss type:<span id="miss">0</span>
    </p>

    <script src ="js/main.js"></script>
  </body>
</html>

styles.css

body{
  font-family: 'Courier New',monospace;
  text-align: center;
  background-color: #b3b3b3;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

p.bg img{
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  -ms-filter: blur(6px);
  filter: blur(6px);
}

.title{
  font-size: 50px;
  margin-top: 50px;
  display        : inline-block;
  color          : #ffffff;            /* 文字の色 */
  font-size      : 36pt;               /* 文字のサイズ */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
        2px  2px 9px #003366,
      -2px  2px 9px #003366,
        2px -2px 9px #003366,
      -2px -2px 9px #003366,
        2px  0px 9px #003366,
        0px  2px 9px #003366,
      -2px  0px 9px #003366,
        0px -2px 9px #003366;        /* 文字の影 */
}

.target{
  font-size: 48px;
  letter-spacing: 3px;
  background-color: rgb(161, 134, 255);
  width: 700px;
  padding: 40px;
  border-radius: 20px;

}

.info{
  display: flex;
  flex-direction: column;
}

main.js

'use strict';
{
  const words = [
    'strawberry trapper',
    'guilty night,guilty kiss',
    'jumping heart',
    'hand in hand',
    'dreamer',
    'mirai ticket',
    'self control',
    'daydream worrior',
    'lonely tuning',
    'guilty eyes fever',
    'happy party train',
    'sky journey',
    'galaxy hide and seek',
    'innocent bird',
    'shadow gate to love',
    'landing action yeah',
    'my list to you',
    'miracle wave',
    'awaken the power',
    'crash mind',
    'drop out',
    'one more sunshine story',
    'water blue new world',
    'in this unstable world',
    'pianoforte monologue',
    'beginners sailing',
    'red gem wink',
    'white first love',
    'new winding road',
    'guilty farewell party',
    'thank you friends',
    'marine border parasol',
    'next sparkling',
    'hop stop nonstop',
    'believe again',
    'brightest melody',
    'jump up high',
    'deep resonance',
    'dance with minotaurus',
    'kokoro magic a to z',
    'wake up challenger',
    'new romantic sailors',
    'love pulsar',
    'changeless',
    'never giving up',
  ];

  let word;
  let loc;
  let score;
  let miss;
  const timeLimit = 30 * 1000;
  let startTime;
  let isPlaying = false;
  var type = new Audio('gun.mp3');
  var gameover = new Audio('correct.mp3');
  var misstyp = new Audio('ready.mp3');


  const target = document.getElementById('target');
  const scoreLabel = document.getElementById('score');
  const missLabel = document.getElementById('miss');
  const timerLabel = document.getElementById('timer');

  function updateTarget(){
    let placeholder = '';
    for (let i = 0; i< loc; i++){
      placeholder += '_';
    }
    target.textContent = placeholder + word.substring(loc);
  }

  function updateTimer(){
    const timeLeft = startTime + timeLimit - Date.now();
    timerLabel.textContent = (timeLeft / 1000).toFixed(2);

    const timeoutId = setTimeout(() =>{
      updateTimer();
    },10);

    if(timeLeft < 0){
      isPlaying = false;
      clearTimeout(timeoutId);
      timerLabel.textContent = '0.00';
      gameover.play(); 
      gameover.volume = 1.0;
      setTimeout(() =>{
        showResult();
      },100)
      target.textContent = 'click to replay';
    }
  }

  function showResult(){
    const accuracy = score + miss === 0 ? 0 :score/ (score + miss) * 100;
    alert(`${score} lettters.${miss}misses. ${accuracy.toFixed(2)}% accuracy!`);

  }

  window.addEventListener('click',() => {
    if(isPlaying === true){
      return;
    }
    isPlaying = true;

    loc = 0;
    score = 0;
    miss = 0;
    scoreLabel.textContent = score;
    missLabel.textContent = miss;
    word = words[Math.floor(Math.random() * words.length)];

    target.textContent = word;
    startTime = Date.now();
    updateTimer();
  });

  window.addEventListener('keydown', e => {
    if(isPlaying !== true){
      return;
    }

    if(e.key === word[loc]){
      type.play(); 
      type.currentTime = 0;
      type.volume = 1.0;

      console.log('score');
      loc ++;
      if(loc === word.length){
        word = words[Math.floor(Math.random() * words.length)];
        loc = 0 ;
      }
      updateTarget();
      score++;
      scoreLabel.textContent = score;
    }else{
      misstyp.play(); 
      misstyp.currentTime = 0;
      misstyp.volume = 1.0;
      console.log('miss');
      miss++;
      missLabel.textContent = score;
    }
  });
}

GitHubはこちらです。
https://github.com/izn303/TypingGame

ぜひ遊んでみてください！
http://izn5656.stars.ne.jp/typing_game/

こちらに移行しました。

動機

3本バーで呼び方があっているのかよくわからない。

の棒三つの部分みたいなやつ。主にメニューを表示するトリガと使用されることが多いやつです。
起源はよくわからないのだけど、bootstrapが出てきたあたりでかなり使われるようになり今となっては別の表現を選ぶにはそれなりの理由がいるくらいにスタンダードになってしまった。
自分用スタイルガイドっぽいものを作っていて、3本バーも必須の表現だと思うので実装しなければならない。

実装

手っ取り早く確認したい方は
CodePen
をどうぞ

↑こういうのができます。

css

.threebar{
    position:relative;
    padding-top:100%;
    display:block;
    background-color:black;
}
.threebar__body{
    content:"";
    display:block;
    position:absolute;
    top:11.67%;
    left:0;
    width:100%;
    height:10%;
    background-color:white;
    border-radius:0.1em;
}
.threebar__body::before{
    content:"";
    display:block;
    position:absolute;
    top:333.33%;
    left:0;
    width:100%;
    height:100%;
    background-color:white;
    border-radius:0.1em;
}
.threebar__body::after{
    content:"";
    display:block;
    position:absolute;
    top:666.66%;
    left:0;
    width:100%;
    height:100%;
    background-color:white;
    border-radius:0.1em;
}

html

<div style="width:50px;padding:10px;background-color: black;">
  <div class="threebar">
      <a class="threebar__body" href="#"></a>
    </div>
</div>

使い方

外側のdivにwidthを設定して、内側に.threebar .threebar__body を配置する。
border角の丸みを調整したいときは外側のdivのfont-sizeを適当にゴニョってくれい。
外側のdivの幅は10で割り切れるpxを指定したほうが線の太さが綺麗になります。

説明

この3本バーの表現はいろんな実装方法があって、span3つにborderで表現しているパターンをよく見かけた気がするけど今回はその方法は使っていない。
まず、10%の高さのblock要素の背景色を設定し、バーとしている。
これだと1本線しか引けないため:before、:afterでも同じような要素を作成してabsoluteで配置する感じ。
%の指定が謎だと思うけど
threebarのpadding-top:100%は正方形にするおまじないで
:before,:after の top が100%超えとるやんけっていうのは、
親要素の高さが10%なので祖父母要素の大きさに対応するためには10倍する必要があったためです。

font-sizeを調整しないと角の丸みがうまく出ないのは理由があって、border-radiusに%指定すると楕円っぽいカーブになってしまうため、何かしら違う方法で値を設定してあげる必要がある。
じゃあ、font-sizeは親から引き継ぐんでemを利用すればいいんじゃね？ってことでfont-sizeの調整で対応することにしてます。

まとめ

とりあえずできた。

この方法だといろんなサイズに対する3本バーをいろいろ書かなくていいかな（100px ｘ 100pxの3本バーとかもできる）とは思うんだけど、欠点についてはまだ評価できてない。

一応IE11でも動きそう。