文字の横に横線を入れる方法
今回はテキストの両脇に横線を表示する方法を紹介します。 ちょっとしたテキストやタイトルの装飾に便利だと思うので、ぜひ使ってみてください。 html <span>タイトル</span> sass span { display: block; margin-bottom: 10px; text-align: center; color: #fff; font-size: 14p […]
css
css/sass 背景だけ透過させる
子要素の文字を透過させずに、背景だけ透過させ用とする時、要素にopacityを使ってっも文字も一緒に透過しています。 背景のみ透過させるにはrgba()を使用すれば問題解決です。 html <div class=" "> <p>opacityを使うと、この文字まで透過してしまいます。</p> </div> <div class="use-rgb […]
- 2021.08.01
- css, width:100%, width:auto,
html width:100%とwidth:autoの違い
いつも使ってるかんたんなもの、なのに以外に雰囲気だけ掴んでいて詳細は知らない。。。自分の身の回りにありますよねそういうもの。そんな代表格と自分で決めて付けているものの一つがwidth: 100%,width: autoではないでしょうか？ 「あれ？なんかwidth: 100%指定してるのに横はみ出てるんですけど？」 解決できます。 結論 ・width: 100%・・・指定した要素のp […]
横幅いっぱいの逆三角形を作る方法
三角形の作り方。実装する度にいろんなサイトを拝見して時間を無駄にしているんですが、 デザインの中で段落の区切りとして横幅いっぱいの三角形を表示する機会があったので、自分の備忘録として記述すると同時に 同じことを実装したい人の助けになればと思います。 html <div class="gyaku-triangle g-triangle-1"> <div class="left-ha […]
- 2021.08.01
- css,
cssの自分用メモ覚書
以前に調べた数々のパターン化されたcssのコードを、毎回PC内のメモを開いて書いてあったページなりを調べる始末・・・ 自分の脳に染み込ませる目的で、メモとしてこのページを活用します。特にそれぞれに繋がりがあるわけではないので、掘り出し物的に参考にしていただければと覆います。 ①position:absoluteで親要素の真ん中に配置する position:absolute; top:50%; le […]