パイプあれこれその1
01単管
02イレクター（CREFORM（クリフォーム））
疑似科学
疑似科学を考える。（科学コミュニケーション研究所）
さくらチェッカー
ECサイトのステマレビューを見抜くサイト。
https://sakura-checker.jp（サクラチェッカー）
@keyframesとanimation その1
@keyframes はアニメーションの開始から終了するまで、どんな動きをするのかをするのかを指定。
例
@keyframes (animation-name（任意の名前）) {
0% {
CSSプロパティ:値;
}
100% {
CSSプロパティ:値;
}
}
animation はどのアニメーションを適用するのか、いつ開始されるのか、動作時間、繰り返し回数などを指定。
.abc {
animation-name: (animation-name（任意の名前）) ;
}
■■@keyframes関連プロパティ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
通常のcssで指定
■ 開始時widthが200px、終了時widthが300pxのアニメーションになる。
0% {
width:200px;
}
100% {
width:300px;
}
■ 半分時でwidthが400px、終了時widthが300pxのアニメーションになる。
50% {
width:400px;
}
100% {
width:300px;
}
}
■ opacity0;透明、opacity:1;不透明なども指定でき
■ 開始0%をfrom、終了100%をtoに置換することもできる。
■■animation関連のプロパティ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■■ animation-name ■■
アニメーションの名前。@keyframesで指定。
例
.section {
animation-name: （任意）;
}
■■ animation-duration ■■
アニメーションが始まって終わるまでの時間を指定。
s 1sは1秒
ms 1msは千分の1秒
例
.section {
animation-name: （任意）;
animation-duration: 3s;
}
}
■■ animation-timing-function ■■
アニメーションの進行を指定。
以下の９種類。
■ease
開始時と終了時は緩やかに変化。
■ease-in
開始時は緩やかに変化、終了に近づくと早く変化。
■ease-out
開始時は早く変化し、終了時は緩やかに変化。
■ease-in-out
開始時と終了時は、かなり緩やかに変化。
■linear
開始から終了まで一定に変化。
■step-start
開始時に最終の状態。
■step-end
終了時に最終の状態。
■steps(正数, start または end)
ステップス 指定した正数の段階で変化します。
第2引数にstartまたはendを指定。startを指定すると、開始時から変化。endを指定すると、終了時に変化。
■cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値)
変化の度合いを任意で指定します。3次ベジェ曲線で指定。
例
.section {
animation-name: （任意）;
animation-duration: 2s;
animation-timing-function: ease;
}
}
■■ animation-delay ■■
アニメーションが始まる時間を指定。
s 1sは1秒
ms 1msは千分の1秒
■■ animation-iteration-count ■■
繰り返し回数を指定。1
■■ animation-direction ■■
再生方向を指定。normal
normal 毎回、指定した通り（順方向）で再生。
reverse 毎回、逆方向から再生。
alternate 順方向、逆方向を交互に繰り返す。
alternate-reverse 逆方向、順方向のを交互に繰り返す
■■ animation-fill-mode ■■
■■ animation-play-state ■■
また、transform、transition
などなどはその2で
Flexboxについて。。。その1
コンテナ（親要素）
アイテム（子要素）
に分けられる。<ul><li>でも可。
コンテナにdisplay:flexを指定する。
■■■■■並び順（flex-direction）■■■■■
（デフォルト）左から右
flex-direction: row;
右から左
flex-direction: row-reverse;
上から下
flex-direction: column;
下から上
flex-direction: column-reverse;
■■■■■単一行と複数行の指定
（flex-wrap、プレフィックス版含む）■■■■■
（デフォルト）単一行に配置、アイテムは幅に収まるように縮小
flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
複数行に配置、左から右へ、上から下へ、の順番
flex-wrap: wrap;
-ms-flex-wrap: wrap;
複数行に配置、左から右へ、下から上へ、の順番に。
flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
■■■■■上記の二つ、並びと単一・複数行を一緒に定義
（flex-flow、プレフィックス版含む）■■■■■
flex-directionスペースflex-wrap
flex-flow: row nowrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
■■■■■寄せと間隔
（justify-content、プレフィックス版含む）■■■■■
（デフォルト）アイテムを先頭に寄せて配置
justify-content: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
アイテムを後尾に寄せて配置
justify-content: flex-end;
-webkit-box-pack: end;
-ms-flex-pack: end;
アイテムを中央に寄せて配置
justify-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
先頭と後尾は端に、残りは等間隔に配置
justify-content: space-between;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
すべてのアイテムを等間隔に配置、各アイテムの両側に半分のサイズの間隔
justify-content: space-around;
-ms-flex-pack: distribute;
すべてのアイテムを等間隔に配置、各アイテムの周りに同じサイズの間隔
justify-content: space-evenly;
すべてのアイテムを等間隔に配置。サイズがautoであるアイテムはコンテナに合わせて引き延ばす
justify-content: stretch;
aside 要素
HTML5から新たに追加された要素。
ウェブページ内における余談・補足情報のセクション。本文と関連してはいるけれど区別して掲載するべき内容。
わかりにくい。。。
アップデート1.8.9
アップデート1.8.9から/common/lib/soy2_build.phpの不具合。
soy2_build.phpだけ以前のまま
３・１独立宣言文
1919年
朝鮮半島で起きた独立運動。いわゆる「三・一独立運動」「独立万歳運動」「三・一事件」「万歳事件」の宣言文。
1910年大日本帝国に併合された朝鮮国（大韓帝国）？の天道教・キリスト教・仏教の指導者たちと学生組織が中心の運動。
「万歳事件を知っていますか」木村悦子（平凡社）からの孫引きです。
ベーシック（BASIC）認証
IDとパスワードでHPへの閲覧制限を掛けます。
複数人の設定も出来ます。
基本ディレクトリー単位なので複数ページで出来ます。
検索エンジンもアクセスできない。
だいたいのブラウザは、ID、パスワードは記憶できるまた、ブラウザを終了するまで有効。
「.htaccess」を使用…サーバーによっては利用できない。
そんなベーシック（BASIC）認証について…備忘録。
画像表示の高速化
たくさんのアイコンを一つにまとめて、読み込み速度を上げる方法。
「CSS Sprite」