レイアウト - osamaster2cn/muscle_museum GitHub Wiki

CSS/SCSS

// すべての要素のボックス調整を行う
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

// liタグの黒丸を消す
ul li {
    list-style: none;
}

// 文字とinputタグを離す
label {
    margin-right: 10px;
}

// 真ん中寄せしたい時
body {
  margin: 0 auto;
}

/* たて罫線用table */
table {
  height: 300px; 
  width: 1px; 
  background-color: gray; 
  border-collapse: collapse;
}

css構文

CSSの「#」「.」「>」ってどういう意味?各種記号解説

(個人的まとめ)よく使うflexboxの設定

【2019年*保存版】FlexBoxで簡単に横並びレイアウト|初心者でも大丈夫

BootStrap

とほほのBootstrap 4入門 テキスト・パスワード・テキストボックス Bootstrapでフォームを利用する方法

Bootstrap4カラムの位置を調整【カラムのオフセット】

Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする

【Bootstrap 4】navbar の一部の nav-item を右寄せに

deviseのflashをBootstrap対応にする

layoutメソッドで切り分け

【Rails】layoutメソッドの使い方をマスターしよう!

バーガーメニューアイコン

バーガーメニューアイコンを変更・調整する方法:Bootstrap 4

聖杯レイアウト/ハンバーガーのサンプルソース

しまぶーの IT 大学

field_with_errors問題

Railsのバリデーションエラーで、「field_with_errors」によるレイアウト崩れを防ぐ

学習

【CSS #1】基礎からちゃんと学ぶ CSS 入門!基本構文を抑えよう!【ヤフー出身エンジニアが教える初心者向けプログラミング講座】