シェアボタンとは

ボタン1つで、SNSにWebページや記事を共有してもらえるボタンです。自分のサイトを利用者に拡散してもらい、認知度をあげることができます。

Twitterの設置方法

アイコンを使う場合は、以下のブランドリソースを守りましょう。
https://about.twitter.com/ja/company/brand-resources.html

1. 公式ページにアクセス

シェアボタンなどツイッターの埋め込み形を生成できる公式ページにアクセスしましょう。
公式ページ→https://publish.twitter.com/#

2. Twitter Buttonsをクリック

下にスクロールして、Twitter Buttonsをクリックします。

3. Share Buttonを選択

Share Buttonを選択することで、URLをシェアするボタンを作成することができます。

4. set customization optionsをクリック

タイトルに書いてある
That’s all we need, unless you’d like to set customization options.
の青くなっているset customization options.をクリックすると以下の画面になります。

各項目は以下のことを指定できます。

英文	できること
Do you want to prefill the Tweet text?	入力したい文字
Do you want to set a specific URL in the Tweet?	共有するURLもしくはツイートURL
Would you like this Tweet to include your screen name?	自分のツイッターアカウント
Would you like to set a hashtag for the Tweet?	共有したいハッシュタグ
Do you want to recommend accounts?	お勧めするツイッターアカウント?
How would you like the button displayed?	ボタンの大きさ（カスタマイズする場合は選択不要）
What language would you like to display this in?	言語設定

最後に、Updateをクリックしたら完成です。

5. Copy Code

Updateを押すと前のボタンに戻されます。Copy Codeを押すとクリップボードにコードがコピーされます。

6. カスタマイズする！！

1. 一度、公開するWebページに貼り付けます。
2. そして、Webページを開きます。 するとツイートボタンが表示されています。
3. Google Chromeのディベロッパーツールを使用します。
4. ページ上で、右クリックを押してから検証を押します。
5. ソースコードが出されるので、その中から、aタグを見つけ、href=""の中に書いてある文字をコピーします。

写真の場合、https://twitter.com/intent/tweet?original_referer=http%3A%2F%2F127.0.0.1%3A54313%2F&ref_src=twsrc%5Etfw&text=Document&tw_p=tweetbutton&url=http%3A%2F%2F127.0.0.1%3A54313%2Findex.html

6. 自分の作りたいボタンをデザインして、先ほどコピーしたものを貼り付けると完成です！！

こんにちは!!
自分でwebサイトを作る中で、多くのHTMLの要素に名前を付けていたのですが
数が多くなるにつれて、何を付けたらいいのか分からなくなり、また、どの名前をつけたのか分からなくなりました。
結果として、該当の要素を探すのに時間が掛かり、無駄な時間を過ごしてしまったので、記述の仕方を考えてみました！！

ブロック要素

●全体を囲むボックス
wrapper, wrap, container, page, page-body

●ヘッダー
header, header-area

●フッター
footer, footer-area

●メインコンテンツ
main, main-contents, contents

●コンテンツ
content, contents, container, layout, sec, section, block
service

●サブコンテンツやサイドバー
sub, sub-content, side-bar

<div class="service">
  <div class="service__item">
    <h2 class="service__item-ttl">ここにタイトルが入る</h2>
    <p class="service__item-txt">テキストが入る。テキストが入る。</p>
    <a href="#" class="service__item-link service__item-link--red">MORE</a>
  </div>
</div>

このように親要素の名前を子要素に使うことでclassの影響範囲が分かりやすくなります。
これをBEMといい、Block Element Modifierの略で、1番多く使われている命名規則になります。
あとはナンバーを付けて1,2,3みたいに管理する形もあります。

基本的には、パッと見て何に付けているのかわかることが必要なので、子要素はGoogle翻訳などで英語に翻訳してBEMを使って記述していくことが一般的なのかなと思います。

もし後にレスポンシブ対応などでclass名などが分からなくなった時は、Googleの拡張機能「cssviewer」を使うと、該当の要素にカーソルを持っていくとクラス名がわかるので便利です！！(検証ツールより早いと思います)
背景色などは、Chrome DevToolsの「CSS Overview」を使うと、自分が今まで何色を使ったのか一覧でわかるので便利です!!
是非試して見てください！！

今後は、Bootstrapで作れるようになりたいなあと考えています。
そうすれば、もっと簡単に作れるので、今後勉強していきます！！

はじめに

今回は、HTMLとCSSについてです。
毎回検索しているので、忘備録として、、、

ブロックの中央よせ（左右）

index.html

<div class="parent">parent
　　　　<div class="child">child</div>
</div>

main.css

.parent{
      height: 200px;
      width: 200px;
      background: blue;
    }

    .child{
      height: 100px;
      width: 100px;
      background: red;
      margin: 0 auto;
    }

ブロックの中央よせ（上下・左右）

index.html

<div class="parent">parent
       <div class="child">child</div>
     </div>

main.css

.parent {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: blue;
      }

      .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        text-align: center;  /*以下2行で文字を中央よせにする*/
        line-height: 100px;
        background-color:red;
      }

はじめに

この記事では Dockerfile を用いた起動と docker-compose を用いた起動で nginx で HTML ファイルを表示するまでを記しています。
初心者のため間違い等ございましたらご指摘いただけると幸いです。

環境

macOS Catalina version 10.15.6
Docker version 19.03.13
Visual Studio Code version 1.42.1

前提条件

Dockerをインストールしていること。
インストールしていない場合は以下のリンクを参考にインストールしてみてください。
たぶん動くから！Docker始めてみよう！

Dockerfileを使った方法

Dockerfile を使った基本的な方法で起動していきます。

フォルダ構成

以下の様なフォルダ構成にしました。

フォルダ構成

root/
├── Dockerfile
├── conf
│   └── default.conf
└── src
    ├── css
    │   └── topPage.css
    ├── js
    │   └── topPage.js
    ├── nextPage.html
    └── topPage.html

各ファイル

各ファイルは以下の通りです。

Dockerfile

FROM nginx:latest

ADD ./conf/default.conf /etc/nginx/conf.d/default.conf
ADD ./src /usr/share/nginx/html

RUN echo "start nginx"

• FROM nginx:latest : FROM はDockerのイメージのベースとなるものの指定です。今回は nginx の最新版を使うという意味です。
• ADD {ローカルパス} {コンテナパス} : ローカルパスのものをコンテナパスに追加します。
• RUN : Dockerビルド時にDockerのコンテナ内で実行するコマンドを指定します。

/conf/default.conf

server {
        listen 80;
        listen 443;
        server_name localhost;

        root /usr/share/nginx/html;
        index topPage.html topPage.html;

        location / {
                try_files $uri $uri/ /src/index.html$query_string;
        }

        error_page   500 502 503 504  /50x.html;
                 location = /50x.html {
                   root   /usr/share/nginx/html;
        }
}

default.conf は nginx で用いる設定ファイルです。
当記事では深くは触れません。

/src/topPage.html

<html>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="./css/topPage.css">
  <script src="./js/topPage.js"></script>
  <body>
    <h1 style="color:red;">Hello Enginx with Docker!!</h1>
    <a href="./nextPage.html">next</a>
  </br>
  <p>css!</p>
  <button type="button" onclick="execute()">実行！!!
  </button>
  <div id="output"></div>
  </body>
</html>

src.nextPage.html

<html>
<body>
  <h1>nextPage!</h1>
  <a href="./topPage.html">back</a>
</body>
</html>

CSSとJavaScriptは動作するかどうかの確認のため適当に作成します。

/src/css/topPage.css

p {
  color : red;
}

/src/js/topPage.js

function execute() {
  var elem = document.getElementById("output");
  var now = new Date();
  var hour = now.getHours();
  var min = now.getMinutes();
  elem.innerHTML = "ただいまの時刻は" + hour + ":" + min + "です";
}

Dockerfileを使った起動

ファイルが用意できたらターミナルで Dockerfile が配置されているディレクトリへ移動し、 docker build コマンドでコンテナイメージを作成します。

$ docker build -t app:0.0.1 .

• -t : タグ付けすることができます。タグ付することでコンテナの起動やイメージを削除するときにタグ名が割り当てられるので管理が楽になります。また、:コロンで区切ることでバージョンを指定することもできます。
• . : Dockerfile が配置されているパスを指定します。今回は Dockerfile の配置されているディレクトリでコマンドを叩いているので . ですね。

コンテナイメージが作成できているかを確認します。

$ docker images
REPOSITORY              TAG                 IMAGE ID            CREATED             SIZE
app                     0.0.1               8ddbfbb33917        14 hours ago        133MB

app というコンテナイメージでバージョンが 0.0.1 の物が作成されていますね。

次にコンテナイメージから docker container run コマンドで実際にコンテナを起動させます。

$ docker container run --name app --rm -d -p 8080:80 app:0.0.1

• --name app : appという名前で起動します。こちらもコンテナイマージをビルドするときと同じく、イメージ名を指定すると管理が楽になるので指定します。
• --rm : コンテナを停止した際に自動的にコンテナを削除してくれます。
• -d : コンテナをバックグラウンドで実行します。
• -p {ローカルポート}:{コンテナポート} : ローカルのポートをコンテナのポートに転送します。
• app:0.0.1 : 起動するコンテナイメージを指定します。

起動しているか確認します

$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                  NAMES
f64c1f7ef410        app:0.0.1           "/docker-entrypoint.…"   7 seconds ago       Up 6 seconds        0.0.0.0:8080->80/tcp   app

コンテナは起動している様ですね。
http://localhost:8080/ へアクセスしてみます。

画面が表示され、CSSが動作していることも確認できますね！

「実行」ボタンを押してみます。

JavaScriptも動作していますね！

「next」リンクをクリックしてみましょう。

nextPageへのページ遷移もできましたね！

起動中のコンテナ内に入りたい場合は docker exec コマンドを使用します。

$ docker exec -it app bash -p

コンテナを停止させ、コンテナ一覧を確認します。

$ docker stop app
app
$ docker ps -a
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS                         PORTS               NAMES

停止していますね。
* -a : -aオプションは停止中のコンテナも表示してくれます。起動時に --rm オプションを付けていたので停止時に自動的にコンテナを削除してくれていますね。 --rm オプションを付けなかった場合どんどん停止されたコンテナが溜まっていくので注意です。削除したい場合は docker rm {CONTAINER ID} で削除してください。

docker-composeを使った方法

docker-conmpose はDockerをインストールすると一緒に入っています。
本来はwebサーバーやDBサーバー等、複数のコンテナの管理に用いると便利なのですが、私の技術が足りないため今回はnginxのみを乗せた docker-compose を作成します。

フォルダ構成

docker-compose.ymlを追加し、先ほどのDockerfileの構成をnginxフォルダ内に格納しました。

フォルダ構成

root/
├── docker-compose.yml
└── nginx
    ├── Dockerfile
    ├── conf
    │   ├── default.conf
    │   └── nginx.conf
    └── src
        ├── css
        │   └── topPage.css
        ├── js
        │   └── topPage.js
        ├── nextPage.html
        └── topPage.html

docker-compose.yml

docker-compose.yml でコンテナのイメージビルドからコンテナ起動までを定義します。

docker-compose.yml

version: '3'               #このdocker-compose.ymlファイルの"書式"のバージョン
services:                  #サービスについて定義する。
  nginx:                   #nginxについて定義するという宣言。
    build: ./nginx         #Dockerfileのパス
    image: app:0.0.2       #イメージ名を指定
    container_name: "app"  #コンテナ名を指定
    ports:                 #ポート公開内容を指定する。
      - "8080:80"          #コンテナ側で80だとホスト側で8080となる。
    volumes:               #ホストのフォルダをコンテナに追加する。 ホスト側:コンテナ側
      - ./nginx/conf/default.conf:/etc/nginx/conf.d/default.conf  #コンフィグファイルをコピー
      - ./nginx/src:/usr/share/nginx/html         #ソースをコピー

volumes は Dockerfile で記述している部分と被るので省略可能です。

DBサーバーや他のサービスに等を増やしたい場合は nginx と同列に追記していきます。

docker-composeを使った起動

docker-compose.yml が配置されているフォルダに移動し docker-compose up コマンドを使用します。

$ docker-compose up -d
Starting app        ... done
$ docker ps
CONTAINER ID        IMAGE                   COMMAND                  CREATED             STATUS              PORTS                               NAMES
94af0a7f210d        docker_plactice_nginx   "/docker-entrypoint.…"   2 minutes ago       Up About a minute   0.0.0.0:8080->80/tcp                app

起動が確認できますね！
Dockerfile での起動でポート等指定していたのに対し、 docker-compose での起動は楽ですね！

停止するときは docker-compose down コマンドを使います。

$ docker-compose down
Stopping app        ... done
$ docker ps -a
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES

起動中のコンテナはありませんね。

終わりに

当記事では docker-compose の便利さが全然引き出せていない状態で終わってしまいました。
今回は私の中で一旦整理したいという目的もあり、中途半端になって申し訳ありません。
次回は docker-compose で複数のコンテナの同時起動の記事が書けたらいいなぁ…。

はじめに

この記事では Dockerfile を用いた起動と docker-compose を用いた起動で nginx で HTML ファイルを表示するまでを記しています。
初心者のため間違い等ございましたらご指摘いただけると幸いです。

環境

macOS Catalina version 10.15.6
Docker version 19.03.13
Visual Studio Code version 1.42.1

前提条件

Dockerをインストールしていること。
インストールしていない場合は以下のリンクを参考にインストールしてみてください。
たぶん動くから！Docker始めてみよう！

Dockerfileを使った方法

Dockerfile を使った基本的な方法で起動していきます。

フォルダ構成

以下の様なフォルダ構成にしました。

フォルダ構成

root/
├── Dockerfile
├── conf
│   └── default.conf
└── src
    ├── css
    │   └── topPage.css
    ├── js
    │   └── topPage.js
    ├── nextPage.html
    └── topPage.html

各ファイル

各ファイルは以下の通りです。

Dockerfile

FROM nginx:latest

ADD ./conf/default.conf /etc/nginx/conf.d/default.conf
ADD ./src /usr/share/nginx/html

RUN echo "start nginx"

• FROM nginx:latest : FROM はDockerのイメージのベースとなるものの指定です。今回は nginx の最新版を使うという意味です。
• ADD {ローカルパス} {コンテナパス} : ローカルパスのものをコンテナパスに追加します。
• RUN : Dockerビルド時にDockerのコンテナ内で実行するコマンドを指定します。

/conf/default.conf

server {
        listen 80;
        listen 443;
        server_name localhost;

        root /usr/share/nginx/html;
        index topPage.html topPage.html;

        location / {
                try_files $uri $uri/ /src/index.html$query_string;
        }

        error_page   500 502 503 504  /50x.html;
                 location = /50x.html {
                   root   /usr/share/nginx/html;
        }
}

default.conf は nginx で用いる設定ファイルです。
当記事では深くは触れません。

/src/topPage.html

<html>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="./css/topPage.css">
  <script src="./js/topPage.js"></script>
  <body>
    <h1 style="color:red;">Hello Enginx with Docker!!</h1>
    <a href="./nextPage.html">next</a>
  </br>
  <p>css!</p>
  <button type="button" onclick="execute()">実行！!!
  </button>
  <div id="output"></div>
  </body>
</html>

src.nextPage.html

<html>
<body>
  <h1>nextPage!</h1>
  <a href="./topPage.html">back</a>
</body>
</html>

CSSとJavaScriptは動作するかどうかの確認のため適当に作成します。

/src/css/topPage.css

p {
  color : red;
}

/src/js/topPage.js

function execute() {
  var elem = document.getElementById("output");
  var now = new Date();
  var hour = now.getHours();
  var min = now.getMinutes();
  elem.innerHTML = "ただいまの時刻は" + hour + ":" + min + "です";
}

Dockerfileを使った起動

ファイルが用意できたらターミナルで Dockerfile が配置されているディレクトリへ移動し、 docker build コマンドでコンテナイメージを作成します。

$ docker build -t app:0.0.1 .

• -t : タグ付けすることができます。タグ付することでコンテナの起動やイメージを削除するときにタグ名が割り当てられるので管理が楽になります。また、:コロンで区切ることでバージョンを指定することもできます。
• . : Dockerfile が配置されているパスを指定します。今回は Dockerfile の配置されているディレクトリでコマンドを叩いているので . ですね。

コンテナイメージが作成できているかを確認します。

$ docker images
REPOSITORY              TAG                 IMAGE ID            CREATED             SIZE
app                     0.0.1               8ddbfbb33917        14 hours ago        133MB

app というコンテナイメージでバージョンが 0.0.1 の物が作成されていますね。

次にコンテナイメージから docker container run コマンドで実際にコンテナを起動させます。

$ docker container run --name app --rm -d -p 8080:80 app:0.0.1

• --name app : appという名前で起動します。こちらもコンテナイメージをビルドするときと同じく、イメージ名を指定すると管理が楽になるので指定します。
• --rm : コンテナを停止した際に自動的にコンテナを削除してくれます。
• -d : コンテナをバックグラウンドで実行します。
• -p {ローカルポート}:{コンテナポート} : ローカルのポートをコンテナのポートに転送します。
• app:0.0.1 : 起動するコンテナイメージを指定します。

起動しているか確認します

$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                  NAMES
f64c1f7ef410        app:0.0.1           "/docker-entrypoint.…"   7 seconds ago       Up 6 seconds        0.0.0.0:8080->80/tcp   app

コンテナは起動している様ですね。
http://localhost:8080/ へアクセスしてみます。

画面が表示され、CSSが動作していることも確認できますね！

「実行」ボタンを押してみます。

JavaScriptも動作していますね！

「next」リンクをクリックしてみましょう。

nextPageへのページ遷移もできましたね！

起動中のコンテナ内に入りたい場合は docker exec コマンドを使用します。

$ docker exec -it app bash -p

コンテナを停止させ、コンテナ一覧を確認します。

$ docker stop app
app
$ docker ps -a
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS                         PORTS               NAMES

停止していますね。
* -a : -aオプションは停止中のコンテナも表示してくれます。起動時に --rm オプションを付けていたので停止時に自動的にコンテナを削除してくれていますね。 --rm オプションを付けなかった場合どんどん停止されたコンテナが溜まっていくので注意です。削除したい場合は docker rm {CONTAINER ID} で削除してください。

docker-composeを使った方法

docker-conmpose はDockerをインストールすると一緒に入っています。
本来はwebサーバーやDBサーバー等、複数のコンテナの管理に用いると便利なのですが、私の技術が足りないため今回はnginxのみを乗せた docker-compose を作成します。

フォルダ構成

docker-compose.ymlを追加し、先ほどのDockerfileの構成をnginxフォルダ内に格納しました。

フォルダ構成

root/
├── docker-compose.yml
└── nginx
    ├── Dockerfile
    ├── conf
    │   ├── default.conf
    │   └── nginx.conf
    └── src
        ├── css
        │   └── topPage.css
        ├── js
        │   └── topPage.js
        ├── nextPage.html
        └── topPage.html

docker-compose.yml

docker-compose.yml でコンテナのイメージビルドからコンテナ起動までを定義します。

docker-compose.yml

version: '3'               #このdocker-compose.ymlファイルの"書式"のバージョン
services:                  #サービスについて定義する。
  nginx:                   #nginxについて定義するという宣言。
    build: ./nginx         #Dockerfileのパス
    image: app:0.0.2       #イメージ名を指定
    container_name: "app"  #コンテナ名を指定
    ports:                 #ポート公開内容を指定する。
      - "8080:80"          #コンテナ側で80だとホスト側で8080となる。
    volumes:               #ホストのフォルダをコンテナに追加する。 ホスト側:コンテナ側
      - ./nginx/conf/default.conf:/etc/nginx/conf.d/default.conf  #コンフィグファイルをコピー
      - ./nginx/src:/usr/share/nginx/html         #ソースをコピー

volumes は Dockerfile で記述している部分と被るので省略可能です。

DBサーバーや他のサービスに等を増やしたい場合は nginx と同列に追記していきます。

docker-composeを使った起動

docker-compose.yml が配置されているフォルダに移動し docker-compose up コマンドを使用します。

$ docker-compose up -d
Starting app        ... done
$ docker ps
CONTAINER ID        IMAGE                   COMMAND                  CREATED             STATUS              PORTS                               NAMES
94af0a7f210d        docker_plactice_nginx   "/docker-entrypoint.…"   2 minutes ago       Up About a minute   0.0.0.0:8080->80/tcp                app

起動が確認できますね！
Dockerfile での起動でポート等指定していたのに対し、 docker-compose での起動は楽ですね！

停止するときは docker-compose down コマンドを使います。

$ docker-compose down
Stopping app        ... done
$ docker ps -a
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES

起動中のコンテナはありませんね。

終わりに

当記事では docker-compose の便利さが全然引き出せていない状態で終わってしまいました。
今回は私の中で一旦整理したいという目的もあり、中途半端になって申し訳ありません。
次回は docker-compose で複数のコンテナの同時起動の記事が書けたらいいなぁ…。

まるばつゲームの制作

3×3のマス目を作り、マスをクリックすると○と×を交互に表示できるようにします。

まず、body要素にonload属性を付与して、ブラウザがページを読み込んだときにマス目を画面に表示するように設定します。

<body onload="init()">
  <h2>⚪︎×ゲーム</h2>
  <table id="table"></table>
  <p>※ マスをクリックしてください。</p>
</body>

script要素内ではまず、変数countを定義します。初期値はfalseにします。

init関数内はtable要素に「createElement」メソッドで作成したtr要素を3つ追加します。tr要素には同じく「createElement」メソッドで作成したtd要素を3つ追加します。
「document.createElement("要素名")」で指定した要素を作成することができます。
「要素名.appendChild(要素名２)」で親要素（要素名）に子要素（要素名２）を追加することができます。
tdにはonclickプロパティでmark関数を代入します。これでtd要素であるマス目をクリックしたときにマス目に○や×を表示できるようにします。

  <script>
    let count = false;

    function init() {
      for(let r = 0; r < 3; r++) {
        let tr = document.createElement("tr");
        for(let d = 0; d < 3; d++) {
          let td = document.createElement("td");
          td.onclick = mark;
          tr.appendChild(td);
        }
        table.appendChild(tr);
      }
    }

mark関数には引数にeを指定します。マス目をクリックしたときのクリックしたtdのデータを取得することができます。
「let src = e.target;」で取得したデータを変数srcに代入します。
その後のif文は変数countがfalseのときは「src.textContent = "○";」でマス目に○が表示されるようにします。そしてcountにtrueを代入します。
elseの後はcountがfalseでないときはマス目に×を表示してcountにfalseを代入します。
countがfalseのときは○、trueのときは×を表示することを交互に行えるようにしています。

    function mark(e) {
      let src = e.target;
      if(count === false) {
        src.textContent = "⚪︎";
        count = true;
      } else {
        src.textContent = "×";
        count = false;
      }
    }
  </script>

以下のコードをコピーしてファイルに貼り付ければ試すことができます。

<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <title>marubatu</title>

  <style>
    table {
      border-collapse: collapse;
    }
    td {
      width: 100px;
      height: 100px;
      font-size: 60px;
      text-align: center;
      border: 1px solid black;
    }
  </style>

  <script>
    let count = false;

    function init() {
      for(let r = 0; r < 3; r++) {
        let tr = document.createElement("tr");
        for(let d = 0; d < 3; d++) {
          let td = document.createElement("td");
          td.onclick = mark;
          tr.appendChild(td);
        }
        table.appendChild(tr);
      }
    }

    function mark(e) {
      let src = e.target;
      if(count === false) {
        src.textContent = "⚪︎";
        count = true;
      } else {
        src.textContent = "×";
        count = false;
      }
    }
  </script>
</head>

<body onload="init()">
  <h2>⚪︎×ゲーム</h2>
  <table id="table"></table>
  <p>※ マスをクリックしてください。</p>
</body>
</html>

デバッガで直にHTMLをいじるときに透過させたいとき。

style="opacity:0.5;"

ESPカードの作成

今回はESPカードを作成します。STARTボタンをクリックするとカードの絵柄がシャッフルされるので、それぞれの絵柄が何か当ててください。カードをクリックすると表面にひっくり返ります。

button要素にonclick属性を付与して、ボタンをクリックしたときに「clicked」関数が発火します。

<body>
  <table id="table"></table>
  <p>※ ☆、○、×、△、□を当ててください
  </p>
  <button onclick="clicked()">START</button>
</body>

script要素内はclicked関数とflip関数に分かれます。
clicked関数内はカードをシャッフルする箇所とカードを並べる箇所に別れます。
flip関数はカードをクリックしたときに裏面から表面にひっくり返す機能があります。

  <script>
    let cards = ["☆", "○", "×", "△", "□"];
    function clicked() {
      for(let i = cards.length - 1; i >= 0; i--) {
        let j = Math.floor(Math.random()*i+1)
        let k = cards[i];
        cards[i] = cards[j];
        cards[j] = k;
      }

      let table = document.getElementById("table");
      table.innerHTML = "";

      for(let l = 0; l < cards.length; l++) {
        let td = document.createElement("td");
        td.className = "back";
        td.value = cards[l];
        td.onclick = flip;
        table.appendChild(td);
      }
    }

    function flip(e) {
      let td = e.srcElement;
      td.className = "";
      td.textContent = td.value;
    }
  </script>

まず、配列cardsを作成して星や丸などの図形を要素に指定します。

for(let i = cards.length-1; i >= 0; i--) {
  ・
  ・
}

の箇所でカードをシャッフルします。
イメージとしては配列の一番最後の要素にランダムに別の配列の値を代入して、ランダムに選ばれた要素には最後の要素の値を代入することを繰り返します。最後の要素はfor文で繰り返すごとに一つずつ減っていきます。最終的にcards内の値だけシャッフルされます。

次にシャッフルされたカードを並べていきます。
「let table = document.getElementById("table");」でbody内のtable要素を取得します。「table.innerHTML = "";」はボタンを2回目以降クリックした際にそれまでのtable内の要素が残ったままになっているので、tableを空にしています。つまり、これをしないと画面に古いカードが残ったままになってしまいます。

      let table = document.getElementById("table");
      table.innerHTML = "";

for(let l = 0; l < cards.length; l++) {
  ・
  ・
}

の箇所でカード並べていきます。table要素に新たに作成したtd要素を追加していきます。td要素にはvalueプロバティにcards内の値を代入し、onclickプロパティに関数flipを代入します。

flip関数内は引数にeを指定することでカードをクリックした際にそのカードのデータを取得できるようにします。「let td = e.srcElement」で取得したデータを変数tdに代入します。「td.className = "";」でカードに付与されているclass属性を空にすることでカードを表面にします。「td.textContent = td.value;」で表面のカードに図形を表示します。

以下のコードをコピーしてファイルに貼り付ければ試せます。style要素内の.backセレクタに指定しているbackground-imageのurlの画像だけ自分で設定してください。

<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <title>ESPcard</title>

  <style>
    button {
      width: 100px;
      height: 30px;
    }
    td {
      width: 60px;
      height: 100px;
      border: 1px solid black;
      border-radius: 10px;
      font-size: 50px;
      text-align: center;
      vertical-align: middle;
    }
    .back {
      background-image: url(card.png);
      background-size: 60px 100px;
    }
  </style>

  <script>
    let cards = ["☆", "○", "×", "△", "□"];
    function clicked() {
      for(let i = cards.length - 1; i >= 0; i--) {
        let j = Math.floor(Math.random()*i+1)
        let k = cards[i];
        cards[i] = cards[j];
        cards[j] = k;
      }

      let table = document.getElementById("table");
      table.innerHTML = "";

      for(let l = 0; l < cards.length; l++) {
        let td = document.createElement("td");
        td.className = "back";
        td.value = cards[l];
        td.onclick = flip;
        table.appendChild(td);
      }
    }

    function flip(e) {
      let td = e.srcElement;
      td.className = "";
      td.textContent = td.value;
    }
  </script>
</head>

<body>
  <table id="table"></table>
  <p>※ ☆、○、×、△、□を当ててください
  </p>
  <button onclick="clicked()">START</button>
</body>
</html>

どうも7noteです。WEB制作時によく使うブラウザのショートカットを紹介。

WEB開発者は常にスピードや効率化との勝負です。（クオリティも大事）
ブラウザの標準機能を使いこなしてさらに効率化UPを図りましょう！

今回紹介するのはGoogleChromeでのショートカットになりますが、他のブラウザでもほぼ同じショートカットが使えると思います。

よく使うショートカット一覧

キー（Win）	キー（mac）	機能	説明
[Ctrl] + [N]	[command] + [N]	新しいウィンドウを開く	---
[Ctrl] + [T]	[command] + [T]	新しいタブを開く	---
[Ctrl] + クリック	[command] + クリック	リンク先を別タブで開く	---
[Ctrl] + [W]	[command] + [W]	現在のタブを閉じる	---
[Ctrl] + [Shift] + [T]	[command] + [shift] + [T]	最近閉じたタブを開く	一番最後に閉じたタブを再度開きます。連続使用も可能で超便利。
[Ctrl] + [TAB]	[command] + [alt] + [→]	次のタブへ移動	---
[Ctrl] + [Shift] + [TAB]	[command] + [alt] + [←]	前のタブへ移動	---
[Ctrl] + [Shift] + [R]	[command] + [shift] + [R]	スーパーリロード	キャッシュなどをクリアしてページをリロード。CSSがなかなか反映されない時などに必須。
[Ctrl] + [+]	[command] + [+]	拡大	---
[Ctrl] + [-]	[command] + [-]	縮小	---
[Ctrl] + [0]	[command] + [0]	拡大縮小のリセット	拡大縮小していた場合、デフォルト（100%）のサイズに戻す。
[Ctrl] + [F]	[command] + [F]	ページ内検索	ページ内に使われている言葉を検索できる。
[Ctrl] + [L]	[command] + [L]	アドレスバーにフォーカス	アドレスバー（URLが書いてるところ）にフォーカスが当たる。
[Ctrl] + [U]	[command] + [U]	ページのソースを表示	現在見ているページのソース（HTML）を見ることができる。
[F12]	[F12]	検証ツールを表示	---

その中でも特に覚えておきたいショートカット3選

① 最近閉じたタブを開く

windowsショートカット → [Ctrl] + [Shift] + [T]
macショートカット → [command] + [shift] + [T]

これは初めて知ったときからずっと重宝して使ってます。
使えるシチュエーションとしては・・・

・「あ、さっきまで参考にしていたサイトを間違えて閉じちゃった！」
・「修正が終わったページ、やり直しが出た。。。もうページ閉じちゃったのに・・・」
・「他のウィンドウと間違えてブラウザの閉じるボタン押しちゃった！」

などなど、使える場面が豊富でかつミスをカバーしてくれるので圧倒的な時間短縮が可能になります。
特にすごいのが、間違えてウィンドウごと閉じてしまった場合。この場合でも、新規ウィンドウを立ち上げ直して、ショートカットを入力すると閉じたウィンドウのタブがすべて復元されます。

② スーパーリロード

windowsショートカット → [Ctrl] + [Shift] + [R]
macショートカット → [command] + [shift] + [R]

これはオススメというよりも、このショートカットキーがないと話にならないレベル。
ブラウザが保持するキャッシュをクリアしなければなかなかCSSが反映されないので・・・

・「あれ、おっかしいなぁ、CSSあってると思うのに反映されない。」

なんて泥沼にハマってしまい無駄な時間を過ごすことになります。
無駄な時間を省いて、チェックはテキパキと効率よく進めたいですね。

③ 検証ツールを表示

windowsショートカット → [F12]
macショートカット → [F12]
※PCによってはファンクションキー[fn]も同時に押す必要があります。

こちらも暗記必須のショートカットキーになります。
検証ツールの詳しい使い方については省略しますが、htmlのソースの確認、cssの微調整、javascriptのデバッグ等開発する上で必須のショートカットになります。

このショートカットキーを知っているか知らないかでは開発速度が倍以上違うと言っても過言ではないほど重要なショートカットキーなので、もしまだこの記事を読むまで知らなかったという方は今すぐ検索?！！

組み合わせ技 例

ショートカットキー単体の紹介はしましたが、ここからはできるだけ実践に近いショートカットキーの使い方を紹介できればと思います。

其の１） 「ページのソースを表示」 からの→ 「ページ内検索」

windowsショートカット ➡ 「 [Ctrl] + [U] 」→ 「 [Ctrl] + [F] 」
macショートカット ➡ 「 [command] + [U] 」→ 「 [command] + [F] 」

HTMLソースを表示したのち、探したいclass名やid名、ファイル名を検索。
マウス操作なら10秒〜20秒、大掛かりなサイトなら30秒以上かかる作業が5秒以内で完了できます。

其の2） 「リンク先を別タブで開く」 からの→ 「次のタブへ移動」 からの→ 「現在のタブを閉じる」

windowsショートカット ➡ 「 [Ctrl] + クリック 」 → 「 [Ctrl] + [TAB] 」 → 「 [Ctrl] + [W] 」
macショートカット ➡ 「 [command] + クリック 」 → 「 [command] + [alt] + [→]」 → 「 [command] + [W] 」

あまり頻出するシチュエーションではないのですが、wordpressなどで複数の記事を修正しなければならない時に同一タブで、

「開く」→「開かれるのを待つ」→「修正して保存する」→「戻るボタンを押す」→「戻るのを待つ」

ってやっていると待ちタイムが2回もあるのです。
この待ちタイムを削減するために、私はいつも次のような手順で行っています。

「10個〜20個一気に別タブで開く」→「修正して保存」→「保存中に次のタブへ移動」→（繰り返し）→「連続でタブを閉じる」

本当はデータベースを直接見て、SQL文とかを書くほうがいいのですが私は思いっきりフロントメインだったのであまり得意ではなく、ついこのような手法をとってしまいます。データベースさわれる人超尊敬。

まとめ

なんにせよショートカットキーが使えると1回1回はほんの数秒の時間短縮でも塵も積もればで1週間、1ヶ月で見ると数時間分の短縮になったりするものです。
最初はショートカットキーを覚えたり、使いこなすまでに時間がかかるかもしれませんが滅気ずにプログラミングに挑戦するのと同じ気持ちでショートカットも覚えていくといいかもですね。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ