【CSS】フォントサイズの最適化。clamp()の使い方
画面幅によってフォントサイズ変えるの、メディアクエリ何段も書くの地味に面倒じゃないですか？ clamp()を使うと、メディアクエリなしでなめらかに変えられますよー 早速サンプル ブラウザの幅をリサイズしてみてください。見
...
【CSS】counter-incrementを使って擬似要素をリスト化する
番号をふりたいんですけどー あー、擬似要素を使ってのリスト化ですねー サンプル一覧 1段目／1からはじまる2段目／0からはじまる3段目／01からはじまる4段目／001からはじまる See the Pen CSS / co
...
【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
ん、ハンバーガー？ 三本線がハンバーガーに見えるからってことらしいですよ クリックエフェクト サンプル集 いろんなハンバーガーメニューのクリック時のエフェクトを作ってみる。動きがわかりやすいようにゆっくり動くように指定。
...
【CSS】三角アイコンと矢印アイコンをつくる
画像は使わないんですか？ CSSだけで簡単にできますよー 三角アイコン 疑似要素「:before」でテキストの横に三角アイコンをつけています。 三角アイコン（丸背景あり） 疑似要素「:before」で丸背景をつけています
...
【CSS】見出しデザインをまとめてみる（左右に線を引くとか）
見出しのデザインをまとめてくださーい わ、わかりましたー 左右に線を引く よく見かけますね。線を引いて、背景白のテキストを乗せるって感じですね。 左右に線を引く（flexboxを使ってみる） さいごに ありがとうございま
...
【CSS】animationを使って流れるテキストとかを作ってみる
CSSだけで流れるテキストって作れますかー？ できますよー。animationを使ってやってみましょうー。 流れるテキスト animationを使う。動きの速度調整が少し難しい。幅は指定する。全体幅も明記してもいいが、し
...
【CSS】『shape-outside』でテキストの回り込みを円形にしてみる
文章の回り込みって丸くできないですかー？ あー、円形に回り込みですねー、できますよー テキストの回り込みを円形にしてみる floatが必須です。shape-outsideは、円形の『circle()』の他に楕円の『ell
...
【CSS】Webフォントのちらつきをなくす方法
一瞬だけ別のフォントが表示されるのですがー ちらつきをなくす方法を紹介しますねー Webフォントの『ちらつき』の原因 Adobeフォントやgoogleフォントなどの『Webフォント』を使うと、サイトを開いた時に一瞬だけ別
...
【CSS】tableの行（列）を『sticky』で固定したときにスクロールしても線が消えないようにしてみる
tableの項目を固定したのですが、線が消えちゃいますー ちょっとした工夫が必要ですねー tableの『行』を固定してスクロールする（失敗作） See the Pen 【CSS】テーブル（table）の行を固定してスクロ
...
【CSS】『mix-blend-mode』の実装サンプル、画像の白背景を消す（透過させる）など
画像の白背景をCSSで透過できたりしますかー？ できますよー 『mix-blend-mode』を使うとこんな感じになります（実装サンプル） 白背景を透過させるなら「multiply」がいい感じです。画像と背景の色バランス
...
【CSS】『プロパティ』と『値』の読み方をまとめました
widthって何て読むんですか？ 英語の発音だとウィスですが、わたしはウィドゥスと読んでますよー。ちょっとまとめてみますねー よく読み間違えてしまうのを先にまとめてみました プロパティ or 値 読み方 absolute
...
【CSS】打ち消し線（delタグ）をカスタマイズする
打ち消し線を二重線にできますかー？ できますよー いろんなパターンを実装してみる 簡単に<del>タグで囲っちゃえば打ち消し線はできるのですが、文字サイズが違うテキストに打ち消し線をつけると線が切れちゃいます
...
【CSS】Flexbox、flex-direction: column;とflex-grow: 1;を使ってボタンの位置を合わせる
ボタンの位置を揃えたいですー flex-directionとflex-growの組み合わせで揃いますよー 実装してみる 「詳しくはこちら」のボタンの位置を同じにしてみます。これ、なにげに難しいです。 ポイントは flex
...
【CSS】シンプルなボタンデザイン実装サンプル集
ボタンだー いろんなボタンをまとめましたー しっかり企業系のボタン シンプルな四角ボタン、左に三角 シンプルな角丸ボタン、右に矢印 シンプルな四角ボタン、左に矢印 付箋のようなボタン 立体的なボタン、押せるので楽しい 右
...
【CSS】background-colorを透過する時の備忘録（IE11対策）
IE11で確認すると透過になってないですー そういうときは、rgbをrgbaにチェンジですー 実装 さいごに わ、透過になってるー もうすぐ春ですねー
...
【CSS】ul、olの改行位置を揃える（リセットCSSを使用している場合）
リセットCSSを使うとリストがなんか変になるのですがー 簡単にスタイルを整えてあげましょうー ulの場合 簡単に。 See the Pen 【CSS】リストの改行位置を揃える（リセットCSSの場合）、ulの場合 by 1
...
【CSS】使える背景パターン、実装サンプル25選（コピペで簡単です）
あのー、水玉模様の背景をCSSで作りたいのですがー なるほどー、できますよー。工夫次第でいろんな背景が作れます。いろんなパターンまとめましたー 背景パターン / 方眼紙 ver.1 背景パターン / 方眼紙 ver.2
...
【CSS】注釈（※、*1）を記載するときのインデント合わせ（頭合わせ）
あのー、注釈の時に頭を合わせてって言われたんですけどどうしたらいいですかー？ では２パターン紹介しますねー、お好きな方でー ul（リスト）とtableの仕組みを使って揃えるパターン ulをtableにしてリスト化して揃え
...
【CSS】tableをレスポンシブ対応する、2列を1列に切り替える
tableを1列にレスポンシブしたいんですけどー CSSだけで簡単にできますよー 2列を1列に切り替える ブレイクポイントの設定 601px以上は2列。600px以下は1列。 See the Pen 【CSS】table
...
【CSS】ページ内リンク（アンカーリンク）の位置がズレる、CSSで調整する
あのー、CSSだけで調整できますかー？ CSSだけでも調整できますよー 固定ヘッダーで隠れる（ズレる） こんな感じでズレてます。 See the Pen ページ内リンク（アンカーリンク）の位置がズレる（固定ヘッダーで隠れ
...
【CSS】スマホ、タブレットで横スクロールする実装サンプル集
横スクロールー 横スクロールー 画像を横にスクロールしてみる 幅600px以下は横スクロールに設定してみました。（スマホでチェックしてみていただくとわかりやすいかと思われますー） テーブルを横にスクロールしてみる 幅60
...