CSS Coding

引用符(blockquote)の装飾を用いてメモの中身を表示する

本ブログでは多くの情報を参考に成り立っています。そんな情報の出所を明確にしたいので引用符(blockquote)を多用しています。そんな引用符を「MICRO5」に書き溜めたメモに関しても適用したい・・・通常の引用符とは違ったデザインで。

色々とネットを検索して、公開されている投稿記事「CSS3 を使って blockquote をちょっとおしゃれに Unformed Building」がとっても参考になる!

先ずは出力結果を下記に。

【0010】MICRO5 / システム手帳(2017.12.26)
ASHFORD の「ディープ(ノートタイプ)という商品で、リング径が 11mm。ペリカンの「スーベレーン 400 シリーズ」をホールドできるペンホルダーがありながらワイシャツの胸ポケットに収まる大きさ。

どうでしょう!?自分で言うのもなんですが、なかなか良い感じで表現できているような気がしているのですが。最初の 1 行目は、メモのタイトルで「【通し番号】+ タイトル + 日付」で表現しています。2 行目以降は単純にメモを。

上記のための style.css は以下の通り。

ポイントは、「blockquote:before」の設定でしょうか。content として文字表示ができる!正に上記の参考サイトがとっても参考になっています。

【追記:2018年3月11日】
通常の引用符(blockquote)とメモを視覚的に違うように見せるために「box-shadow」を追記しました!上記コードの 15 行目。単純に標準的な影を付けただけですが。

1年前

コメントを残す

メールアドレスが公開されることはありません。

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

海外からのコメントスパムを防ぐためにコメントには日本語の入力が必須ですのでご理解下さい。