KUSANAGI MAGAZINEで「きもおたわーどぷれす。」が紹介されました! クリックで公式サイトが開きます。

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

この記事は約2分で読めます。
記事内に広告が含まれています。

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

スポンサーリンク

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

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

infinityforest.net - infinityforest リソースおよび情報
infinityforest.net は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、infinityfor...

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

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

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

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

スポンサーリンク

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

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

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

HTML特殊文字コード表
解答者の写真
CSSに記述する場合は最初の3文字を「\00」に変更して;を除去します
 

参考記事はこちら

[CSS] contentプロパティで挿入できるコンテンツ
clearFixでお馴染みなCSSの擬似セレクタ:beforeと:afterではcontentプロパティという…
スポンサーリンク

まとめ

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

サイトを始めたい・引っ越したい方へ

おすすめレンタルサーバー「ConoHa WING」
Webサーバー処理速度 国内最速!
サイト管理・カスタマイズのタイパも抜群!
自動化AIのWEXALによって他社より負担を減らせます
各種キャンペーン施策によりコスパも抜群!
ConoHaに初めて入会かつ12か月以上のWINGパックなら
下のボタン経由で契約すると最大5000円の割引が受けられます

この記事を書いた人

素人の備忘録です。
素人がゆえにトラブルにぶつかりまくってきたので、同じように困った方の役に立てたらいいなと思ってます。
8年来のKUSANAGI推し。

元公安調査庁職員、発達障害(ADHD)

天満川 鈴をフォローする
カスタマイズ&プラグイン
タイトルとURLをコピーしました