Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@tommy0218

CSSメモ

文字系

文字の大きさ

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 > 子要素の幅にしてはいけない

親要素600pxの時、子要素50%にすると300pxになる。

とくにCSSで指定しない限り、要素のheightの値はautoとなり、高さが自動で決まる。基本的に横いっぱいに広がるwidth: autoと異なり、height: autoは縦いっぱいには広がらず、文字や画像などの要素の中身の分だけの高さになる。

min-width

/* 要素が100pxより小さくならないという意味 */
p {
min-width: 100px
}

max-width

p{
/* 要素が200pxより大きくならない */
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はプロパティの1つで要素の表示形式を決めるもの。

/* 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ならサーバーから読み込むため、どの端末でも共通のフォントを表示させることができる。

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What is going on with this article?