TIL

Today I Learned. 知ったこと、学んだことを書いていく

2018-04-04から1日間の記事一覧

ボックス - CSS

インラインボックスとブロックボックス 要素 ├── インラインボックス └── ブロックボックス ├── コンテンツに意味づけ └── 情報を整理・グループ化 インラインボックス 横並び display: inline; コンテンツがぎりぎり収まる大きさのボックス 主にテキストを…

文字の間隔 letter-spacing - CSS

letter-spacingで文字の間隔を設定できる。 .test1 { letter-spacing: 2px; } .test2 { letter-spacing: -2px; } デフォルトは0px マイナス値を設定すると、デフォルトの表示よりも間隔が狭くなる。 See the Pen 文字の間隔 by tamago (@tamago324) on CodeP…

ブロック要素を左右の中央に配置 - 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(), r…

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

CSS

例えば、aタグでクリックできる範囲を親要素内にしたいとき display: block;とする See the Pen xWaKEM by tamago (@tamago324) on CodePen. displayをblockにすることで、親要素いっぱいに要素の範囲が広がる 参考文献 Progate

ボタンをへこませる - CSS

ボタンを押したときにへこんだように見せることがCSSで実現可能 ポイントは以下の3つだけ box-shadowで影をつける 押下時に、box-shadowを消す 押下時に、影の分だけ表示位置を下にずらす これだけでへこんでいるように見える!! See the Pen ボタンを押し…