ブログ作成などで使用するCSSをまとめました。
よく使うサイト
見出しを作りたい
https://saruwakakun.com/html-css/reference/h-design
おしゃれな色を探す
http://www.hp-stylelink.com/news/2013/07/20130708.php
前提知識
セレクタ、プロパティ、パラメーター
cssを次のように書く時、
h1 { color : #494949; }
それぞれの箇所は次のように呼ばれる。
h1 部分 : セレクタ
color 部分 : プロパティ
#494949 部分 : パラメーター
ブロック要素
widthやheight, margin, paddingが指定できる。縦並び。
-要素例-
<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、
<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>
インラインブロック要素
widthやheight, margin, paddingが指定できる。横並び。
インライン要素
widthやheight, margin(上下) ,padding(上下)が指定できない。横並び。
-要素例-
<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、
<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、
<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>
CSS一覧
color
文字の色を変更する。
-使用例-
h1 { color: white; }
font-size
文字の大きさを変更する。
-使用例-
h1 { font-size: 45px; }
font-weight
文字の太さを変更することができる。
-使用例-
h1 { font-weight: normal; }（文字の太さを普通にする）
h1 { font-weight: bold; }（文字を太くする）
line-height
行の高さを指定することができる。値が大きいほど行間が大きくなる。
要素の高さ(height)とline-heightプロパティを同じ値にすると、
文字がちょうど中央に配置されるようになる。
-使用例-
p { line-height: 12px; }
letter-spacing
文字の間隔を指定することができます。
-使用例-
p { letter-spacing: 5px; }
text-align
テキスト等のインライン要素やインラインブロック要素の配置箇所を指定することができる。
(ブロック要素の配置制御にはmarginなどを使用する)
leftで左、centerで中央、rightで右に配置するよう設定する。
-使用例-
p { text-align: left; }
p { text-align: center;}
p { text-align: right; }
cursor
マウスのカーソルが要素に乗ったときのカーソルの形を変えることができる。
-使用例-
cursor: text; （カーソルが「I」のような形になる）
cursor: pointer; （カーソルが手の形になる）
cursor: default; （デフォルト）
セレクタ:active
要素がクリックされている間だけCSSが適用される。
-使用例-
div:active{ color : #494949; }
セレクタ:hover
カーソルが乗ったときCSSが適用される。
-使用例-
div:hover { background-color: red}
transition
アニメーションをつけることができる。
多くの場合、hoverと組み合わせて使用する。
第一引数に変化の対象(プロパティ)を、
第二引数に変化にかかる時間を指定する。
-使用例-
p {
width:50px;
background-color:red;
transition-duration:3s;
}
p:hover {
width:300px;
background-color:blue;
}
opacity
要素の中身全てを透明にする。
透明度は0.0(完全に透明) ~ 1.0(完全に不透明)の数値で指定します。
-使用例-
div { opacity: 0.8; }
rgba
背景色を指定するのに加え、透明度も指定できる。(背景色だけが透明になる)
透明度は4番目の引数で指定する。
-使用例-
div { background-color: rgba(255, 147, 30, 0.5); }
border-radius
角を丸める。
-使用例-
border-radius: 10px;
display
displayプロパティはある要素に対して、block（ブロック要素）, inline-block（インラインブロック要素）, inline（インライン要素）を指定することができる。
noneを設定すると、画面からその要素の表示を消すことができる。
メディアクエリと組み合わせて使うと便利。
flexを設定すると、指定した要素の子要素を横並びにする。
ulタグに設定し、その子要素にliタグを記述するとliタグの要素が横並びになる。
-記述例-
.test-class { display:block; }
ul { display: flex; }
flex: auto
親要素の幅に合わせて伸ばしたい要素に対して設定する。
親要素にdisplay:flexを指定した要素などに使用する。
-記述例-
ul { display:flex; }
li { flex: auto; }
flex-wrap: wrap
flex-wrap: wrapを指定すると、子要素のサイズに応じて自動で折り返しをする。
-記述例-
ul {
display:flex ;
flex-wrap: wrap;
}
li {
flex: auto;
width: 50%;
}
flex-direction: column
子要素を上から下へ並べる。
縦に並べたい要素の親要素にflex-direction: columnを指定します。
-記述例-
ul { flex-direction: column; }
float
要素を横並びにすることができる
-使用例-
div { float: left; } （要素を左寄せにする）
div { float: right; } （要素を右寄せにする）
div { float: none }（初期値。配置を指定しない）
clear: left;
floatを解除する。
子要素が全てfloatだと親要素は子要素が存在しないと判定する。
そのため、親要素の背景色などがうまく子要素にかからない場合がある。
それを防ぎたい場合などにclear: left;を使用する。
clear: left;を適用した空のdivタグを、float要素群の最後に記述すると、
floatを動作させたあと、floatが解除されるため、親要素の背景などが意図した通りに設定される。
position
要素同士を重ねて表示することができる。
position: absolute;
サイト全体の左上部分を基準位置とする。
position: relative;
基準としたい親要素の左上部分を基準位置とする。
親要素にrelativeを指定し、子要素はabsoluteを指定して使用する。
また、topやleftと併用すると、その要素を本来の位置からずらすことができる。
これは立体的なボタンを押した時の凹み表現などで利用する。
-使用例:立体ボタンの凹み-
div {
position: relative;
top: 10px;
left: 10px;
}
position: fixed;
要素を常に画面上の指定した位置に固定させておくことができる。
ヘッダーを固定したい時などに使用する。
-使用例:ヘッダーの固定-
div {
position: fixed;
top:10px;
left:40px;
}
z-index
要素の重なりの順序を指定することができる。
整数値で指定し、値が大きいほど上に表示される。
-使用例-
div { z-index: 10; }
box-shadow
ボックスに影を付けることができる。
box-shadow: 10px 10px #000000;
noneとすることで影を消すことができる。セレクタ:activeなどと併用して使用する。
box-shadow: none
＠media(max-width: ◯◯px) { }
メディアクエリと呼ぶ。
画面幅が◯◯px以下の時にCSSを適用する。
-使用例-
＠media(max-width: 1000px) {
h1 {
color:blue;
}
}
注意点：headタグ内にviewportを設定しておかないとスマホやタブレットでうまく動作しなくなる。
headタグ内に以下を記述する。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
box-sizing: border-box;
要素の幅(width)の合計にpaddingとborderが含まれるようになる。
ただし、marginはふくまれない。
＠media使用時のデザイン崩れを防止するのに使用する。
max-width
画面幅の上限を設定する。
width: 100%;と組み合わせて使用するのが基本。
body {
max-width: 1170px;
width: 100%;
}
