文字系
文字の大きさ
px: 縦のピクセルの大きさで指定、Webページのメインの文章は15px~18pxくらいにするのがいいらしい
em: 現在のフォントサイズに対する倍率、現在の設定が10pxの時に2.0emを指定するとフォントサイズは20pxになる
テキストの位置を指定する
/* 真ん中によせ */
text-align: center;
/* 右側によせ */
text-align: right;
線で囲う
/* 実線 */
border: solid 2px gray;
/* 点線 */
border: dotted 2px gray;
/* 破線 */
border: dashed 2px gray;
/* 二重線 */
border: double 5px gray;
上にだけ線を引く：border-top:〜
下にだけ線を引く：border-bottom:〜
左にだけ線を引く：border-left:〜
右にだけ線を引く：border-right:〜
widthとheight
display: inlineはwidthとheightを指定することができない。
幅・高さが指定できるのは要素がdisplay:blockもしくはinline-blockのときだけ。
widthの初期値はautoとなっており何も指定していないと要素幅は横いっぱいに広がっている。
display: inlineやinline-blockのときには、要素の幅＝要素の中身（テキスト）の長さとなる。親要素以上に自動で大きくなることはない。
親要素のwidth > 子要素の幅にしてはいけない
親要素６００pxの時、子要素50%にすると３００pxになる。
とくにCSSで指定しない限り、要素のheightの値はautoとなり、高さが自動で決まる。基本的に横いっぱいに広がるwidth: autoと異なり、height: autoは縦いっぱいには広がらず、文字や画像などの要素の中身の分だけの高さになる。
min-width
/* 要素が100pxより小さくならないという意味 */
p {
min-width: 100px
}
max-width
p{
/* 要素が２００pxより大きくならない */
max-width: 200px;
}
画像の横縦比を保つ方法
height: auto;
merginとpadding
要素の中身があるその周りの余白がpadding
paddingを超えるとborderが存在する
borderを超えるとmarginが存在する
要素に背景色を指定しているとき、paddingの部分も背景色で塗られる
margin: 10px 10px 10px 10px;
/* 上 右 下 左*/
margin: 10px 0;
/* 上下・左右を指定 */
時計回りに指定していく。
margin-bottomと、margin-topが並ぶと片方のmarginが無効になる。適用されるmarginは値が大きい方が優先される。
しかしpaddingでは相殺は起こらない。
marginを使って要素を左右中央に配置する
margin-left: auto;
margin-right: auto;
display
displayはプロパティの１つで要素の表示形式を決めるもの。
/* displayの値 */
block
inline
inline-block
none
flex
block・・・要素が横いっぱいまで広がり縦に並んでいく
inline・・・要素が横に広がっていく
inline-block・・・blockとinlineの中間
none・・・非表示
flex・・・要素が平行になる
pタグの初期値はblock
blockの場合だとtext-aline: center;で中央揃えができない。中身の文字などは中央揃えにできる。
display: inlineだとspanタグやimgタグが初期値として設定されている。要素の前後には改行が入らずに横に並ぶ。
blockの中にinlineの要素が入る。逆にinlineのなかにblockの要素が入ることはない。
inlineの要素は幅と高さを指定することができない。
上下の余白を調整することができないが左右のpaddingとmarginを指定することができる。
inlineの要素は text-align vertical-alignを指定することができる。
親要素に対して中央寄せを指定する必要がある。
aタグなどの初期値がinlineのものは直接指定すればblockに抱えることができる。そうすることで縦横の調整をすることができる。
display: inline-block
要素の並びがinlineで要素の中身はblock的な性質を持っている。inlineとは異なり幅と高さの指定ができる。上下左右の指定もできる。
inline-blockの使い所
・ナビゲーションバー
・ツイッターボタンとか横に並べたいとき
display: none;
display: none;を指定したものは、画像でも文字でも非表示にすることができる。しかし読み込み速度が早くなるわけではない。
レスポンシブデザインを作成するときに便利。スマホでの表示の時に非表示にすることができたりする。
フォントサイズの変更
font-size: ○○px or ○○em
文字色を変える
color: 色名 or カラーコード
太字にする
font-weight: bold;
斜体にする
font-style: italic;
行間を変える
line-height: 値;
文字の間隔を変える
letter-spacing: ○○em;
文字に下線を引く
/* この方法では下線の色と太さを変えることはできない */
text-decoration: underline;
取り消し線を引く
text-decoration: line-through;
文字を実線の枠で囲む
border: solid 線の太さ 色
フォントの種類の変更
font-family: フォント名;
文字の位置を変える
text-align: center
文字に影をつける
text-shadow: 影の右への長さ 下への長さ ボケ具合 影の色
不透明にする
opacity: 値;
aタグで作成したリンクの下線を消す
text-decoration: none;
マウスカーソルを乗せたときのデザインを変える
a:hover {~}
箇条書きの仕方
ul・liはセットで使う。
<ul>
<li>項目</li>
</ul>
ulの代わりにolを使うと番号付きの箇条書きになる。
positionとは
要素の位置を決めるためのプロパティ（例えば要素の位置を20pxだけ右に動かしたり要素の上に別の要素を重ねて乗せることができる、画面の決まった位置に要素を固定して表示させることもできる）
要素{position:
/* 初期値、指定することはほとんどない */
static
/* 現在の位置を基準に相対的な位置を決める */
relative
/* 親要素を基準に絶対的な位置を決める */
absolute
/* 画面の決まった位置に固定する */
fixed
}
positionとセットで使うもの
/* 基準の上からの距離 */
top:
/* 基準の下からの距離 */
bottom:
/* 基準の左からの距離 */
left:
/* 基準の右からの距離 */
right:
position: relativeはtopやbottomを指定しなければstaticと同じ位置に表示される。z-indexやtopなどが指定できないときはrelativeにする。
position: absolute親要素を基準に、絶対的な位置を指定することになる。要素がどんな形であろうと、間に他の要素や余白が入っていようとその位置に配置してくれる。
absoluteを使って位置調整するときは親要素にposition: relativeを指定しておく。
position: fixed
画面の決まった位置に要素を固定させたい時に使う
これを利用すると画面をスクロールしても表示位置は変わらない
z-index
z-index: 数字;
指定した数字が大きい順に要素が重なっていく。ただしposition: staticの時は使えない、よってpositionプロパティの初期値の場合はz-indexが効かないのでもしz-indexで躓いたらここを疑ってみる。
overflow
overflowとは要素のボックスからはみ出た部分をどう扱うかを指定する
overflow:
/* 初期値はみ出た部分がはみ出たままの状態で表示される場合がある */
visible
/* はみ出た部分が隠れる */
hidden
/* はみ出た部分が隠れてスクロールできる状態になる */
scroll
/* スクロールできる状態になる */
auto
overflow: visible
はみ出た部分がそのまま表示される。初期値のため書かなくてもいい。
overflow: hidden
要素のボックスからはみ出た部分は見えなくなる。スクロールしても表示されない
overflow: scroll
はみ出た部分が隠れスクロールにより表示できるようになる。
/* 横方向にスクロールできるようになる */
white-space:nowrap;
/* 縦方向にスクロールできるようになる */
overflow-y: scroll;
/* 横方向は非表示になる */
overflow-x: hidden;
overflow: auto
はみ出た部分の処理をブラウザに委ねる。ほとんどの場合はscrollと同じような処理になる。
表の作り方
table: 表全体を挟む
tr: 行全体を挟む
th: trの中で使う。挟まれた部分は見出しセルとなる
td: trのなかで使う。挟まれた部分が表の中身のセルになる。
GoogleFonts
GoogleFontsのメリット・・・使用端末によって使用できないフォントが存在する可能性があるため、統一した文字を表示させることができない。
しかしGoogleFontsならサーバーから読み込むため、どの端末でも共通のフォントを表示させることができる。