引用のCSSを整える&記号はHTML特殊文字を使いましょう

本記事ではお洒落な引用CSSを掲載しているサイトの紹介。
そして、CSSを書く際の注意点について述べます。

天満川鈴 WRITTEN BY 天満川鈴
スポンサーリンク

CSSだけで引用を変えてみる

参考にしたのはこちらのサイト

画像を使うパターンと両方あります。
引用のCSSを扱ったサイトは結構あるのですが、意外なほど種類がないんですよね。
こういうのはCSSをどう組むかというよりデザインをどう組むかが重要。
こちらのは一目見て真似たいなあと思いました。
よかったら見に行ってみて下さい。

で、私が改良したのがこちら。

See the Pen 引用 by 天満川鈴 (@kimoota) on CodePen.

背景と文字色を微妙に変えて、ほんのりと背景から区分け。
beforeに引用符をつけてます。
あと幅が固定なのを可変に変更します。

記述にはHTML特殊文字を使う

参考記事のCSSは、そのままだとブラウザがEDGEだとクォーテーションマークが文字化けします。
そのため16進数表記に変更する必要があります。

HTML特殊文字の一覧表はこちら。

CSSに記述する場合は最初の3文字を「\00」に変更して;を除去します

参考記事はこちら

まとめ

有名テーマの引用CSSは、多くがグレーでシンプルなもの
それで用は足すのだけど……
作りが凝っているサイトは他の記事にも興味惹かれるもの。
ちょっとだけ手間かけて、他のサイトと差をつけませんか?

スポンサーリンク
天満川 鈴のプロフィール画像
WRITTEN BY

天満川 鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。 要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。 AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。
本サイトでは、WordPressやサイト制作に関する試行錯誤・検証内容を中心に発信。 技術検証の一環として、KUSANAGI公式サイトにて記事を2回紹介いただきました。

RECOMMENDED INFRASTRUCTURE

私はConoHa以外を勧めない。

2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは?」と聞かれたら、迷わずここを教えます。

レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何?」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。

※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。

公式サイトで詳細を見る
× 閉じる