Mac Catalinaにアップデートしたらsassが効かなくなった時
突然ruby sassが効かない・・・ $ sass >>> /usr/local/bin/sass: /System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/bin/ruby: bad interpreter: No such file or directory bad interpreterって何やねん。 ここで色 […]
css/sass
css/sass 背景だけ透過させる
子要素の文字を透過させずに、背景だけ透過させ用とする時、要素にopacityを使ってっも文字も一緒に透過しています。 背景のみ透過させるにはrgba()を使用すれば問題解決です。 html <div class=" "> <p>opacityを使うと、この文字まで透過してしまいます。</p> </div> <div class="use-rgb […]
横幅いっぱいの逆三角形を作る方法
三角形の作り方。実装する度にいろんなサイトを拝見して時間を無駄にしているんですが、 デザインの中で段落の区切りとして横幅いっぱいの三角形を表示する機会があったので、自分の備忘録として記述すると同時に 同じことを実装したい人の助けになればと思います。 html <div class="gyaku-triangle g-triangle-1"> <div class="left-ha […]
- 2021.08.08
- linear-gradient, z-index, 斜線, 透過,
斜線の影をつける sass/css
下記に表示されているような斜線の影をつける方法を紹介します 結論から行くと、box-shadowプロパティを使うのではなく、疑似要素の:before、プロパティz-index、background:linear-gradientを使用するところが肝で、影を表示したい親の後ろに疑似要素を持ってきて表現する方法になります。 HTML <div class="wrapper"> <di […]
文字の横に横線を入れる方法
今回はテキストの両脇に横線を表示する方法を紹介します。 ちょっとしたテキストやタイトルの装飾に便利だと思うので、ぜひ使ってみてください。 html <span>タイトル</span> sass span { display: block; margin-bottom: 10px; text-align: center; color: #fff; font-size: 14p […]
jpeg, png 違い
全部で３つの違いについて書いていきたいのですが、自分がふと思ったものなので、それぞれに関係性は特にありません。 jpgとpngの違い jpegの特徴 Joint Photographic Experts Groupの略 フルカラーの1670万色まで扱う事ができる 色数の多い背景画像やグラデーションのかかった画像の保存に適している。 「非可逆圧縮」 低画質で保存したら、元の画質に戻せない 透過できな […]
- 2021.08.08
- css,
cssの自分用メモ覚書
以前に調べた数々のパターン化されたcssのコードを、毎回PC内のメモを開いて書いてあったページなりを調べる始末・・・ 自分の脳に染み込ませる目的で、メモとしてこのページを活用します。特にそれぞれに繋がりがあるわけではないので、掘り出し物的に参考にしていただければと覆います。 ①position:absoluteで親要素の真ん中に配置する position:absolute; top:50%; le […]