CSS
Bootstrap
デザイン
ooc

高速でLPを作るために~①tips収集~


INFO:

CSSを書くのってどこから、

どのように設計するの?という疑問があったので、

職場で先輩がたが工夫しているところ、

気をつけていることをコードから学び取っていこうという記事です。

今回の記事では、

あ、ここ良いなというsnippetを集めていき

次回で組み立ての順序をさらって、

最終的には3、4時間でLPを

作れるようになるのが目的です。


WARNING:

■あくまでも自分のメモとして書いているので、

タイポ多いと思います。

■基本的に自分の知らないことだけメモってます。


備考:

■Bootstrap4とscss使います。


高速でlpを作るために~①tips収集~


OOCSS

Object-oriented CSS

使い回しの効く設計を心がける。

**Separate container and content**

(コンテナとコンテンツを分離する)

.text-heading {
font-wight: bold;
color: red;
}

**Separate structure and skin**

(構造とスキンを分離する)

.btn {
}

.btn-red {
backgroud-color: red;
}

.btn-gray {
backgroud-color: gray;
}

個人的に、

.text-

.btn-
.bg-
*バックグランド

などは別途ファイル作成して定義するのが

よいかんじだと思います。


いい感じにまとまってるやつ

■すぐに実践できるCSS設計 OOCSSの基本を理解しよう | ブログ | SINAP

■CSS設計における3大メソッド[OOCSS][BEM][SMACSS]



■最初にbodyとhtmlの設定をする

全体で使うフォントやテキストカラーなどを設定する。

メモ:


◯フォントサイズは

pcだと20px

タブレット端末だと18px

スマホだと16pxが良い感じ



Bootstrapのカスタマイズ


定数管理をしっかり行う。

Bootstrap variable

ををダウンロードして、他に色など付け足す。


すべて読み込まないようにする。

_bootstrap.scss


ここが詳しい。

RailsにBootstrapをカスタマイズ可能な形で導入する



■sectionごとに切り分けるのが便利

section

トップ画像
section
導入
section
特徴

メモ:


◯ブロック要素

padding top bottom をつけていいかんいじに。

margin right left autoに。



■breakpointの設定

よく見かける形は

@media (min-widht: 554px) {}

ただし、これだと毎回数値を書かないといけなくて面倒臭い。

よって変数管理できるように

@include media-breakpoint-down(sm)

とかく。

smはvariables.scssで別途に定義する。


自分の悪い習慣

学んで自分の良くなかった書き方をまとめます。


■btnのwidth


***自分の悪いコード
(Rails表記あり)
slim:
= link_to 'hoge', #, class: 'btn btn-hoge'

css:
.btn-hoge {
width: 220px;
}

***OOCSSを考慮した良いコード
slim:
.hoge
= link_to 'hoge', #, class: 'btn'

css:
.hoge {
width: 220px;
}

ブロック要素の中のインライン要素になるから、
.btnには.btn-blockを使って
margin: 0 auto;を使用。


終わりに:

また随時見つけたら更新していこうと思います。

ひとまず自分のしらないところは

抑えたので模写→見ないで作成。

そして手順のアウトプットして、

他のサイトで模写したいものを

2,3ピックアップ。

そしてまたアウトプットを繰り返そうと思います。

それでは、また。