【jsPsych】cssの雰囲気を理解する

前回少しだけ見栄えを整えた同意画面を投稿しました(https://qiita.com/takato_oyama/items/1a9074237c13231ec7b3)。
class名を指定したり、CSSをちょっとだけ書いたのですが、いまいちピンときてない人もいると思うので、HTML、CSS、JavaScriptの雰囲気を簡単に説明します。
(素人の記事です、暖かい目で見てやってください。)

# HTML, CSS, javaScriptの関係
## HTML
HTMLとは「Hyper Text Markup Language」の略です。
webページを作るときに使われます。

基本的にはただのテキストなのですが、それぞれのテキストに目印(タグと呼ばれます)をつけてどんな役割を果たしているのかをコンピュータに明示します。

例えば、
```<p>hoge</p>```
とhtmlでは書きますが、「hoge」というテキスト(要素)は段落(pタグ)を表しています。
タグの終わりにはスラッシュ(/)をつけてどこからどこまでが要素なのかを明示してやります（imgタグなど例外はあります）。

```<p>```タグは段落を表しますが、タグにはいろいろな種類があります。どんなものを画面上に表示したいのかで、決めていきます。

```<p>```  段落を示します。
```<li>``` 箇条書きを示します。
```<img>```画像を示します。
```<table>```表を示します。
```<div>``` これ自体に意味はありません。divの中にあるものをグループとして認識すると思ってもらえば良いです。



HTMLは基本的な構造、骨組みを作っているものだと言えます。
とりあえず組み立てたプラモデルで、色もついていない味気ない状態とでも言いましょうか。

## CSS
CSSとは「Cascading Style Sheets」の略です。

Styleを指定することができます。
HTMLで指定された構造のフォントサイズや色、位置などなど見た目・装飾をいじることができます。

プラモデルにシールを貼ったり、色を塗ったりするような感じですね。

## JavaScript
webページに複雑な機能を持たせることができるプログラミング言語です。
できることは様々です。

外見だけそれっぽいプラモデルからラジコンに変化させるような感じです。

jsPsychはJavaScriptを使って、時間や反応に基づいてHTMLの構造を変化させています。
de Leeuw氏とんでもないです。

# idとclass
さて、上述したようにHTMLでは要素がどんな意味を持っているのか、タグで示しています。

このタグを使って構造を示してやるのですが、こいつらには名前をつけることができます。
この名前の付け方にはidとclassという二種類あります。

idとはその名の通り(identifier)、同じidを他のタグにつけることができません。
<b>一つのhtml構造に一回しか登場することができません。</b>

classは何度でも使えます。
以下のように指定します

```html
<p id="oyama">小山</p> 
<p class="senshu">佐藤</p>
<p class="senshu">鈴木</p>
```

idとclassの両方を指定することもできます。
また、一つのタグにclassを2つ以上指定することができます。その際は、class名の間をスペースで区切ります。

```html
<p id="name" class="senshu">小山</p>
<p class="senshu psychology">小山</p>
```



さて、CSSはこのidとclassに紐付けてスタイルを調整していきます。
ここでは、class名が「name」の要素の色を赤にするよう指示しています。
そして、id名が「oyama」の要素の色を緑にするよう指示しています。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="rNrVEbK" data-user="takat0-ch" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/takat0-ch/pen/rNrVEbK">
  Untitled</a> by takato (<a href="https://codepen.io/takat0-ch">@takat0-ch</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

CSSでidやclassを指定する時は<b>「.」</b>、idを指定する時は<b>「#」</b>をつける必要があります。

### divタグ

class名を何度も書くのは面倒です。
そんな時は```<div>```タグを使ってグループ化してしまいます。
(親要素、子要素などググったらより理解が深まると思います)

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="WNKvVrE" data-user="takat0-ch" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/takat0-ch/pen/WNKvVrE">
  div</a> by takato (<a href="https://codepen.io/takat0-ch">@takat0-ch</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### タグごとに装飾

idとclassごとにCSSを適用させていましたが、「ある特定のタグの要素は全て〜にする」のように指定することができます。

```<p>```タグの要素は全てフォントサイズを24pxにし、
```<li>```タグの要素は全て色を赤にするようにします。

さらに、「あるclassの特定のタグは全て〜にする」のように指定することができます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="wvxaVoe" data-user="takat0-ch" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/takat0-ch/pen/wvxaVoe">
  noclass</a> by takato (<a href="https://codepen.io/takat0-ch">@takat0-ch</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## CSSはどこに書く？

さて、CSSの書き方はざっくりと説明しましたが、実際に書く方法は大きく分けて3つあります。

### 1. 直接タグに書く

jsPsychを触ったことがあるヒトなら必ずやったことがある方法です。
タグのstyleに直接書きます。

```html
<p style="font-size: 24px; color: red;">hoge</p>
```

この方法はタグに直接styleを適用しているのでidやclassを指定する必要はありません。
簡単に適用できるので楽ですが、最終的なコードはかなり煩雑になります。
長いコードになるとどこで何をしているのかが分かりにくくなります。

### 2. styleタグに書く
jsPsychを使うときののhtmlファイルは以下のようになっていると思いますが、その中に```<style>```タグを作り、そこに書くことができます。
ただし、この方法だとcognition.runのサービスを使うことはできません。
(https://www.cognition.run/)
(https://qiita.com/kurokida/items/5d75c8b13786ec22b294)

```html
<!DOCTYPE html>
<html>
        <head>
            <meta charset="UTF-8">
            <title>hoge</title>
            <script src="https://unpkg.com/jspsych@7.2.1"></script>
            <link href="https://unpkg.com/jspsych@7.2.1/css/jspsych.css" rel="stylesheet" type="text/css" />
        <style>
            .name{
                color: red;
            }
        <style>
    </head>
    <body>
    </body>
    <script>
        const jsPsych = initJsPsych();
    </script>
</html>
```

### 3. 別途cssファイルを作成する

新たにcssファイルを作成し、それをhtml上で読み込む方法です。
読み込む際、パスには注意するようにしましょう。
https://zenn.dev/snishiyama/articles/8b7d82b62a433a

```html
<head>
    <meta charset="UTF-8">
    <title>hoge</title>
    <script src="https://unpkg.com/jspsych@7.2.1"></script>
    <script src="https://unpkg.com/@jspsych/plugin-fullscreen@1.1.0"></script>
    <link href="https://unpkg.com/jspsych@7.2.1/css/jspsych.css" rel="stylesheet" type="text/css" />
    <link href="addition.css" rel="stylesheet" type="text/css" />
</head>
```

### CSSを適用した例

CSSでできることは様々ですが、例えば要素を横並びにしたいとします。
flexなどを使えば、```<img>```タグや```<p>```タグを横並びに配置することができます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="poZJMmG" data-user="takat0-ch" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/takat0-ch/pen/poZJMmG">
  Untitled</a> by takato (<a href="https://codepen.io/takat0-ch">@takat0-ch</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

ここで言いたいことはflexの紹介というよりもjsPsychで見栄えを整えたいときはCSSでググれば良いということです。
- 「css 画像 横並び」
- 「css フォントサイズ」
のように検索すれば山のようにやり方が出てきます。

「タグ」、「idとclass」、「要素」という用語を知っていれば、(多分)なんとかなります。

# 終わりに
わざわざclassを指定してCSSを書くのは面倒だと思うヒトがいるでしょう。
正直動けばなんでも良いので、そこまでこだわる必要はないと思います。

ただ、教示の画面などは多くの場合、どのような実験でも似たような構成になると思うので、使い回しすることがあります。
煩雑なコードをコピペするとミスが出てきたり、思ったように修正できないこともあるので、classやCSSを適切に使うと良いかと思います。

また、複数人で分担して実験を作る際はclass名やCSSを統一することで出てくる画面も統一感が出ます。
教示1と教示2で見た目が全然違うのは避けたいですしね。


今回書いたことは正確ではないところが多々あります。
正確に書いたところで分かりにくかったら意味ないし、htmlとは何か、cssとは何かといった記事はググったらたくさん出てきます。

htmlとcss、JavaScriptをちょっと調べるきっかけになってくれたらハッピーです。