0

blockquoteのスタイルをCSSのみで指定する

blockquoteのスタイルをCSSのみで指定する

引用文などで用いられる「blockquote」ですが、デフォルトではテキストが斜体になったり、明朝体になったり様々な設定がなされていますが、その都度デザインを考えるのもちょっと大変だなぁ~って場合には、基本のビジュアルを使い回せば随分ラクになります。

そこで、画像を読み込む手間もなく、CSSで色指定程度の変更で使い回せるスタイルをまとめておきたいと思います。よろしければご自由にお使いください。

それでは、サンプルをみながら確認していきましょう。

 

DEMO

 

 

HTML

 

CSS

まずはベースとなる共通のスタイルを指定します。そのままコピー&ペーストします。

共通CSS

 

追加でそれぞれの色別にCSSを追記してください。

type-a(GREEN)

green

 

 

type-a(PINK)

pink

 

 

type-a(BLUE)

blue

 

「“」の文字をCSS内で「Unicode」による指定をしているのが特徴です。

利用したいときに、CSSをコピー&ペーストで作業も捗るかもしれません。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > blockquoteのスタイルをCSSのみで指定する