【コピペできるCSS】引用符blockquote

2021-8-3

meko

シンプルな引用符

ここは引用符のエリアです。

html

<blockquote>
ここは引用符のエリアです。
</blockquote>
Copy

css

blockquote {
    border-left: 5px solid #eee3cb;
    margin-left: .5rem;
    padding: .5rem 1rem;
    color: #ad9f8e;
}
Copy

シンプルな引用符2

ここは引用符のエリアです。

html

<blockquote>
<p>ここは引用符のエリアです。</p>
</blockquote>
Copy

css

blockquote {
    border-left: none;
    margin-left: .5rem;
    padding: .5rem 1rem;
    background: #eee3cb;
    color: #8a7e5c;
}
Copy

飾り付きの引用符

未知の領域では慎重に進む

軽率な行動は愚か者のすることだ。重要な場面では、早まったり、向こう見ずな行動をとってはいけない。

html

<blockquote>
    <h4>未知の領域では慎重に進む</h4>
    軽率な行動は愚か者のすることだ。重要な場面では、早まったり、向こう見ずな行動をとってはいけない。
</blockquote>
Copy

css

blockquote {
    position: relative;
    border-left: 5px solid #eee3cb;
    margin-left: .5rem;
    padding: 1rem 1rem .5rem;
    color: #ad9f8e;
}
blockquote::before {
    content: "“";
    position: absolute;
    left: 1rem;
    top: .2rem;
    font-weight: bold;
    color: #eee3cb;
}
Copy