疑似要素やら変数やらを色々駆使して作ったデスクトップパソコン風のフレームデザインです。
定義したパソコンのサイズに応じて、ボタンのサイズも変動するようにしました。
簡単にカスタマイズできます！
サンプルとソースコード
用意した画像
用意したのは、アスペクト比16:9のホームページのスクショ風の画像です。
この画像を<div>で囲み、それに対してCSSでスタイリングを適用します。
CSSデザイン適用
上のデモでは、元画像のリンクをつけています。
HTMLコード
<div class="desktop">
<div class="desktop-frame">
<div class="screen">
<img src="image.jpg" alt="画像" />
</div>
</div>
</div>
画像は<img src=で貼ります。
CSS内で指定したモニターの幅とアスペクト比に合わせて、画像のサイズは自動で伸縮されます。
CSSコード
/* 全体設定 */
.desktop {
--max-width: 400px; /* モニターの幅 */
--frame-thickness: 20px; /* フレームの太さ */
--frame-color: #333; /* モニターの色 */
--button-color: rgba(255, 255, 255, 0.5); /* ボタンの色 */
--screen-color: #000; /* スクリーンの色 */
--aspect-ratio: 16 / 9; /* アスペクト比 */
--border-radius: 20px; /* モニターの丸さ */
--foot-width: 15%; /* 足の太さをモニター幅の15%に設定 */
--foot-height: 30px; /* 足の長さ */
margin: 10px 0; /* 上下の余白 */
padding: 0 0 calc(var(--foot-height) + var(--frame-thickness));
position: relative;
width: 100%;
max-width: var(--max-width);
}
/* フレームの部分 */
.desktop-frame {
position: relative;
width: 100%;
background-color: var(--frame-color);
border-radius: var(--border-radius);
box-sizing: border-box;
padding: var(--frame-thickness);
}
/* 画面の部分 */
.desktop-frame .screen {
background-color: var(--screen-color);
border-radius: calc(var(--border-radius) - var(--frame-thickness));
overflow: hidden;
aspect-ratio: var(--aspect-ratio);
}
/* 画像 */
.desktop-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ボタン */
.desktop::before {
content: '';
position: absolute;
bottom: calc(var(--foot-height) + var(--frame-thickness));
right: calc(var(--border-radius) * 2 / 3);
width: calc(var(--frame-thickness) * 6.5);
height: var(--frame-thickness);
z-index: 1;
--dot-size: calc(var(--frame-thickness) * 0.7);
background-image: radial-gradient(
circle,
var(--button-color) calc(var(--dot-size) / 2 - 1px),
transparent calc(var(--dot-size) / 2)
);
background-size: calc(var(--frame-thickness) * 1.2) var(--frame-thickness);
background-position: left center;
background-repeat: repeat-x;
-webkit-mask-image: linear-gradient(to right, black calc(100% - var(--frame-thickness) * 0.75), transparent calc(100% - var(--frame-thickness) * 0.75));
mask-image: linear-gradient(to right, black calc(100% - var(--frame-thickness) * 0.75), transparent calc(100% - var(--frame-thickness) * 0.75));
}
/* 足の縦部分 */
.desktop-frame::before {
content: '';
position: absolute;
width: var(--foot-width);
height: calc(var(--foot-height) + var(--frame-thickness));
bottom: calc(-1 * var(--foot-height) + var(--frame-thickness) * -0.5);
left: 50%;
transform: translateX(-50%);
background-color: var(--frame-color);
z-index: 0;
}
/* 足の横部分 */
.desktop::after {
content: '';
position: absolute;
width: 50%;
height: var(--frame-thickness);
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: var(--frame-color);
border-radius: calc(var(--border-radius) / 2);
z-index: 1;
}
カスタマイズ可能な項目は3行目から12行目です。
コードはめっちゃ長いですが、上の方をちょっとイジるだけで簡単にカスタマイズが楽しめます。
基本的にはモニターの幅のmax-width:◯◯px;を基準に、各装飾部分（ボタン、足、スクリーンなど）のサイズ比率が自動的に調整されるように設定しています。
12行目のmargin: 10px 0;をmargin: 10px auto;に変更すると、パソコンが中央配置になります。
デスクトップパソコンのデザインカスタマイズ例
コードはそのままに、画像だけチェンジしました。
ポップなカラーにカスタマイズ
モニター色は#cc0000、ボタンの色を#eeee00に設定。
薄型テレビ風にカスタマイズ
フレームの太さを10pxに、丸さを0pxに、足の太さを30%に、足の長さを100pxに設定。
ちっちゃいモニターにカスタマイズ
モニターの幅を200pxに設定。それに合わせて、フレームの太さは12px、足の長さは15pxへと小さくしました。
画面のサイズに合わせて、ボタンも勝手に小さくなります。
アスペクト比の変更
アスペクト比を1/1に設定。
設定したアスペクト比と画像のアスペクト比が異なる場合は、画像がぶった切られます。
スクロール可能なテキストボックスとして使う
こんにちは！
デスクトップパソコンの画面の中に、テキスト領域を作ってみました。文章が長いと右側にスクロールバーが現れます。
この領域の中では、太字などの普通の文字タグや、FontAwesomeのアイコンフォントも使えます。
＞ﾆｬｰ！
それはそうと、青画面に白いテキストのパソコンのモニターを見ると、心臓ヒェ…てなるよね。
デスクトップパソコンの画面の中に、テキスト領域を作ってみました。文章が長いと右側にスクロールバーが現れます。
この領域の中では、太字などの普通の文字タグや、FontAwesomeのアイコンフォントも使えます。
＞ﾆｬｰ！
それはそうと、青画面に白いテキストのパソコンのモニターを見ると、心臓ヒェ…てなるよね。
