血統表を作るメモ

血統表&関係図の完成品はこちら
もくじ

｢HTML+CSS+JavaScript｣で血統表データベースを作るメモ
こちらの49さんのコードを元に自分なりに調べながらメモを取るページ

HTML はブラウザにどこに見出しや画像などの要素があるか知らせる為のもの
<div(要素名(タグ名)) id="(id名)" class="(class名)">内容</div>
のようにして使う
要素名にはdivとかpとかspanとかimgとかいろいろある(必要になったらググって)
class属性は複数のタグにつけられるが
id属性はページ全体の中で1つのタグにしかつけられない

CSSはその要素たちに装飾をつける為のもの
<link rel="stylesheet" href="(.cssファイルのリンク)">
のように拡張子.cssのファイルをリンクさせるか
<style>(CSSの内容)</style>
のようにstyle要素を使ってそのままHTMLに記入する2通りのパターンがある
nanoは画像以外をup出来ないので基本後者の方法を使用する
あらかじめ用意されたcssファイルや外部アップロードしたcssファイルなどがある時は前者の方法を使用する

JavaScriptはページに動きをつける為のもの
<script src="(.jsファイルのリンク)"></script>
のように拡張子.jsのファイルをリンクさせるか
<script>(CSSの内容)</script>
のようにscript要素を使ってそのままHTMLに記入する2通りのパターンがある
こちらもcssと同様
・外部スクリプトを導入する時は前者
・nanoで打ち込む時は後者
を使用する

とでも覚えて頂ければ…
今回はHTMLとJavaScriptがメインになります

使用しているもの

nano以外でJavaScriptが動くサイトだとはてなブログとかがあります

Vue.jsはJavaScript用のフレームワーク(開発用の楽なテンプレ)で、
HTMLの文法さえ理解出来てたら、それなりに…まあ…なツールらしいです(細かいことは知らん)
HTMLタグにv-〇〇みたいなVue用の属性を書き込んで使います

Tailwind CSSはCSSフレームワーク(あらかじめ部品用のCSSが設定されているCSSのこと)で、
いちいちCSS設定するのめんどいから小分けしたclassに各スタイルを入れてる感じのやつです
CSS弄れない環境やVue用の動的なタグに仕込むのに向いてる？のかも？
その代わりめちゃくちゃclassが汚くなるのと、導入するともれなく強制的に既存のCSSをリセットしてしまうので合う合わないがあります

このように配置すれば動くはず… 
<div id="a">
  <!-- htmlタグの内容 (後で消してね) -->
  ここに内容が入ります
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.min.js"></script>
<!-- ↑vue.jsのCDNの導入 -->

<script>
//JavaScript,vue.jsの内容 (後で消してね)
let a = 1;
</script>

<script src="https://cdn.tailwindcss.com/3.1.8"></script>
<!-- ↑Tailwind CSSのCDNの導入 -->

<style>
/* CSSの内容 (後で消してね) */
#a{
  background-color:pink;
}
</style>

<div>にHTML、<script>にJavaScript、<style>にcssのコードを入力していけばOK
Tailwindは複雑な処理をするためjsのリンクで動いてるようです

step1

見本のゾーン49さんのsource code

{{horseData1.name}}

{{horseData1.birthyear}} {{horseData1.color}}

コードを載せるゾーン
html,vue.jsのコード 
<div id="app">
<div 
 class="p-1 w-[140px] flex flex-col justify-center break-words"
 :class="horseData.sex === 'male' ? 'bg-cyan-100' : 'bg-pink-200'">
<p class="text-sm">{{horseData.name}}</p>        
<p class="text-xs">{{horseData.birthyear}} {{horseData.color}}</p>
</div>
</div>
JavaScript,vue.jsのコード 
const horseData = {
  name: "サクラバクシンオー",
  sex: "male",
  birthyear: "1989",
  color: "鹿毛"
}

let app = new Vue({
  el: "#app",
  data: horseData
});
メモするゾーン

:class

:class="horseData.sex === 'male' ? 'bg-cyan-100' : 'bg-pink-200'"

:classはvue特有の属性v-bind:classの略、動的なクラス付与に利用できる
今回はhorseDataの配列にあるsexの値がmaleだったらbg-cyan-100のクラスを付与するという式

｢データ参照元のキー｣ === ｢値｣ ? ｢true｣ : ｢false｣
のような 「xxx ? yyy : zzz」みたいな書き方を
三項演算子と呼ぶらしい

{｢true｣: (｢データ参照元のキー｣ === ｢値｣)}
のような書き方は配列構文らしい
その場合
[{'bg-cyan-100': (horseData.sex === 'male')},{'bg-pink-200': (horseData.sex === 'female')}]
みたいな書き方になるんだと思う

tailwind

p-1 w-[140px] flex flex-col justify-center break-words

p-1はpadding:0.25rem;がcss設定されているtailwindのクラス名
CSSのpaddingというプロパティは指定した要素の内側の余白を設定するもの
外側の余白を設定する場合はmargin(m-)を使う
remという単位はルート(最上位要素)(htmlタグでいう<html>、CSSでいう:root)に設定されている値から何倍の大きさを指定するか？といった単位らしい
tailwindの｢p-1 = padding:0.25rem;｣は4pxらしい
　こまけぇこたぁいいんだよ！！
ちなみにpadding:1rem;は16pxでp-4のクラスに設定されている
tailwindではp-0.5からp-3.5までは0.125rem(2px)つづ増えるので細かい調整はp-3.5までで済ますようにする
pの横にそれぞれの方向の頭文字をつけることによって方向ごとに調整出来る

    padding幅一覧
  • p-0
    padding:0;
  • p-0.5
    padding:0.125rem; (2px)
  • p-1
    padding:0.25rem; (4px)
  • p-1.5
    padding:0.375rem; (6px)
  • p-2
    padding:0.5rem; (8px)
  • p-2.5
    padding:0.625rem; (10px)
  • p-3
    padding:0.75rem; (12px)
  • p-3.5
    padding:0.875rem; (14px)
  • p-4
    padding:1rem; (16px)
  • p-5
    padding:1.25rem; (20px)
  • p-6
    padding:1.5rem; (24px)
  • p-8
    padding:2rem; (32px)
  • p-10
    padding:2.5rem; (40px)
  • p-12
    padding:3rem; (48px)
  • p-14
    padding:3.5rem; (56px)
  • p-16
    padding:4rem; (64px)
  • p-20
    padding:5rem; (80px)
  • p-24
    padding:6rem; (96px)
  • p-28
    padding:7rem; (112px)
  • p-32
    padding:8rem; (128px)
  • p-36
    padding:9rem; (144px)
  • p-40
    padding:10rem; (160px)
  • p-44
    padding:11rem; (176px)
  • p-48
    padding:12rem; (192px)
  • p-52
    padding:13rem; (208px)
  • p-56
    padding:14rem; (224px)
  • p-64
    padding:16rem; (256px)
  • p-72
    padding:18rem; (288px)
  • p-80
    padding:20rem; (320px)
  • p-96
    padding:24rem; (384px)
  • p-px
    padding:1px;
    padding方向一覧
  • pt-1
    padding-top:0.25rem;
  • pr-1
    padding-right:0.25rem;
  • pb-1
    padding-bottom:0.25rem;
  • pl-1
    padding-left:0.25rem;
  • px-1
    padding-right:0.25rem;
    padding-left:0.25rem;
  • py-1
    padding-top:0.25rem;
    padding-bottom:0.25rem;
  • p-1
    padding-top:0.25rem;
    padding-right:0.25rem;
    padding-bottom:0.25rem;
    padding-left:0.25rem;

w-[140px]はwidth:140px;がcss設定されているtailwindのクラス名
CSSのwidthというプロパティは横幅を設定するものである
縦幅を設定する場合はheight(h-)を使う
paddingのようにw-1にはwidth:0.25rem;が設定されているが、[ ]で囲うことによってpx単位の指定も出来るらしい(paddingも同様に設定できる)
他に何個か分数(割合)で指定出来るクラスがあり、それぞれの割合に合った%単位が設定されている
分数のクラスは値が可変するようなスマホやパソコンでも比率が変わらないデザイン(レスポンシブデザイン)とかに使うと便利そう

    その他のwidth幅設定一覧
  • w-1/2
    width:50%;
  • w-1/3
    〜w-2/3
    width:33.333333%;
    〜66.666667%;
  • w-1/4
    〜w-3/4
    width:25%;
    〜75%;
  • w-1/5
    〜w-4/5
    width:20%;
    〜80%;
  • w-1/6
    〜w-5/6
    width:16.666667%;
    〜83.333333%;
  • w-1/12
    〜w-11/12
    width:8.333333%;
    〜91.666667%;
  • w-auto
    width:auto;
  • w-full
    width:100%;
  • w-screen
    width:100vw;

flexはdisplay:flex;がcss設定されているtailwindのクラス名
CSSのdisplayというプロパティは要素の表示形式を設定する為のもので、
display:inline;だと<span>とかのテキストの装飾エリア、
display:block;だと<div>とかのブロック状態のエリア、
display:inline-block;はブロック要素のように縦横幅を指定できるテキスト装飾エリア…
みたいな感じでいろいろあります
じゃあdisplay:flex;って何？なのかというと
「この中に入ってる子要素を自動で綺麗に並べるわ」エリアです
上のclass一覧図はflexを使ってどうにかこうにかしておる
flexはブロック状態の自動で綺麗に並べるわエリアで、インラインブロックの状態で自動で綺麗に並べるわエリアにしたいですって時はtailwindではinline-flex(display:inline-flex;)クラスを使おう

flex-colはflex-direction:column;がcss設定されているtailwindのクラス名
flexの設定用プロパティ
flex-directionはflexの中の子要素の並びの方向に変更を加えるオプション
columnだと縦並びにする

justify-centerはjustify-content:center;がcss設定されているtailwindのクラス名
flexの設定用プロパティ
justify-contentはflexの中の子要素を揃える位置を指定するオプション
centerだと中央揃えになる

    justify設定一覧
  • justify-start
    justify-content:flex-start;
  • justify-end
    justify-content:flex-end;
  • justify-center
    justify-content:center;
  • justify-between
    justify-content:space-between;
  • justify-around
    justify-content:space-around;
  • justify-evenly
    justify-content:space-evenly;

break-wordsは改行を制御するtailwindのクラス名
break-wordsにはCSSのoverflow-wrap:break-word;が設定されている
CSSのoverflow-wrap:break-word;は必要に応じて単語の途中で改行を追加する設定
改行設定一覧

bg-cyan-100 bg-pink-200

bg-cyan-100は背景(bg)にcyanの色の100の濃さを設定するtailwindのクラス名
tailwindには色々なカラーパレットがある

    色一覧.jp
  • bg-inherit
  • bg-current
  • bg-transparent
  • bg-black
  • bg-white
  • bg-slate-500
  • bg-gray-500
  • bg-zinc-500
  • bg-neutral-500
  • bg-stone-500
  • bg-red-500
  • bg-orange-500
  • bg-amber-500
  • bg-yellow-500
  • bg-lime-500
  • bg-green-500
  • bg-emerald-500
  • bg-teal-500
  • bg-cyan-500
  • bg-sky-500
  • bg-blue-500
  • bg-indigo-500
  • bg-violet-500
  • bg-purple-500
  • bg-fuchsia-500
  • bg-pink-500
  • bg-rose-500

text-sm text-xs

text-smはテキストの大きさが設定されているtailwindのクラス名
CSSのfont-size:0.875rem;が設定されている
text-baseのクラスにfont-size:1rem;のCSSが設定されているみたい

    フォントサイズ一覧
  • text-xs
    font-size:0.75rem;
  • text-sm
    font-size:0.875rem;
  • text-base
    font-size:1rem;
  • text-lg
    font-size:1.25rem;
  • text-xl
    font-size:1.25rem;
  • text-2xl
    font-size:1.5rem;
  • text-3xl
    font-size:1.875rem;
  • text-4xl
    font-size:2.25rem;
  • text-5xl
    font-size:3rem;
  • text-6xl
    font-size:4rem;
結論：馬1頭の情報を表示する部分に、
内枠余白を1(0.25rem)スペース分(p-1)、横幅を140px(w-[140px])、中身を整列させる形式にし(flex)、縦並びで(flex-col)、中揃え(justify-center)、文章の自動改行をし(break-words)、
名前の部分はSサイズぐらいの文字の大きさで、生年と毛色の部分はSSサイズぐらいの文字の大きさで表示して、
牡だった場合はシアン、牝だった場合はピンク色の背景色をつける
ということ

js、vue

const horseData = {｢略｣}

const ｢名前｣ = ｢内容｣
のように内容に名前(変数名)をつけることができる
別の式で中身を参照したい場合は名付けた名前を記入すれば参照できる

constはJavaScriptの「定数」と呼ばれる値を収めるためのもので、中身を変えたくない場合に使われる

中身を変える必要(再代入)がある状況の場合はconstではなくletやvarなどの「変数」を使う
let(constも)は{}で括られた範囲の中で使用した場合、その{}の中でしか使用できないが、
varはどこでも使用することができる

[ "内容1" , "内容2" , "内容3" ]
のようなものを配列(array)という
配列の中に入っているものは要素(element)という
配列内の各要素には先頭の0から順に番号が自動的に割り振られており、それを添字(index)と呼ぶ
配列外で
配列名[添字]
のように指定すると1つ1つの要素にアクセスできる

{ キー名1 : "内容1" ,
キー名2 : "内容2" ,
キー名3 : "内容3" }
のような数字の代わりに添字に名前をつけた配列を連想配列という
配列外では
配列名.キー名
のように指定すると要素にアクセスできる

[
["内容a" , "内容b"],
["内容c" , "内容d"]
]
のように配列の中に配列が入っているものを多次元配列という
配列外では
親配列名[子配列の添字][要素の添字]
のように指定すると要素にアクセスできる

[
{キー名1 : "内容a" , キー名2 : "内容b"},
{キー名1 : "内容c" , キー名2 : "内容d"}
]
のような配列の中に連想配列がある場合は配列外では
親配列名[子配列の添字]["要素のキー名"]
のように指定すると要素にアクセスできる

Vue.jsの場合、new vueの配列の中のdata:の要素に入っているデータなどをHTMLテキスト上に
{{配列名.要素名}}
のように記入すると表示される
これの場合はdata:horseDataになっているので、const horseData の配列データが引用される

newはもう少し調べたいので後で保留

結論：
const horseData というウマの情報が入った配列の中に、
name: "馬名",
sex: "性別",
birthyear: "生まれ年",
color: "毛の色"

といった情報を入れ、その中から
{{horseData.name}}で配列からnameの要素を
{{horseData.birthyear}}で配列からbirthyearの要素を
{{horseData.color}}で配列からcolorの要素を
表示させているということ

step2

見本のゾーン49さんのsource code
コードを載せるゾーン
html,vue.jsのコード 
予定地
JavaScript,vue.jsのコード 
予定地
メモするゾーン

step3

このページで利用&参考にしたもの
🏇
ウマ娘Project公式
netkeiba
🐴
ウマカテ
人気急上昇中のウマ娘掲示板
↓広告　どなたでもどうぞ↓
「#エロ」のBL小説を読む
BL小説 BLove
- ナノ -