Skip to content

Instantly share code, notes, and snippets.

🏠
Working from home

Yuri chocolat5

🏠
Working from home
Block or report user

Report or block chocolat5

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@chocolat5
chocolat5 / 01-list-with-number.html
Last active Jan 4, 2020
番号付きolリスト
View 01-list-with-number.html
<ol>
<li>順序付きリスト</li>
<li>順序付きリスト</li>
<li>順序付きリスト</li>
<li>順序付きリスト</li>
<li>順序付きリスト</li>
</ol>
View center-position.md

要素を天地・左右・天地左右の中央に配置

高さ不明の要素を天地の中央に配置

.child {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
View nth.md

番目

3の倍数(3,6,9……)ごと

li:nth-child(3n) {
  color: red;
  padding-bottom: 0.5em;
}
View css-selecter.md

セレクタ

[attribute="value"]

属性の値がvalueである要素にスタイルを適用する

<div class="block bg">
 ...
</div>
View object-to-array.md

オブジェクトを配列に変換

firebaseのデータを取得して配列に直したい場合など
firebaseのデータは、IDをプロパティとして持つオブジェクトである

response.dataとして返ってくるデータ
(-から始まるランダムな英数字はfirebaseが自動で付与したIDで、オブジェクトのkeyにあたる)

-LrOffa4LFOpCPmrezLo: {
@chocolat5
chocolat5 / index.jsx
Created Oct 9, 2019
React state simple example 2
View index.jsx
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const InformationArea = () => {
const [flag, setFlag] = useState(false);
const handleOpenEverything = () => {
setFlag(!flag);
@chocolat5
chocolat5 / index.jsx
Created Oct 9, 2019
React state simple example
View index.jsx
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const ViewFlagValue = ({ flag }) => {
return <p>{flag ? '有効' : '無効'}</p>;
}
const SwitchFlag = ({handleUpdateFlag}) => {
@chocolat5
chocolat5 / index.md
Created Sep 21, 2019
Increment ++ and Decrement
View index.md

後置き

代入してから「++」が実行される

let x = 5;
let y;
y = x++;

console.log(y); //5
@chocolat5
chocolat5 / index.js
Last active Sep 21, 2019
Calculate Tax
View index.js
let total = (price) => {
let tax = 0.08;
return price + price * tax;
}
console.log(total(2000));
@chocolat5
chocolat5 / custom-data-attribute.md
Created Jun 8, 2019
custom data attribute (HTML5)
View custom-data-attribute.md

HTML

<ul>
  <li id="item1" class="item" data-selected="true">item1</li>
  <li id="item2" class="item" data-selected="false">item2</li>
  <li id="item3" class="item" data-selected="false">item3</li>
</ul>
You can’t perform that action at this time.