いのちの輝きくんをCSSでdivごとにパーツを分けて書いてdeployした

expo2025, css art, CSSアート, 命の輝き, gh-pages,

result

https://kaede0902.github.io/expo2025/

f:id:kei_s_lifehack:20201003021245p:plain

スマフォ版は綺麗にできた

f:id:kei_s_lifehack:20200921204719p:plain

PC 版が吹っ飛んだ....
PC 版とレイアウトが統一できな買った
CSS の基本プロパティを学習する必要性を強く感じた

why-なぜ作ったか

www.expo2025.or.jp

Twitter で話題だったこれを回すやつを作ってみたいと思っていた
CRA と gh-pages の単一ページ公開の練習にちょうど良かった
Profile に載せて遊んだ時はただ div の width , height を大きめにとった後に background に色を追加して動かしただけだから、今回はdiv 自体を変形したい
できればリンクを触れるようにしたい

create react app

kei-s-lifehack.hatenablog.com

ここでやったように、CRA と gh-pages で大枠を作る

npx create-react-app expo2025

✨  Done in 9.06s. 
                                                       
Success! Created expo2025 at /Users/kaede/code/expo2025
Inside that directory, you can run several commands:

cd expo2025/
README.md  node_modules  package.json  public src yarn.lock

CRA で expo2025 が作成できた
GitHub の同名リポジトリは既に作成してある

gh-pages

npm i gh-pages --save-dev

+ gh-pages@3.1.0
added 503 packages from 182 contributors, removed 169 packages, 
updated 1379 packages and audited 1954 packages in 130.269s

gh-pages@3.1.0 がこのプロジェクトに入った。
ついでに CRA のいろいろな packages が整理された

package.json を開いて追記

  "homepage": "http://kaede0902.github.io/expo2025",

  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",

homepage の欄を新しく作成し、公開することになる URL を記載
scripts に predeploy, deploy のコマンドを追記

push to GitHub

git init
Initialized empty Git repository in /Users/kaede/code/expo2025/.git/

git remote add origin git@github.com:kaede0902/expo2025.git

この後 master に push する必要はなかった。 master から deploy するわけではないので。

 npm run deploy                                                                                        [18/467]
                                                                                                                                       
> expo2025@0.1.0 predeploy /Users/kaede/code/expo2025                                                                                  
> npm run build                                                                                                                        
                                                                                                                                       
                                                                                                                                       
> expo2025@0.1.0 build /Users/kaede/code/expo2025                                                                                      
> react-scripts build                                                                                                                  
                                                                                                                                       
Creating an optimized production build...                                                                                              
Compiled successfully.                                                                                                                 
                                                                                                                                       
File sizes after gzip:                                                                                                                 
                                                                                                                                       
  39.38 KB  build/static/js/2.0e381e2e.chunk.js                                                                                        
  775 B     build/static/js/runtime-main.cd5702c5.js                                                                                   
  644 B     build/static/js/main.b94ebb85.chunk.js
  547 B     build/static/css/main.5f361e03.chunk.css

The project was built assuming it is hosted at /expo2025/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  bit.ly/CRA-deploy

> expo2025@0.1.0 deploy /Users/kaede/code/expo2025
> gh-pages -d build

Published

publish された。

kaede0902.github.io

f:id:kei_s_lifehack:20200920012643p:plain

マジで手軽！！！

css

global

Next.js Tutorial の記法に剃って、styles/global.css を作った
これを App.js で読み込む

styles/global.css

* {
  background: #000;
  color: #fff;
}

App.js

import React from 'react';
import './styles/global.css'

export default function App() {
  return (
    <div className="App">
    </div>
  );
}

Hatena, js(x) には色つけてくれないのかよ...

f:id:kei_s_lifehack:20200920042221p:plain

これで css を読み込んで黒くしてくれた

container

ここから Boostrap でよくある container を実装する。サイドカットするやつ

css-tricks.com

この記事を参考にする

* {
  background: #000;
  color: #fff;
}
.wrapper {
  background: #aaa;
  margin-right: auto;
  margin-left: auto;
  max-width: 960px;
}

f:id:kei_s_lifehack:20200920043251p:plain

大きさが最大でも 960px
左右マージンが自動、中央揃えになった。
高さは指定しないと文字の分だけになるんだな。

参考にするクマ

codepen.io

このクマを参考にする

f:id:kei_s_lifehack:20200920044252p:plain

回転よりも蠢かせるようにするか？

head

とりあえず頭を一つ作った

styles/body.css

.head {
  z-index: 1;
  position: absolute;
  width: 200px;
  height: 200px;
  background: red;
  border-radius: 100px;
}

これでこうなる。左による。absolute だからか？

f:id:kei_s_lifehack:20200920044931p:plain

absolute をなくすと...

f:id:kei_s_lifehack:20200920045038p:plain

中に入るんですね！

wrapper

ただエリアが小さいので min-h を拡張した。

しかし上下の中央揃えは、marign-auto だけでは無理だ。

saruwakakun.com

次に縦方向に真ん中に寄せる方法をパターン別に紹介していきます。初心者誰もが一度は考えるのが「横と同じようにmargin-top:auto; margin-bottom: autoを使えば良さそう」ということ。しかし、この方法は縦の中央寄せでは使えないのです…。 1つずつ詳しく見ていきましょう。

よくわからんけど PC の wrapper はこれでよし！

  margin-top: 5%;
  max-width: 960px;
  min-height: 700px;

f:id:kei_s_lifehack:20200920050400p:plain

head

頭を増やしていく
まずは 200px to 70 px に
これを margin left top で動かして行って...

.head-one {
  margin-left: 500px;
  margin-top: 50px;
}
.head-one {
  margin-left: 450px;
  margin-top: 50px;
}

f:id:kei_s_lifehack:20200920051253p:plain

は？？？ absolute じゃないとダメか....

大きさのバランス

通常の頭が70px
小さい目なしの頭が 50px
白目が 40px
青目が 15px

f:id:kei_s_lifehack:20200920053746p:plain

https://kaede0902.github.io/expo2025/

.head {
  position: absolute;
  z-index: 1;
  width: 70px;
  height: 70px;
  background: red;
  border-radius: 100px;
}
.whiteEye {
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 100px;
}
.blueEye {
  position: absolute;
  z-index: 3;
  width: 15px;
  height: 15px;
  background: blue;
  border-radius: 100px;
}
.head-one {
  background: red;
  left: 1050px;
  top: 100px;
}
.head-two {
  width: 50px;
  height: 50px;
  left: 1015px;
  top: 90px;
}
.head-three {
  width: 50px;
  height: 50px;
  left: 980px;
  top: 110px;
}
.eyeOne {
  left: 1070px;
  top: 110px;
}
.blueEyeOne {
  left: 1070px;
  top: 110px;
}

%表示

px 使ってたら、CSS の理解度がやや低い

「小要素は親要素の半分のサイズにする」のであれば、小要素には width: 50% を指定するわけ親要素が変化すれば、小要素は自動的にサイズが変わると云う寸法

% の相対単位が使いこなせたら、レスポンシブは楽勝

とのことから、% を使って書き直すことにする。

container を 960 -> 730 -> 300 px に

fastcoding.jp

Retinaディスプレイ対応されているiPhone7は、ディスプレイの大きさの2倍である[ 横幅750px ]でWebサイトを作成します。

と書かれているので、それに従い 750px で設計する
padding が 10px ずつあるので、730px にする

.wrapper { background: #aaa; margin-right: auto; margin-left: auto;

margin-top: 5%; max-width: 730px; min-height: 700px;

padding-right: 10px; padding-left: 10px; }

f:id:kei_s_lifehack:20200921035302p:plain

f:id:kei_s_lifehack:20200921035344p:plain

PC はもちろん OK
SP (Mi9) は少し小さいか？ margin のぶん？

f:id:kei_s_lifehack:20200921035556p:plain

300px にしてやっと収まった

f:id:kei_s_lifehack:20200921035714p:plain

PC だとエミュレーター感がある。背景消すけど。
もともと縦長のいのちだし大丈夫！

body

もう一度設計を固める

MainMeat は中に目がある赤い玉
SubMeat は中に目が無い小さい赤い玉
WhiteEye は大きい白目
BlueEye は小さい青目
全て absolute で、% を駆使して描く

container

    <div className="container">
      LIFE IS SHINING...
      <div className="MainMeat MainMeatOne"></div>
      <div className="MainMeat MainMeatTwo"></div>
      <div className="MainMeat MainMeatThree"></div>
      <div className="MainMeat MainMeatFour"></div>
      <div className="MainMeat MainMeatFive"></div>

      <div className="WhiteEye WhiteEyeOne"></div>
      <div className="WhiteEye WhiteEyeTwo"></div>
      <div className="WhiteEye WhiteEyeThree"></div>
      <div className="WhiteEye WhiteEyeFour"></div>
      <div className="WhiteEye WhiteEyeFive"></div>


      <div className="BlueEye BlueEyeOne"></div>
      <div className="BlueEye BlueEyeTwo"></div>
      <div className="BlueEye BlueEyeThree"></div>
      <div className="BlueEye BlueEyeFour"></div>
      <div className="BlueEye BlueEyeFive"></div>
    </div>

Main Meat

まずは大きいあかいたまを 1/5 つ描こうと思う
head というヘッダーと紛らわしい名前を肉にかえる

.MainMeat {
  background: red;
  position: absolute;
  z-index: 1;
  width: 70px;
  height: 70px;
  background: red;
  border-radius: 100px;
}
.MainMeatOne {
  left: 55%;
  top: 10%;
}
.MainMeatTwo {
  left: 60%;
  top: 40%;
}
.MainMeatThree {
  left: 50%;
  top: 45%;
}
.MainMeatFour {
  left: 13%;
  top: 22%;
}
.MainMeatFive {
  left: 13%;
  top: 27%;
}

WhiteEye

.WhiteEye {
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 100px;
}
.WhiteEyeOne {
  left: 55%;
  top: 11%;
}
.WhiteEyeTwo {
  left: 60%;
  top: 41%;
}
.WhiteEyeThree {
  left: 50%;
  top: 46%;
}
.WhiteEyeFour {
  left: 13%;
  top: 23%;
}
.WhiteEyeFive {
  left: 13%;
  top: 28%;
}

BlueEye

.BlueEye {
  position: absolute;
  z-index: 3;
  width: 15px;
  height: 15px;
  background: blue;
  border-radius: 100px;
}
.BlueEyeOne {
  left: 55.2%;
  top: 12%;
}
.BlueEyeTwo {
  left: 62%;
  top: 43%;
}
.BlueEyeThree {
  left: 52%;
  top: 48%;
}
.BlueEyeFour {
  left: 14%;
  top: 24%;
}
.BlueEyeFive {
  left: 14%;
  top: 29%;
}

f:id:kei_s_lifehack:20200921204442p:plain

% 表示で、目がついている頭5つの SP ができた

f:id:kei_s_lifehack:20200921204606p:plain

% にしてるのに PC レイアウトが壊れた。基礎がないとできない。諦める。

OGP 対応

npm のライブラリはSSR ようだったのでindex.html の header にかく

    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@kaede_io" />
    <meta name="twitter:creator" content="@kaede_io" />
    <meta property="og:url" 
    content="
        https://kaede0902.github.io/expo2025/
      " />
    <meta property="og:title" content="いのちの輝き" />
    <meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." />
    <meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />

これで deploy する

f:id:kei_s_lifehack:20201003022550p:plain

index に書いた内容は入ってるが、tw card に反映されない

www.howtonote.jp

これを読むと
tw: title と tw: image がなかった

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@kaede_io" />
    <meta name="twitter:title" content="expo2025_css" />
    <meta name="twitter:description" content="いのち輝く" />
    <meta name="twitter:image" content="../images/PC.png" />
    <meta name="twitter:creator" content="@kaede_io" />

これで行けるか？ npm run deploy

f:id:kei_s_lifehack:20201003023432p:plain

https://cards-dev.twitter.com/validator

そうそう
ここでURL入れて確認するとキャッシュされてOGPの情報が登録されるみたい

入れなくても一度許可されたドメイン配下のページなら、そのうちOGP表示されるようになるとは思うけどね
— AKAI (@Ver1000000000) October 2, 2020

ここでURL入れて確認するとキャッシュされてOGPの情報が登録されるみたい入れなくても一度許可されたドメイン配下のページなら、そのうちOGP表示されるようになるとは思うけどね

これを通さないと出ない!!! 危なかったありがとう誤字あまうs

applica.info

f:id:kei_s_lifehack:20201003023717p:plain

出たが、画像は反映されていない。階層が違うか？

../images/PC.png

public を探してみると画像の public がない

f:id:kei_s_lifehack:20201003023931p:plain

PC.png を index.html に並列させる

これでもダメ

./expo2025/public/PC.png

*これもダメ

画像が出せない

    <meta property="og:url" 
    content="
        https://kaede0902.github.io/expo2025/
      " />
    <meta property="og:image" content="
https://github.com/kaede0902/expo2025/blob/master/images/PC.png
    ">

OG を入れる

f:id:kei_s_lifehack:20201003030457p:plain

Twitter img はいらなかった
og:img は絶対パスで index.html の隣に入れたものを

    <meta property="og:image" content="https://kaede0902.github.io/expo2025/PC.png">

でいけた

kaede0902.github.io

最終的なコードはこちら

  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@kaede_io" />
    <meta name="twitter:title" content="expo2025_css" />
    <meta name="twitter:description" content="いのち輝く" />
    <meta name="twitter:creator" content="@kaede_io" />


    <meta property="og:url" 
    content="
        https://kaede0902.github.io/expo2025/
      " />
    <meta property="og:image" content="https://kaede0902.github.io/expo2025/PC.png">
<meta property="og:url" content="https://www.example.com/">
    <meta property="og:title" content="いのちの輝き" />
    <meta property="og:description" content="
      EXPO2025, いのちの輝きくんです.
    " />

KAEDE Hack blog

JavaScript 中心にライブラリなどの使い方を解説する技術ブログ。

いのちの輝きくんをCSSでdivごとにパーツを分けて書いてdeployした

result

why-なぜ作ったか

create react app

gh-pages

push to GitHub

css

global

container

参考にするクマ

head

wrapper

head

大きさのバランス

%表示

container を 960 -> 730 -> 300 px に

body

container

Main Meat

WhiteEye

BlueEye

OGP 対応