css/sass

文字の横に横線を入れる方法

今回はテキストの両脇に横線を表示する方法を紹介します。 ちょっとしたテキストやタイトルの装飾に便利だと思うので、ぜひ使ってみてください。 html <span>タイトル</span> sass span { display: block; margin-bottom: 10px; text-align: center; color: #fff; font-size: 14p […]

斜線の影をつける sass/css

下記に表示されているような斜線の影をつける方法を紹介します 結論から行くと、box-shadowプロパティを使うのではなく、疑似要素の:before、プロパティz-index、background:linear-gradientを使用するところが肝で、影を表示したい親の後ろに疑似要素を持ってきて表現する方法になります。 HTML <div class="wrapper"> <di […]

jpeg, png 違い

全部で3つの違いについて書いていきたいのですが、自分がふと思ったものなので、それぞれに関係性は特にありません。 jpgとpngの違い jpegの特徴 Joint Photographic Experts Groupの略 フルカラーの1670万色まで扱う事ができる 色数の多い背景画像やグラデーションのかかった画像の保存に適している。 「非可逆圧縮」 低画質で保存したら、元の画質に戻せない 透過できな […]

css/sass 背景だけ透過させる

子要素の文字を透過させずに、背景だけ透過させ用とする時、要素にopacityを使ってっも文字も一緒に透過しています。 背景のみ透過させるにはrgba()を使用すれば問題解決です。 html <div class=" "> <p>opacityを使うと、この文字まで透過してしまいます。</p> </div> <div class="use-rgb […]

  • 2021.07.24
  • ,

cssの自分用メモ覚書

以前に調べた数々のパターン化されたcssのコードを、毎回PC内のメモを開いて書いてあったページなりを調べる始末・・・ 自分の脳に染み込ませる目的で、メモとしてこのページを活用します。特にそれぞれに繋がりがあるわけではないので、掘り出し物的に参考にしていただければと覆います。 ①position:absoluteで親要素の真ん中に配置する position:absolute; top:50%; le […]

横幅いっぱいの逆三角形を作る方法

三角形の作り方。実装する度にいろんなサイトを拝見して時間を無駄にしているんですが、 デザインの中で段落の区切りとして横幅いっぱいの三角形を表示する機会があったので、自分の備忘録として記述すると同時に 同じことを実装したい人の助けになればと思います。 html <div class="gyaku-triangle g-triangle-1"> <div class="left-ha […]