サイト構築 フッター固定
下記のような構成のHTMLで、記事の内容が少なかったとしてもフッターを固定するには、body と mainタグのCSSに設定を与える。<!doctype html><html> <head> <meta charset="utf-8" />...
CSS
サイト構築 開発 スクロールは滑らかに
便利すぎる// スクロールは滑らかにhtml { scroll-behavior: smooth;}
サイト構築 [CSS] ぶら下がりインデント
どうということはないけれども、よく使うのにすぐ忘れるやつ。いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせすん いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま ...
サイト構築 [CSS] FAQ
CSSのみの動作サンプル。css内部でcontentsがQ.と A.の箇所は、Font Awsomeとか使うといいんじゃないかと思います。注意すべきところは、input タグ（チェックボックス）とlabelタグの連携部分と、チェックが入った...
サイト構築 画像の扱い
トップ画像の設定// タグ内で直接 background-image を設定.signboard { // 文字色・表示したい画像サイズ color: #fff; min-height: 300px; margin-bottom: 32px...
サイト構築 [CSS] 初期化設定
初期化状態を考えると、次のようなものが必要かな。// 共通設定* { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: bas...
サイト構築 [CSS] 画像に対する文字の回り込み
Flexboxのおかげで、floatを使うことはほとんどなくなったけど、画像に対する文字の回り込み処理には、まだ使う感じ。afterにいわゆる clearfix を設定しています。// 画像に対する文字の回り込み/// 左側に画像.img-...
サイト構築 [CSS] リストをカンマで区切る
最後以外にカンマをつける。カンマの後ろに半角スペースも挿入したい。となると下記のようになる。あら、とてもスマートで素敵。難しくはないんだけど、:not(:last-child) がね。忘れちゃって出てこないんだよね。// カンマ付き横並びリ...