CSS3 : 文字列のワイプ表示 最近たまに見る、ブロックがワイプで入ってきて文字が表示されるタイプの表現を目コピしたサンプル。 See the Pen Wipe in text by Kazuyoshi Goto (@KazuyoshiGoto) on… ゴトーハック2019.05.15 3,644
CSS : 時系列の分かりやすいリスト See the Pen Timeline Style by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 何かの履歴など時系列が分かりやすいシンプルなリスト。 :before :… ゴトーハック2019.04.03 2,520
CSS3 : 擬似要素へのbackground-imageを継承するビジュアル表現テスト まずはサンプルから See the Pen background inherit test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. よくあるサムネイルの一覧表示では … ゴトーハック2018.12.05 2,807
CSS3 : 斜め背景の作り方 最近よく見る↓のような斜め背景をCSSで実装する方法です。 See the Pen Slant Section by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. HTML &l… ゴトーハック2018.11.16 6,291
font-displayはCDN型Webフォントサービスに利用できない Webフォントを使うと、そのフォントが読み込み完了するまでの間、文字が全く表示されない瞬間があります。 英字フォントはファイルサイズが数十KB〜数百KB程度と軽いので気づきにくいですが、日本語フォントは形が複雑かつ文字数… ゴトーハック2018.10.05 3,098
CSS3 : 要素が空の時のセレクタ「:empty」の使い方 See the Pen CSS :empty Test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 上記サンプルのxアイコンをクリックしてリストをすべて消してみてください… ゴトーハック2018.09.25 6,149
CSS3 : 固定UIをJavaScriptいらずで実現できる「position:sticky」 まずは以下サンプルの画面をスクロールしてみてください。 See the Pen CSS3 position:sticky test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePe… ゴトーハック2018.04.20 415
CSS : メディアクエリを使わずレスポンシブ幅に対応する メディアクエリの記述を使わず、最もコンパクトにレスポンシブな幅指定する方法。 .hoge { width: 90vw; //スマホ時の幅 max-width: 800px; //PC表示時の幅 } width: 90v… ゴトーハック2018.01.16 1,892
CSS:last-childより「last-child以外」の方がブラウザにやさしい たとえば「リストが最後の時」にスタイルを変化させたい時、以下の書き方がよくあります。 li { margin-bottom: 20px; } li:last-child { margin-bottom: 0; } 「平常… ゴトーハック2017.11.09 52,733