CSSでNEWマークを表示するやり方

CSSでNEWマークを表示するやり方

CSSでNEWマークを表示するとブログやホームページで最新情報をユーザーに分かりやすく伝えることができます。

たとえばNEWマークが表示されていると凄く分かりやすいと思ったのは、とあるゲームの公式ホームページで不具合状況の最新を知りたいときに表示されていたNEWマークです。

上記は一例ですが、NEWマークはホームページの種類を問わず活用の幅が広いため、CSSでNEWマークを表示するやり方を覚えておいても損はしないです。

 

CSSでNEWマークを表示するには

 

CSSでNEWマークを表示するときには、NEWマークを表示したいHTMLの要素でCSSセレクタを作り、疑似要素「befor」もしくは「after」を使用して、コンテンツの前か後にNEWマークを表示します。

そしてNEWマークを表示する疑似要素は表示位置を移動できるようにするために、NEWマークを表示する基準の要素をCSSで決めておき、NEWマークの表示位置をコントロールできるようにします。

NEWマークはCSSだけで表示することができます。

 

NEWマークを表示する基準位置をCSSで決める

 

はじめにNEWマークを表示するHTMLの要素を決めてCSSで基準位置を決めます。

 

<div class="new"></div>

 

上記のHTMLはnewクラスを付与したdiv要素のボックスをマークアップしてます。このnewクラスのdiv要素をCSSでNEWマークを表示する基準位置の要素にします。

 

.new{
    position: relative;
    background-color: aliceblue;
    width: 100%;
    max-width: 384px;
    margin: 60px auto;
    aspect-ratio: 16/9;
}

 

newクラス付きdivボックスにはNEWマークを表示するためにCSSで.newクラスセレクタを作成してposition: relativeを指定します。

CSSでposition:relativeを指定した要素は、もともと配置される場所の位置を基準位置にすることができます。

そのため、NEWマークをCSSで表示するときには基準位置を決めてあるので、newクラスが付いたdivボックスの左上を基準位置にして、表示するNEWマークの移動ができるようになります。

 

 

NEWマークを表示するボックスのサイズや背景色は、それぞれ好きなデザインにしておきます。今回はnewマークを表示する例として、比率16/9のサイズにしたボックスを、うっとりするほどのaliceblueでシンプルな背景色にし、CSSでNEWマークを表示します。

NEWマークを表示するボックスの比率16/9のサイズはCSSのaspect-ratioプロパティを使用しています。ブラウザ対応状況の関係上、記事内のCSSをコピペして表示確認する方はChromeブラウザを使用してください。

 

CSSの疑似要素でNEWマークを表示する

 

基準位置を決めたnewクラス付きのdivボックスのセレクタ.newにCSSの疑似要素「before」を使用してNEWマークを表示します。

 

.new{
    position: relative;
    background-color: aliceblue;
    width: 100%;
    max-width: 384px;
    margin: 60px auto;
    aspect-ratio: 16/9;
}

.new::before{
    content: "NEW";
    background-color: crimson;
    padding: 5px 25px;
}

 

Advertisement

 

先に記述した.newセレクタの下に.new::beforeのセレクタを作成してcontentプロパティを記述します。contentの値にはNEWの文字列を記述します。

NEWの文字列の記述後はCSSで表示するNEWという文字にbacground-colorで背景色を適用しておきます。NEWマークの表示を分かりやすくするためです。

ここまで記述したCSSでNEWマークが表示するかどうかを一度ブラウザで確認します。

 

 

ブラウザでのNEWマークの表示結果は、うっとりするほどのaliceblueでシンプルなdivのボックス左上にbeforeの疑似要素を形成してNEWマークを表示することができます。

 

CSSでNEWマークが表示する位置を移動

 

NEWマークを表示している疑似要素の.new::beforeにposition: absolute;の記述を加えると、ボックス左上を基準にNEWマークを移動して表示位置をコントロールすることができるようになります。

 

.new::before{
    position: absolute;
    content: "NEW";
    top: 0;
    left: 0;
    background-color: crimson;
    padding: 5px 25px;
}
Advertisement

 

.new::beforeセレクタにposition: absolute;の記述をしますが、一緒にtopとleftも記述します。topとleftの値はどちらも0を指定します。

 

 

そうするとNEWマークはdivボックスの左上に表示することができます。この左上が今回のボックスを基準に疑似要素を形成した基準位置、初期位置になるので、topとleftの値で数値を変えるとCSSでNEWマークの表示位置は移動します。

たとえばNEWマークをボックスの左上から上にはみ出すように表示したい場合にはtopの値を負数で指定してNEWマークの配置を上に移動します。

 

.new::before{
    position: absolute;
    content: "NEW";
    top: -34px;
    left: 0;
    background-color: crimson;
    padding: 5px 25px;
}

 

 

CSSでNEWマークの表示を斜めにしたい場合でも位置を移動するのが役立ちます。

 

 

.new::before {
    position: absolute;
    content: "NEW";
    top: -7px;
    left: -20px;
    background-color: crimson;
    padding: 5px 25px;
    transform: rotate(-30deg);
}

 

NEWマークをCSSで斜めに表示するにはtransform: rotate()を使用してカッコ内に斜めにしたい角度をdegで指定しますが、NEWマークの位置がズレてしまうので、topとleftでのNEWマークの位置を細かく移動して微調整するのが役立ちます。

 

NEWマークをCSSで表示するパターン

 

NEWマークをCSSで表示するパターンはテキストで表示するだけではなく画像を使用してNEWマークを表示することができます。

またNEWマークを表示するコンテンツのパターンで考えた場合には一覧記事の中で最新の記事にNEWマークを表示するパターンもあります。

上記2つのパターンは「CSSで記事一覧に画像でNEWマークを表示する」という1つの例にしてみました。

 

 

上の画像の一覧記事は、それぞれの記事をHTMLのarticleタグでマークアップした要素にしています。NEWマークを表示するためだけに即席で作りました。

 

.new{
    position: relative;
}

.new::before{
    position: absolute;
    content: "";
    top: -30px;
    left: -20px;
    width: 100%;
    height: 100%;
    background-image: url(uploads/new-mark.png);
    background-size: 80px;
    background-repeat: no-repeat;
    z-index: 999;
}

 

article要素には.newクラスを使用していて、CSSで.newセレクタと.new::beforeセレクタを作成します。

.newセレクタはposition: relative;を記述します。ボックス自体のデザインは省略してます。

そして.new::beforeセレクタにはposition: absoluteを。

続いてcontentの値を空で指定し、テキスト(NEW)は表示しないようにします。

テキストの代わりにbackground-imageを使い、urlのカッコ内にNEWマークとして表示したい画像のパスを指定します。

あとはwidthとheightを100%にしたりbackgroundの個別プロパティでNEWマークの背景画像を調整します。

この時点で一度NEWマークの表示を確認します。

 

 

記事一覧のNEWマーク表示は上の画像のように一つ一つの記事にNEWマークが表示してしまいます。

NEWマークというからには、一覧記事の中で最初の記事ひとつだけにNEWマークを表示したいです。

 

.new:first-child::before {
    position: absolute;
    top: -30px;
    left: -20px;
    color: deeppink;
    background-image: url(uploads/new-mark.png);
    background-size: 80px;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    z-index: 999;
}

 

そこでCSSの疑似クラス「first-child」を使います。

.new::beforeのセレクタを.new:first-child::beforeに変更します。

 

 

すると記事一覧でのNEWマークはCSSのfirst-childが.newクラスの最初の要素だけを適用対象にしてNEWマークの画像を表示してくれます。

記事一覧のHTML構造によっては、もしかするとfirst-childが効かない場合があるかもしれません。その場合はfirst-childをfirst-of-typeに変えてみます。

 

記事中の画像の一覧記事はWordPressの一覧記事です。

そのためWordPressにCSSでNEWマークを表示するやり方もfirst-childでNEWマークを表示するのが有効です。

WordPressはページを動的に生成するため、CSSでNEWマークを表示する場合first-childを使用すると一覧記事の最初の投稿に常に表示できるようにすることができるので便利です。

CSSカテゴリの最新記事