CSS3
CSS : 時系列の分かりやすいリスト
See the Pen Timeline Style by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 何かの履歴など時系列が分かりやすいシンプルなリスト。 :before :…CSS3 : 擬似要素へのbackground-imageを継承するビジュアル表現テスト
まずはサンプルから See the Pen background inherit test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. よくあるサムネイルの一覧表示では …CSS3 : 斜め背景の作り方
最近よく見る↓のような斜め背景をCSSで実装する方法です。 See the Pen Slant Section by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. HTML &l…font-displayはCDN型Webフォントサービスに利用できない
Webフォントを使うと、そのフォントが読み込み完了するまでの間、文字が全く表示されない瞬間があります。 英字フォントはファイルサイズが数十KB〜数百KB程度と軽いので気づきにくいですが、日本語フォントは形が複雑かつ文字数…CSS3 : 要素が空の時のセレクタ「:empty」の使い方
See the Pen CSS :empty Test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 上記サンプルのxアイコンをクリックしてリストをすべて消してみてください…CSS3 : 固定UIをJavaScriptいらずで実現できる「position:sticky」
まずは以下サンプルの画面をスクロールしてみてください。 See the Pen CSS3 position:sticky test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePe…CSS : メディアクエリを使わずレスポンシブ幅に対応する
メディアクエリの記述を使わず、最もコンパクトにレスポンシブな幅指定する方法。 .hoge { width: 90vw; //スマホ時の幅 max-width: 800px; //PC表示時の幅 } width: 90v…