いつも忘れてしまうcss設定をすぐに思い出すだけのメモ

カテゴリー︎： 【CSS】・【個人的興味】

私的メモ

すぐに忘れてしまうcss関連のTOP５！

【第5位】 rgba(アールジービーエー)

rgba とは　R(red),G(green),B(blue) に　alpha(アルファ)が加わったものである

（例）
16進数の　#ff0000 = red(赤)
は
RGBで表すと 255,0,0である

これを css で背景色として使いたいときは下記のように使う
rgbaの４番目を0.5透過させている(0.9〜~0.1の範囲で透過を設定できる)
↓

<style>
.rgba {
 background: rgba(255,0,0,0.5);
}
</style>

<p class="rgba">rgbaを試します → 赤の50%なので、ピンクっぽい色になるよ</p>

【第4位】 丸(●)や四角(■)をつくる設定

cssで丸(●)や四角(■)をつくる設定

cssで丸をつくる

<style>
.maru:before {
  content:"";
  width: 10px;
  height: 10px;
  display: inline-block;
  background: black;
  border-radius: 50%;
}
</style>

<p class="maru">ここれはまるです</p>

cssで四角をつくる

<style>
.sikaku:before {
  content:"";
  width: 10px;
  height: 10px;
  display: inline-block;
  background: black;
  border-radius: 50%;
}
</style>

<p class="sikaku">ここれは四角です！</p>

【第3位】 メディアクエリの設定

レスポンシブの設定メディアクエリ

//PC版
@media (min-width: 800px){
800pxを含む、800pxから〜
}

//SP版
@media (max-width: 799px){
〜799pxまで
}

minから〜

max〜まで

とりあえず、これだけ！！　でおっけ〜

【第2位】 position中央寄せ

positionのを中央寄せ
↓

<style>

html, body, p, div {
	margin: 0;
	padding: 0;
}

.hoge {
    position: relative;
    background: red;
    width: 400px;
    margin: 0 auto;
    height: 100px;
}
.hoge p {
    position: absolute;
    background: green;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
<style>

<div class="hoge"><p>positionで中央寄せ</p></div>

【第1位】 letter-spacing（レタースペーシング）

letter-spacing
レタースペイシング
れたーすぺいしんぐ

なぜか、いつも思い出せないので
口でぶつぶつと呟いて覚えるしかないっす

letter-spacingとは

文字の間隔を指定する際に使用する
文字の間隔にはマイナスの値を指定できて便利

使いかた

div.hoge1 {letter-spacing:  2px;}
div.hoge2 {letter-spacing: -2px;}

もう忘れないぞ！！

【おまけ】　テキストに下線をつけるときの２パターン

1. positionを使った下線設定はやや多めだが、線の高さや長さを指定できるので自由度が高い

2. ただの、text-decoration: underline　設定は少ないが調整があまりできなくて自由度が低い 

<style>
.kasen {
	padding: 0;
	display: inline-block;
	position: relative;
}

.kasen::after {
	content: "";
	display: block;
	width: 99%;
	height: 1px;
	background: red;
	position: absolute;
	bottom: 2px;
	left: 0;
	right: 0;
}

.kasen2 {
	text-decoration: underline;
}
</style>

<p class="kasen">1. positionを使った下線(自由度が高い)</p>

<p class="kasen2">2. text-decoration: underlineを使った下線(自由度が低い)</p>
PAGE TOP