鶏口牛後な日々

魔法使い(なんでも作れるエンジニア)を目指してます。ブログは発散中

stylus

CSSで縦横比(アスペクト比)を固定したい

ブロック要素で縦横比(アスペクト比)を固定したいと思いました。 結論としては、 padding-top を使うとうまくいきました。 【CSS(stylus)】 .box width 100% height auto padding-top 65% アスペクト比固定イメージ 備忘まで。

CSSで四隅に枠をつけたい

ブロックの四隅にだけ枠(border)をつけたいと思いました。 イメージは以下のような感じ。 「四隅に枠」のイメージ 最初は、途中でborderの色を変えればいいのかな? と思いました。 でも、四隅に小さい四角を用意して、 position: absolute で配置すればい…

CSSのdisplay:flex(flexbox)を使うときの注意点

CSSのdisplay:flexの基本 flex使い方 親divに、 display: flex をつける。 その直下の子1(左)に flex-basis: 30% 、 子2(右)に flex-basis: 70% をつけると、うまいことフレックスで動いてくれる。 card /* 親 */ display flex width 100% body /* 子2 *…

stylusでcalcを使って自動で幅を設定しようとしたらうまくいかなかった

うまくいかなかったこと 単純なプラスはうまくいったのですが、マイナスがうまくいかず、マイナスに加えて割り算を組み合わせようとした場合も、うまく計算してくれませんでした。 ということで調べたことをまとめておきます。 単純なプラスするcalc(うまく…

checkboxのデザインを任意の画像で変更する考え方と実装方法

チェックボックスのデザインを別画像で置き換えたいことはありますよね。 チェックボックスのデザインを変える。考え方 今回は、Pugとstylusを使って書いたのですが、HTML/SCSSで書いている人用に、下に同様のものをそれぞれ追記しますので、必要な人はそち…

stylus初心者が間違えやすい擬似要素の書き方(コロンは1つでいい)

擬似セレクタの書き方 通常のCSSやSASSでは ::after とコロン2つで書くが、はstylusではコロン1つでいいらしい。 地味にはまって調べたのでメモしておく。 &:after //