はじめに
ただのcssメモ
便利なcalc
（）で計算ができる。
.hoge{
height: calc(100% - 180px);
}
要素の概念
インライン要素をインラインブロック要素に変更
要素を横並びにした上で横幅と高さを指定
aタグには、そのままでは大きさの指定ができない。
.hoge{
display: inline-block;
}
ヘッダーとフッターの高さに合わせて隙間を合わせる。
.hoge{
padding: 70px 0px 45px;
}
ボックスの角に丸みをつけたい場合
border-radiusは四角形の角を丸くするためのプロパティ
今回のように4pxと指定.半径4pxの円に相当する丸みになります。
.hoge{
border-radius: 4px;
}
ボックス全体の大きさを変えたくない場合
全体に対して適用なので、*を使う。
*{
box-sizing: border-box;
}
文字の間隔を調整
コメント
.hoge{
letter-spacing: 1px;
}
背景画像の大きさ
| auto | サイズは自動的に決まる |
|---|---|
| contain | 縦横比を保ったまま、範囲内に全ての画像が入るように配置（縦か横に空白ができる） |
| cover | 縦横比を保ったまま、対象範囲を全て埋めるように配置（画像の縦かよこが切れる） |
| 長さ（例：980px） | 縦横を長さで指定 |
| パーセンテージ（例：60%） | 縦横を親要素に対する比率で指定 |
.hoge{
background-size: cover;
}
文字の行間広げる
行の高さを指定するプロパティで、ここでは行間を広げる
.hoge{
line-height: 2.5;
}
要素の周りに線を引く
| none | なし（何も指定しないとnoneになる） |
| solid | １本線 |
| dashed | 破線 |
| dotted | 点線 |コメント
.hoge{
border: 2px solid #fff;
}
親要素と同じ色にする指定
親要素と同じ色にするという意味で、透過しているような見た目になります。
.hoge{
background-color: transparent;
}
マウスカーソルを指定するプロパティ
ボタンの上にカーソルが来ると形が変わるようになる。
.hoge{
cursor: pointer;
}
要素の重なりを決める
ヘッダーが上に行くようにするのに使うよね。
.hoge{
z-index: 1;
}
文字の太さを指定
この場合は、太字にしている
.hoge{
font-weight: bold;
}
、中央よせができないとき
ブロックの幅がコンテンツエリアいっぱいに広がっていると中央にならないよね
.hoge{
margin: 0 auto;
}
position: relativeについて
現在の表示位置から相対的に要素の位置を動かしたいときに使います。
#relative {
position: relative;
top: 10px;
left: 10px;
position: absoluteについて
親要素を基準に、絶対的な位置を指定。
この「絶対的な位置」というのは、要素がどんな形であろうと、間に他の要素や余白が入っていようと、その位置に配置してくれるということ意味する。
親要素はrelativeにしておく
absoluteを使って位置調整するときは、親要素にposition:relative（もしくはfixed）を指定する。これを忘れると基準位置がずれて思ったように表示されません。absoluteを使うときは、おまじないのように親要素もセットで変えるようにしましょう。
.hoge{
position: absolute; /* 要素の配置方法を指定 */
background-color: #ccc; /* 背景色指定 */
padding: 0; /* 余白指定 */
left: 0p; /* 右からの位置指定 */
top: 0;
bottom: o;
}
リセットCSS
body, html {
height: 100%;
background-color: white;
}
h1, h2, h3, h4, h5, h6, p, body {
line-height: 1.77;
font-size: 18px;
color: #4a4a4a;
font-family: sans-serif;
margin: 0;
padding: 0;
}
ヘッダー固定.下段に張り付く形で設定する時に使用する。
.hoge{
bottom: 0;
}
位置を固定させる
.hoge{
position: fixed;
}