CSS
スマホとタブレットのCSS指定
タブレット用 @media (min-width: 768px) and (max-width: 979px) { ～ここにCSS記述する～ } スマホ用 @media (max-width: 767px) { ～こ…ヘッダー固定の時にページ内リンクでヘッダーに食い込まない指定方法
.link-anchor { padding-top: 100px !important; margin-top: -100px !important; } pxはヘッダーの高さを指定します。Sassメモ：!default を使った変数定義
$kabegami: "../img/kabegami.png" !default; Sassで変数定義をする時 !default を設定しておくことで、Sass記述中に変数値の変更をできるようになり…Sass：for文で一定パターンのCSSを生成する
下記のような一定パターンのCSSを量産したい時にSassのfor文が役に立ちます。 .fs10 {font-size:10px;} .fs11 {font-size:11px;} .fs12 {font-size:12p…
サイトの縦スクロールバーを表示し続ける
ページを移動する度に、スクロールバーの有る無しで微妙にヘッダーなどの配置が変わるのが嫌な方向けです。cssに以下を記述することで、ずっとページの中身が少ない時も常にスクロールバーを表示し続けることができます。 html{…Sass：@functionで関数を作る
Sassには多数の標準関数がありますが、不足があれば自分で作れます。 基本形は下記の記法。 @function 関数名($引数) { @return 処理; } 例えば下記の例。 @function boxWidth($…Sass：@extend でCSSクラスを統一しよう
あるCSSクラスをベースに、右詰めや左詰めなどバリエーション違いのクラスを作りたいというケースに @extend は使えます。 下記はSass記法例。 .box { width: 300px; height: 200px…