CSSは楽しい

note風スタイル第5弾!引用とコード ニッチな話題

note風スタイル第5弾!引用とコード

note風デザインもそろそろ簡単な微調整です。 今回は引用文(blockquote)とコード(pre)のデザイン。 ビフォア・アフター 元のデザインに比べて、小さくグレー基調にしました。 以前は引用部分が長いと「うるさい」印象があったので、全体が見通せるようになりました。 ただ、文字は少し小さいかもしれません。 こんな感じの引用。こんな引用元 code is here { something. } 引用ブロック 引用ブロックは、かなりスッキリしました。 .entry-cont...
note風スタイル第4弾!目次のデザイン ニッチな話題

note風スタイル第4弾!目次のデザイン

「note風スタイル」ということで、ブログのスタイルシートを編集しています。 今回は、目次について。 主な変更点は…… 文字を細く・小さく・薄く背景色をグレーに項目の間に線を追加 noteの目次の特徴は、「控えめ」なこと。 記事によっては目次を付けていないものも多いです。 目次(table of contents)のHTML構造 .toc.toc-title.toc-contentol.toc-listlia リスト構造(ol, li)とアンカーリンク(a)の関係で、かなり複...
タイトル見出しにアニメーションをつけてみた 【CSS animation】 ニッチな話題

タイトル見出しにアニメーションをつけてみた 【CSS animation】

タイトル見出しを大きく表示するようにしたので、アニメーションで表示するようにしてみました。 基本的なアニメーション部分の構造をみる 見出し全体のフェードインと、上下の線の伸びるエフェクトの2つが組み合わせています。 CSSの中でフェードインの部分だけを抜き出してみます。 /* 見出しをフェードイン */ h1.entry-title { animation: title-fade-in 0.5s ease 0.8s 1 normal running forwards; } @...