１要素のHTMLとCSSだけでドットの枠を作ってみた

20-04-11 20-04-11

ぴこぴこ 8bit けい
ブロックようそ

使用フォントをPixelMplus10 RegularからDotGothic16へ変更
記事公開

角がドットっぽく丸くなるブロック要素をHTML１要素とCSSのみでつくってみたので置いておきます。

source code

基本

demo

text

HTML


        
	<div class="game">text</div>

CSS


        
	@import url('https://fonts.googleapis.com/css2?family=DotGothic16');
	
	.game {
		--border-width: 3px;/* 枠線幅 */
		--border-color: #ffffff;/* 枠線色 */
		position: relative;
		margin: 0 calc( var(--border-width) * 2 );/* 外余白 */
		padding: 10px 5px;/* 内余白 */
		border-style: solid none;
		border-width: var(--border-width);
		border-color: var(--border-color);
		background-color: transparent;/* 背景色 */
		color: #ffffff;/* 文字色 */
		font-family:'DotGothic16',sans-serif;/* フォント */
	}
	
	.game::before ,
	.game::after  {
		content: '';
		position: absolute;
		top: var(--border-width);
		bottom: var(--border-width);
		display: block;
		width: var(--border-width);
		background-color: inherit;
		color: var(--border-color);
		--border-width-m: calc( var(--border-width) * -1);
	}
	.game::before {
		right: 100%;
		box-shadow: 0 var(--border-width-m), 0 var(--border-width), var(--border-width-m) 0;
	}
	.game::after {
		left: 100%;
		box-shadow: 0 var(--border-width-m), 0 var(--border-width), var(--border-width) 0;
	}

配色等簡易変更ツール

demo

text

入力で上記ソースも書き換わります。

枠線

要素

何をやっているのか

demo

text

before elment after

擬似要素のbefore,afterを使って枠線を作成しています。

demo内ボタンクリックでそれぞれ分離できるようにしたので個別にどんな表示か確かめたい人はそちらから。

各部品役割

elemnt(要素自体)
- borderで上下の線表示
before,after(擬似要素)
- 枠線太さ分の幅のブロック要素
- 上下に枠線太さ分の余白
- box-shadowで線表示

CSS編集について

基本

擬似要素部分は変更非推奨

基本コメントアウト付きの行のみ変更推奨

今回CSS変数を利用しているので、変更時の編集必要箇所をかなり少なくできたと思います。

余白の調整

擬似要素を除いた「要素自体」部分の余白になるのでその点加味して調整してください。

デフォルトでは外余白の左右に擬似要素表示分の領域を確保しています。