フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

Bootstrap4で.img-responsiveにハマった話

カラーユニバーサルデザイン推奨配色セット ver.4 に基づいたスタイルシートを公開します。
自治体のホームページなど、アクセシビリティ(accessibility, a11y)が重視される場合にご利用ください。

全20色

アクセントカラーが9色、ベースカラーが7色、また無彩色から4色が選定され、合計20色あります。
※ver.3とは、同じ色でもrgb値が異なりますのでご注意ください。

スタイルシート

スタイルシートにしました。クラスを付与したhtmlを作成すれば、これらの色が反映されます。

.text-red {
    color: #ff4b00 ;
}
.text-yellow {
    color: #fff100 ;
}
.text-green{
    color: #03af7a ;
}
.text-blue {
    color: #005aff ;
}
.text-skyblue {
    color: #4dc4ff ;
}
.text-pink {
    color: #ff8082 ;
}
.text-orange {
    color: #f6aa00 ;
}
.text-purple {
    color: #990099 ;
}
.text-brown {
    color: #804000 ;
}
.text-lightpink {
    color: #ffcabf ;
}
.text-cream {
    color: #ffff80 ;
}
.text-yellowgreen{
    color: #d8f255 ;
}
.text-lightskyblue {
    color: #bfe4ff ;
}
.text-beige {
    color: #ffca80 ;
}
.text-lightgreen {
    color: #77d9a8 ;
}
.text-lightpurple {
    color: #c9ace6 ;
}
.text-white {
    color: #ffffff ;
}
.text-lightgray {
    color: #c8c8cb ;
}
.text-gray {
    color: #84919e ;
}
.text-black {
    color: #000000 ;
}
.background-red {
    background-color: #ff4b00 ;
}
.background-yellow {
    background-color: #fff100 ;
}
.background-green{
    background-color: #03af7a ;
}
.background-blue {
    background-color: #005aff ;
}
.background-skyblue {
    background-color: #4dc4ff ;
}
.background-pink {
    background-color: #ff8082 ;
}
.background-orange {
    background-color: #f6aa00 ;
}
.background-purple {
    background-color: #990099 ;
}
.background-brown {
    background-color: #804000 ;
}
.background-lightpink {
    background-color: #ffcabf ;
}
.background-cream {
    background-color: #ffff80 ;
}
.background-yellowgreen{
    background-color: #d8f255 ;
}
.background-lightskyblue {
    background-color: #bfe4ff ;
}
.background-beige {
    background-color: #ffca80 ;
}
.background-lightgreen {
    background-color: #77d9a8 ;
}
.background-lightpurple {
    background-color: #c9ace6 ;
}
.background-white {
    background-color: #ffffff ;
}
.background-lightgray {
    background-color: #c8c8cb ;
}
.background-gray {
    background-color: #84919e ;
}
.background-black {
    background-color: #000000 ;
}
  • text-(色名) : 文字色を指定する
  • background-(色名) : 背景色を指定する

注意点

カラーユニバーサルデザイン推奨配色セット ver.4の冊子に記載がありますように、この20色は、どの組み合わせで使ってもよい、というものではありません。この20色から選ぶ場合でも、選び方が良くないと、見分けにくい色の組み合わせが生じることがありますのでご注意ください。

[紹介元] CSSタグが付けられた新着投稿 – Qiita Bootstrap4で.img-responsiveにハマった話

コメント

記事に戻る

コメントを残す