CSS

2019.07.25

位置指定

display

display inline-block

inline-blockにして並べると微妙な隙間ができる。
　=>　display; flex:やfloat推奨

Float

親要素に含まれるブロック要素に当たるまで移動する。
基本的には左上を指向する。
float要素を入れると幅の制限を超える場合はそのコンテンツの下に入る。

clear: both;

子コンテンツに付ける。
両サイドの回り込みを解除できる。
floatを使った際に、floatの次に要素がある場合にはその要素に付与する。
当然であるが、最後の要素もfloatさせたい場合には使えない。
要素がない場合にはから要素を作るのではなく、親要素にclearfixを使うのが一般的。

clearfix

floatさせたい要素の親要素にclearfixクラスを設定して、CSSでclear: both;をかける。
具体的には親要素の後ろ（after）に空のブロック要素を作成してclear: both;している。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

position

相対位置指定 / 絶対位置指定

親要素にposition: relative:
子要素にposition: absolute:

position: relative;

子要素からの起点としたい要素に対して設定する。

position: absolute;

relative要素の左上の位置を0.0の座標として、top, left等を絶対値で指定する。
親要素から高さや幅等は見えなくなる。
floatとの強弱関係はfloatが親要素内で上へ積み上がっていく一方、absoluteは全てを無視して指定した位置に存在する。

中央寄せする場合は4辺の値を全て0にしてmargin; auto:

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

position fixed

ウィンドウに対して位置を固定できる。

headerやfooter等で通常ウィンドウサイズに自動的にwidthが設定されるが、固定するためにposition fixedにすると幅や高さの情報を失ってしまう？というより自動的には反映されなくなるのだろうか？
FLOATさせた時と同じ挙動のように見えるのだが、幅や高さを明示的に指定しなければ0として扱われるのかな？ちょっと理解不足。

padding と margin

margin

margin: auto; で左右中央揃へ

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
でrelative要素からの上下左右中央揃へ。

relativeの起点について

margin
position: relative;
した場合、起点はmarginを除いた左上から。
marginは要素外に余白を作る。

padding
position: relative;
した場合は、起点はpaddingで伸びた要素を含む左上から。
paddingは要素内に余白をつける。

nth-child

li:nth-child(5n){}

5の倍数で{}内のCSSを当てる。
単に数字を書けばその番目の要素に対してCSSを当てる。

横並び　折り返し　中央寄せ

.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

お約束　基本的なこと

box-sizing

汎用で使うのでcssの最初に定義した方が楽。

* {
  box-sizing: border-box;
}

calc

数字の指定に計算式を用いることもできる。

例　height: calc(100% - 180px);

css class指定

  • .a.b スペースなし　aかつb
  • .a .b スペースあり　aの中のb
  • .a,.b カンマ区切り　aとbの全て

!important

設定を優先させる。

height: 60px !important;

スタイル

white-space

改行やホワイトスペース（スペースやタブ）の表示方法を変更する。

white-space:nowrap;

ボックス要素の端まで行った場合、自動改行しない。

checkboxの装飾あれこれ

本来のcheckbox要素はdisplay noneにして消す。
その上で、labelのbefore要素にboxの代わりになるようなマークを指定する。

.checkbox:checked + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #241132;
  }
.checkbox-label:before{}

list

liはブロックレベル要素
listタグではデフォルトでdisplay: list-item;が設定されている。
display: inline-block; 等の別のdisplayタイプにすると上書きされ、リストの「・」が消える。
他にもlist-style: none;にするとリストの「・」を消せる。

背景の透過

rgbaでアルファチャンネルを0にすれば完全透過。
1は不透明。

background-color: rgba(0,0,0,0);

ページ内リンク

href属性に#hogeとidを指定すると飛ばせる。
id=”hoge”でも飛ばせる。

<a href="#hoge"></a>

入力フォームフォーカス時の枠線の色変更

&:focus {
  border-color: rgb(0, 132, 255);
  background-color: #ffc;
  outline: none;
}

number_fieldのボタンを非表示

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

文字色にグラデーションをつける

linear-gradient

直線上にグラデーションをつける。
また3色以上指定することもできる。

h1{
  color: #FF8C00;
  background: -webkit-linear-gradient(0deg, #40E0D0, #FF8C00, #FF0080);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

%で開始位置を指定できる。
以下の場合は左から50%の位置からグラデーションが始まる。

background: -webkit-linear-gradient(left, #000 50%, #fff);

target疑似クラス

クリック時に一部を表示ー非表示切替

<a href="#target_id">表示</a>
css

#target_id:not(:target) {
    display: none;
}
#target_id:target {
    display: block;
}

上記のようなリンクを用意しクリックすることで#target_idのコンテンツをターゲット状態にする。
そうするとdisplay: block;が当たって表示される。
逆にターゲットから外れると非表示になる。

マウスカーソル

cursor: pointer;

マウスオーバーでカーソルを変える。
aタグのような感じでカーソルが変わる。

★スタイルシートリファレンス
HTMLタグ・スタイルシート・特殊文字等の早見表
www.htmq.com

スクロール

overflow:

記事の内容がboxに収まりきらない場合にどうするかを指定する。
scrollにするとスクロールされるがスクロールバーが表示される。

overflow: scroll;
&::-webkit-scrollbar {
  display: none;
}

webkit系（safariやchrome）に関しては比較的簡単にスクロールバーを消せる。
class名:: -webkit-scrollbar{ dysplay:none;}でOK
ただし、firefox等の他系統には効かない。

概念的な話

rem, emについて

remはroot emの略。
rem, emともにpxの絶対指定と違って相対的な指定の方法。

emは親要素のフォントサイズを1emとして、1emや0.5emといった形で指定する。
remはhtml要素のフォントサイズを1remとする。通常1remは16px。

リセットCSS

ブラウザごとにCSSの初期値を持つため、ブラウザ間で差が生じる場合がある。
これを解消するために別の初期値を当てたCSSのこと。
以下のようなメジャーなものがある。

  • YUI 3
  • Eric Meyer’s
  • HTML5 Doctor
  • normalize.css

_reset.cssに書いて application.cssでimportする。

HTML5 Doctor Reset CSS

まっさらな状態。
box-sizing: border-box;すらないので注意。

HTML5 Reset Stylesheet | HTML5 Doctor
html5doctor.com

ress

box-sizing: border-box; 
が全ての要素に適応されているなど、微妙に調整されたリセットcss。
フォントサイズなんかも調整されているので好き好きで。
私はコレが好み。

ress/ress.css at master · filipelinhares/ress
🚿AmodernCSSreset.Contributetofilipelinhares/ressdevelopmentbycreatinganaccountonGitHub.
github.com

BEM

Block、Element、Modifierの頭文字
CSSのクラスの命名規則を考える。

要素説明
Block大元となるブロック要素
ElementやModifierは、このBlockを起点に命名する。
ElementBlockに属する子要素。
1つ以上のElementにより、Blockは構成されています。
Modifier上記に特別な修飾をする要素です。
Modifierの命名には形容詞を用いる。
  • BlockとElementは、アンダースコア2つでつなぐ
  • Modifierは、ハイフン2つでつなぐ
  • 単語を繋ぐ場合はハイフン1つ。
<ul class='menu'>
    <li class='menu__list'>hogehoge</li>
    <li class='menu__list menu__list--black'>fugafuga</li>
</ul>

railsでのフォルダ管理

以下のようなサブフォルダで管理することが多い。

  • config
  • mixin
  • module
  • vendor ・・・　ライブラリを管理
  • oberride

関連記事

コメント