文字の間隔 letter-spacing - CSS

letter-spacingで文字の間隔を設定できる。

.test1 {
    letter-spacing: 2px;
}

.test2 {
    letter-spacing: -2px;
}

デフォルトは0px
マイナス値を設定すると、デフォルトの表示よりも間隔が狭くなる。

See the Pen 文字の間隔 by tamago (@tamago324) on CodePen.

参考文献

Progate

ブロック要素を左右の中央に配置 - CSS

中央に配置する

• widthを指定
• marginの左右をautoに設定

.main {
    /* 横幅を指定 */
    width: 100px;
    /* 中央に配置 */
    margin: 0 auto;
}

See the Pen wmEavW by tamago (@tamago324) on CodePen.

参考文献

Progate

正規表現使った置換 - Python

Python正規表現を使った置換
reモジュールのsub()メソッドを使った

>>> import re
>>> re.sub(r'aa', 'bb', 'aabbccdd')
'bbbbccdd'

検索する文字列はr'対象'という感じで書かないといけないことに注意する

参考文献

• Pythonで文字列を置換する：replace(), re.sub() | UX MILK

インラインブロックを親要素いっぱいに範囲を広げる - CSS

例えば、aタグでクリックできる範囲を親要素内にしたいとき

• display: block;とする

See the Pen xWaKEM by tamago (@tamago324) on CodePen.

displayをblockにすることで、親要素いっぱいに要素の範囲が広がる

参考文献

Progate

ボタンをへこませる - CSS

ボタンを押したときにへこんだように見せることがCSSで実現可能
ポイントは以下の3つだけ

1. box-shadowで影をつける
2. 押下時に、box-shadowを消す
3. 押下時に、影の分だけ表示位置を下にずらす

これだけでへこんでいるように見える！！

See the Pen ボタンを押したらへこませる by tamago (@tamago324) on CodePen.

コードの説明

重要な部分だけ説明

1.box-shadowで影をつける

.btn {
    box-shadow: 0 6px #a2a2a2;
}

通常時は影を表示させる

2. 押下時にbox-shadowを消す

.btn:active {
    box-shadow: none;
}

「押下時」にスタイルを適用するには:activeという擬似クラスを使う
box-shadowプロパティにnoneを指定することでスタイルを無効化することができる

3. 押下時に表示位置を下にずらす

.btn:active {
    position: relative;
    top: 6px;
}

positionプロパティにrelativeを指定することによって、その要素自体の表示位置が変更可能になる
top: 6px;で、.btnの左上を起点として、6px分だけ下に表示している

参考文献

Progate

関数を渡すときには()はつけない！ - JavaScript

変数に代入したA関数をB関数に渡すときには()はつけない！！！
()をつけると、関数の戻り値を渡すことになってしまうため、()はつけないこと

例）1秒ごとにhelloとコンソールに表示する

const aa = () => {
    console.log('hello');
}

setInterval(aa(), 1000);

これだと、1回しか表示されない！！！！
aa()じゃなくて、aaで渡してあげないといけない！！！！

const aa = () => {
    console.log('hello');
}

// () はつけない！
setInterval(aa, 1000);

気をつけよう...

関数 - JavaScript

JavaScriptでの関数について、知ったこと

• 可変長引数
• ファーストクラスファンクション
• アロー関数
• コールバック関数と高級関数