引用文のために用意された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要素は引用元に限らず作品タイトル全般に使用されます。
programming-cafe.com
使用するCSSの概要
displayプロパティ
display ボックスの表示方法 コピペで使えるHTML+CSS
要素をどのように配置するか、displayを使って決定します。blockやinline、inline-block、そしてflex、そして表示をしないnone、具体的な事例をあげてdisplayによってどのように要素が配置されるかを例示します。
programming-cafe.com