1要素のHTMLとCSSだけでドットの枠を作ってみた
ぴこぴこ 8bit けい
ブロックようそ
ブロックようそ
- 使用フォントをPixelMplus10 RegularからDotGothic16へ変更
- 記事公開
角がドットっぽく丸くなるブロック要素をHTML1要素と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変数を利用しているので、変更時の編集必要箇所をかなり少なくできたと思います。
余白の調整
擬似要素を除いた「要素自体」部分の余白になるのでその点加味して調整してください。
デフォルトでは外余白の左右に擬似要素表示分の領域を確保しています。