Send by LINE
B! Bookmarks in Hate-bu
Bookmarks in Pocket
RSS feeds

HTML, CSS: How to customize quotations

Other language site
No available translations found
Google Translate
html5 css3 logo

It is a way to customize quotes, background colors, etc. when using quotes. I will do it in CSS.

q tag

Use it for short quotes or quoting part of the sentences. Let's see HTML, CSS, display results.

The default quotation marks are double quotation marks, and the quotes inside quotes are single quotation marks.

In custom, exchanging single quotation and double quotation and putting half-width spaces in the quotation inside quotation makes it easier to read.
Define quotes in CSS quotes property. Definitions are:

"[Start character] [End character] [Quoted internal starting character] [End quote character inside]"

Specify with.

And we start character with "open-quote" on the ": before" pseudo-element content property.
In addition, specify the termination character with "close - quote" of the ": after" pseudo-element 's content property.

For quotes within quotes, you do not need to specify anything other than the quotes property.
You do not need to specify the class name in the q tag in the citation in HTML. If you specify it in the quotes property, it will automatically quote it.

You do not need to specify it with the quotes property if you do not need quotes in quotes. It is also possible to use double-byte characters like Japanease.

blockquote tag

We use it for quotations such as sentences. Sources (cite tags) are often attached. Let's see HTML, CSS, display results.

Difference from q tag

In the q tag, it was not necessary to specify the class name of the quotation tag (q) in the quote, but in blockquote, it is necessary to specify the class name in the quotation tag (blockquote) in the quote.

In this case, specify the same class name (custom) as the parent quote tag.

Also, we use Font Awesome as the font specified in CSS quotes property.

This is because ordinary letter quotation is a top aligned character, and an extra area is formed under the character.
Regular quotation is not used because increasing the character size of quotation increases the extra area.

blockquote default

Looking at the quotation of default, the blockquote tag is displayed with a line break and indentation.

Also, since the cite tag of quotes is also displayed in the same indent, it can not distinguish it from quotes. It is hard to read. Customized version of this is "custom".

Customize blockquote

position property

The first point in specifying CSS is the position property. First, specify "relative" in CSS of blockquote tag. Pseudo-elements of ": before", ": after" and cite tag specify "absolute".

This relative, absolute has a meaning. Before that we explain the crucial difference between relative and absolute.

The position property is a property required to change the placement position of an element.
When specifying "top", "left", "right", bottom ", you must specify a value other than the initial value (static).
Detailed contents are listed here.

This time we use the property of position property. First of all, it is troubled if the area of the blockquote tag is made irrelevant to the surroundings, and this area itself is relative because it does not change its position.

Pseudo-element of ": before", ": after", cite tag is absolute because it performs fine position adjustment.
As a result, the criterion of the element to be repositioned is the upper left of blockquote.

Adjust elements

I will explain the fine adjustment of the ": before" and ": after" pseudo elements and the fine adjustment of the cite tag.

The ": before" pseudo-element expresses the upper left quotation. This will be at the top left corner, so adjust with the left and top properties.

The ": after" pseudo-element expresses the quotation on the lower right. It becomes lower right, so adjust with the right and bottom properties.

I want to display the cite tag in the lower right, so adjust it with the right and bottom properties. This makes it easy to understand the difference from quoted sentences.

Also, in the padding-bottom of the blockquote tag and the cite tag, we adjust it to take distance from quoted text.

In addition to adjusting the position, we change the font size of ": before" and ": after" pseudo-elements, cite tag to make it easy to see. You may change the type of font.

Other adjustments

Besides that, I quote the quotation with a border, change the background color of the quoted part, round the corner of the cited area. Also, we adjust the indent size with margin.

There is nothing particularly difficult around here.

Leave a Reply