rails 独学して軽くにちゃんまとめつくる

インターン中大学生のブログ

ぐるぐる回って何をしたいのかが変わってく。今はマッチングサイトを作りたい、もしくは論文のキュレーションサイトかな。

CSSのモジュール①アクション編

CSSで指定すること6つしかない。

  1. wrapper
  2. container
  3. ボタン
  4. 文字
  5. 画像
  6. ボックス要素

 

それぞれで設定しなきゃならないこともパターン化されてる。上から順に書いていく。

 

1.wrapper

空白はmargin,padding,border

(paddingの左右はcontainerで、上下はここで調整)

色、opacity、rgba

text-align

background-image: url();

backgdound-size: cover; 

固定するか否か position: fixed;

z-index: 10;

 

 

2.container

 

横高さ

padding,border,margin

主にpaddingの左右

margin:0 auto;

 

 

3.ボタン

クラス名は btn

aリンクで囲む。

ボタンが複数ならbtn-wrapperのdivで囲む

大きさはpbmで調整する

複数ボタンがあるときmarginは右と上がいい

縦並びはdisplay:inline-block、横並びはfloatかdisplay:block(文字かつ空白をクリックできる)

文字色

背景

border-radius

アイコン

box-shadow

:hoverで

transition、色、cursor:pointer

activeで影消しと位置ずらし

 

 

 

 

4.文字

padding-margin-border

font-size

font-weight

透明度 opacityかrgba

letter-spacingで行間

line-heightで高さ間

 

 

 

5.画像

 

高さ横

border-radius

背景かアイコンか

 

6.ボックス要素

float: leftかdisplay:inline-block

vertical-align: top;(これは小さくなったときの対処)

width: %表示

background-color

box-shadow:0 1px 1px rgba(,,,,)

text-align:center

PBM

marginは上下左右に5pxくらいを入れておく。

中の記述はul&li表示か、pか決める

リンクの範囲をどこまでにするか

 

 

ProgateをみたらHTMLで作成するものはこの6つの部品に分けられていて、それぞれは上に記したような項目をつけたり消したりしているだけということがわかった。

だから自分でHTMLを作成する場合もストックしてある絵から選んできて、いかにこれらの要素に分けるかを考え、どの項目を指定するかを考えるのようにする。