閉じる
閉じる

あまめも

HTMLで「引用符を自分好みに設定したい」って時は

HTML

こんにちは! あますた(@amaguristar)です。

簡単な文の引用をした時に「自動で引用符を付けたい」って時ありませんか?

cssで簡単に設定可能です。

 

quotesプロパティを設定する

短い文を使用する際に使うのは<q>タグ。通常は「””」などを使用して分かる様に設定します。

例) ”ここの文章に引用文を記載”

とは言え、「いちいち手動で設定するのも面倒」ですよね?

WordPressの場合はデフォルトで何かしらのマークが設定される様になってるテーマも存在。でも、「自分の好きな様にカスタムしたい」って時もあるかと思います。

そんな時はquotesプロパティを設定。

具体的には

q {
    quotes: "\"" "\"";
}

q::before {
    content: open-quote;
}

q::after {
    content: close-quote;
}

たったこれだけ。quotesの中で「\"」としてるのはcssの設定様の「”」と区別するためです。

今回は分かり辛いので下記cssを適用させます。

q {
    quotes: "〘" "〙";
}

q::before { content: open-quote; }
q::after { content: close-quote; }

実際に使うと、

HTML

<q>てすとてすとてすと</q>

表示

てすとてすとてすと

と表示されます。

まとめ

引用符を指定する時はquotesプロパティを下記の様に使用。

q {
    quotes: "〘" "〙";
}

q::before { content: open-quote; }
q::after { content: close-quote; }

quotesプロパティに

q {
    quotes: "〘" "〙" "«" "»";
}

と、連続でペアを指定すると引用符内でさらに引用すると入れ子の設定も可能です。

例) HTML

<q>てすと<q>入れ子</q>てすと</q>

実際の表示

てすと入れ子てすと

関連記事

  1. [甘]WordPressにログインできない!?「.htacces…

  2. GitのリモートリポジトリをSSH接続で独自サーバに作成してみた…

  3. [甘]パンくずリストつけてみた。

  4. take089-thumbnail

    WaznFilm更新】「Font Awesomeで何ができるの?…

  5. gitのリモートリポジトリをDropboxで作成してpushする…

  6. インフォ

    画面のサイズに合わせて拡大縮小する画像の簡単なCSS設定

こんなメモもありますよ♪

Twitter

ページ上部へ戻る