cite(作品タイトル)を右下に表示 コピペで使えるHTML+CSS

スポンサーリンク

引用文のために用意されたblockquote及び、qの2つの要素。その引用元の情報を記載する対象であるcite要素の表示位置を修正する簡単な方法について解説。

スポンサーリンク

cite要素(作品タイトル)を右下に表示

display:block;として、ブロックボックスとし、強引に改行させ、text-alignで右寄せする方法をとった。

修正前

春はあけぼの。やうやう白くなりゆく 山際、少し明かりて、紫だちたる雲の細くたなびきたる。枕草子

 
修正後

春はあけぼの。やうやう白くなりゆく 山際、少し明かりて、紫だちたる雲の細くたなびきたる。枕草子

スタイルシートで記述
<blockquote>春はあけぼの。やうやう白くなりゆく 山際、少し明かりて、紫だちたる雲の細くたなびきたる。<cite class="cite-right-bottom">枕草子</cite></blockquote>
.cite-right-bottom{
    display: block; 
    text-align: right;
}
可視化すると・・

春はあけぼの。やうやう白くなりゆく 山際、少し明かりて、紫だちたる雲の細くたなびきたる。(display: block; text-align: right; background: green;)  枕草子

 

対象要素の概要

cite要素

cite 作品タイトル コピペで使えるHTML+CSS
書籍、webページなどの作品タイトルを表示するためのcite要素の仕組み。cite要素は引用元に限らず作品タイトル全般に使用されます。

使用するCSSの概要

displayプロパティ

display ボックスの表示方法 コピペで使えるHTML+CSS
要素をどのように配置するか、displayを使って決定します。blockやinline、inline-block、そしてflex、そして表示をしないnone、具体的な事例をあげてdisplayによってどのように要素が配置されるかを例示します。