{"id":2417,"date":"2024-08-24T20:45:41","date_gmt":"2024-08-24T11:45:41","guid":{"rendered":"https:\/\/haugenic.com\/?p=2417"},"modified":"2024-08-24T20:56:27","modified_gmt":"2024-08-24T11:56:27","slug":"%e3%80%90css%e3%80%91%e7%94%bb%e5%83%8f%e3%81%ab%e3%83%87%e3%82%b9%e3%82%af%e3%83%88%e3%83%83%e3%83%97%e3%83%91%e3%82%bd%e3%82%b3%e3%83%b3%e9%a2%a8%e3%81%ae%e6%9e%a0%e3%82%92%e4%bb%98%e3%81%91","status":"publish","type":"post","link":"https:\/\/haugenic.com\/?p=2417","title":{"rendered":"\u3010CSS\u3011\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30d1\u30bd\u30b3\u30f3\u98a8\u306e\u753b\u50cf\u30d5\u30ec\u30fc\u30e0\u306e\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u30c7\u30b6\u30a4\u30f3"},"content":{"rendered":"<p><span class=\"marker_yellow_futo\">\u7591\u4f3c\u8981\u7d20<\/span>\u3084\u3089<span class=\"marker_yellow_futo\">\u5909\u6570<\/span>\u3084\u3089\u3092\u8272\u3005\u99c6\u4f7f\u3057\u3066\u4f5c\u3063\u305f\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30d1\u30bd\u30b3\u30f3\u98a8\u306e\u30d5\u30ec\u30fc\u30e0\u30c7\u30b6\u30a4\u30f3\u3067\u3059\u3002<br \/>\r\n\u5b9a\u7fa9\u3057\u305f\u30d1\u30bd\u30b3\u30f3\u306e\u30b5\u30a4\u30ba\u306b\u5fdc\u3058\u3066\u3001\u30dc\u30bf\u30f3\u306e\u30b5\u30a4\u30ba\u3082\u5909\u52d5\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002<br \/>\r\n\u7c21\u5358\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u307e\u3059\uff01<\/p>\r\n<h2>\u30b5\u30f3\u30d7\u30eb\u3068\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h2>\r\n<h3 class=\"sa sa--up\">\u7528\u610f\u3057\u305f\u753b\u50cf<\/h3>\r\n<p><a href=\"https:\/\/haugenic.com\/wp-content\/uploads\/2024\/08\/047.jpg\"><img decoding=\"async\" src=\"https:\/\/haugenic.com\/wp-content\/uploads\/2024\/08\/047-large.jpg\" alt=\"\" width=\"300\" class=\"alignnone size-large wp-image-2415\" \/><\/a><\/p>\r\n<p>\u7528\u610f\u3057\u305f\u306e\u306f\u3001\u30a2\u30b9\u30da\u30af\u30c8\u6bd416:9\u306e\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u306e\u30b9\u30af\u30b7\u30e7\u98a8\u306e\u753b\u50cf\u3067\u3059\u3002<br \/>\r\n\u3053\u306e\u753b\u50cf\u3092<span class=\"marker_yellow_futo\">&lt;div&gt;<\/span>\u3067\u56f2\u307f\u3001\u305d\u308c\u306b\u5bfe\u3057\u3066CSS\u3067\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u3092\u9069\u7528\u3057\u307e\u3059\u3002<\/p>\r\n<h3 class=\"sa sa--up\">CSS\u30c7\u30b6\u30a4\u30f3\u9069\u7528<\/h3>\r\n<div class=\"desktop\">\r\n<div class=\"desktop-frame\">\r\n<div class=\"screen\"><a href=\"https:\/\/haugenic.com\/wp-content\/uploads\/2024\/08\/047.jpg\"><img decoding=\"async\" src=\"https:\/\/haugenic.com\/wp-content\/uploads\/2024\/08\/047-large.jpg\" alt=\"\" width=\"400\" height=\"225\" class=\"alignnone size-large wp-image-2415\" \/><\/a><\/div>\r\n<\/div>\r\n<\/div>\r\n<p>\u4e0a\u306e\u30c7\u30e2\u3067\u306f\u3001\u5143\u753b\u50cf\u306e\u30ea\u30f3\u30af\u3092\u3064\u3051\u3066\u3044\u307e\u3059\u3002<\/p>\r\n<h3 class=\"sa sa--up\">HTML\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"desktop\"&gt;\r\n  &lt;div class=\"desktop-frame\"&gt;\r\n    &lt;div class=\"screen\"&gt;\r\n      &lt;img src=\"image.jpg\" alt=\"\u753b\u50cf\" \/&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\r\n<p>\u753b\u50cf\u306f<span class=\"marker_yellow_futo\">&lt;img src=<\/span>\u3067\u8cbc\u308a\u307e\u3059\u3002<br \/>\r\nCSS\u5185\u3067\u6307\u5b9a\u3057\u305f\u30e2\u30cb\u30bf\u30fc\u306e\u5e45\u3068\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u306b\u5408\u308f\u305b\u3066\u3001\u753b\u50cf\u306e\u30b5\u30a4\u30ba\u306f\u81ea\u52d5\u3067\u4f38\u7e2e\u3055\u308c\u307e\u3059\u3002<\/p>\r\n<h3 class=\"sa sa--up\">CSS\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\/* \u5168\u4f53\u8a2d\u5b9a *\/\r\n.desktop {\r\n  --max-width: 400px; \/* \u30e2\u30cb\u30bf\u30fc\u306e\u5e45 *\/\r\n  --frame-thickness: 20px; \/* \u30d5\u30ec\u30fc\u30e0\u306e\u592a\u3055 *\/\r\n  --frame-color: #333; \/* \u30e2\u30cb\u30bf\u30fc\u306e\u8272 *\/\r\n  --button-color: rgba(255, 255, 255, 0.5); \/* \u30dc\u30bf\u30f3\u306e\u8272 *\/\r\n  --screen-color: #000; \/* \u30b9\u30af\u30ea\u30fc\u30f3\u306e\u8272 *\/\r\n  --aspect-ratio: 16 \/ 9; \/* \u30a2\u30b9\u30da\u30af\u30c8\u6bd4 *\/\r\n  --border-radius: 20px; \/* \u30e2\u30cb\u30bf\u30fc\u306e\u4e38\u3055 *\/\r\n  --foot-width: 15%; \/* \u8db3\u306e\u592a\u3055\u3092\u30e2\u30cb\u30bf\u30fc\u5e45\u306e15%\u306b\u8a2d\u5b9a *\/\r\n  --foot-height: 30px; \/* \u8db3\u306e\u9577\u3055 *\/\r\n  margin: 10px 0; \/* \u4e0a\u4e0b\u306e\u4f59\u767d *\/\r\n  padding: 0 0 calc(var(--foot-height) + var(--frame-thickness));\r\n  position: relative;\r\n  width: 100%;\r\n  max-width: var(--max-width);\r\n}\r\n\r\n\/* \u30d5\u30ec\u30fc\u30e0\u306e\u90e8\u5206 *\/\r\n.desktop-frame {\r\n  position: relative;\r\n  width: 100%;\r\n  background-color: var(--frame-color);\r\n  border-radius: var(--border-radius);\r\n  box-sizing: border-box;\r\n  padding: var(--frame-thickness);\r\n}\r\n\r\n\/* \u753b\u9762\u306e\u90e8\u5206 *\/\r\n.desktop-frame .screen {\r\n  background-color: var(--screen-color);\r\n  border-radius: calc(var(--border-radius) - var(--frame-thickness));\r\n  overflow: hidden;\r\n  aspect-ratio: var(--aspect-ratio);\r\n}\r\n\r\n\/* \u753b\u50cf *\/\r\n.desktop-frame img {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}\r\n\r\n\/* \u30dc\u30bf\u30f3 *\/\r\n.desktop::before {\r\n  content: '';\r\n  position: absolute;\r\n  bottom: calc(var(--foot-height) + var(--frame-thickness));\r\n  right: calc(var(--border-radius) * 2 \/ 3);\r\n  width: calc(var(--frame-thickness) * 6.5);\r\n  height: var(--frame-thickness);\r\n  z-index: 1;\r\n  --dot-size: calc(var(--frame-thickness) * 0.7);\r\n  background-image: radial-gradient(\r\n    circle,\r\n    var(--button-color) calc(var(--dot-size) \/ 2 - 1px),\r\n    transparent calc(var(--dot-size) \/ 2)\r\n  );\r\n  background-size: calc(var(--frame-thickness) * 1.2) var(--frame-thickness);\r\n  background-position: left center;\r\n  background-repeat: repeat-x;\r\n  -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--frame-thickness) * 0.75), transparent calc(100% - var(--frame-thickness) * 0.75));\r\n  mask-image: linear-gradient(to right, black calc(100% - var(--frame-thickness) * 0.75), transparent calc(100% - var(--frame-thickness) * 0.75));\r\n}\r\n\r\n\/* \u8db3\u306e\u7e26\u90e8\u5206 *\/\r\n.desktop-frame::before {\r\n  content: '';\r\n  position: absolute;\r\n  width: var(--foot-width);\r\n  height: calc(var(--foot-height) + var(--frame-thickness));\r\n  bottom: calc(-1 * var(--foot-height) + var(--frame-thickness) * -0.5);\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  background-color: var(--frame-color);\r\n  z-index: 0;\r\n}\r\n\r\n\/* \u8db3\u306e\u6a2a\u90e8\u5206 *\/\r\n.desktop::after {\r\n  content: '';\r\n  position: absolute;\r\n  width: 50%;\r\n  height: var(--frame-thickness);\r\n  bottom: 0;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  background-color: var(--frame-color);\r\n  border-radius: calc(var(--border-radius) \/ 2);\r\n  z-index: 1;\r\n}\r\n<\/pre>\r\n<p>\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u53ef\u80fd\u306a\u9805\u76ee\u306f3\u884c\u76ee\u304b\u308912\u884c\u76ee\u3067\u3059\u3002<br \/>\r\n\u30b3\u30fc\u30c9\u306f\u3081\u3063\u3061\u3083\u9577\u3044\u3067\u3059\u304c\u3001\u4e0a\u306e\u65b9\u3092\u3061\u3087\u3063\u3068\u30a4\u30b8\u308b\u3060\u3051\u3067\u7c21\u5358\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u304c\u697d\u3057\u3081\u307e\u3059\u3002<\/p>\r\n<p>\u57fa\u672c\u7684\u306b\u306f\u30e2\u30cb\u30bf\u30fc\u306e\u5e45\u306e<span class=\"marker_yellow_futo\">max-width:\u25ef\u25efpx;<\/span>\u3092\u57fa\u6e96\u306b\u3001\u5404\u88c5\u98fe\u90e8\u5206\uff08\u30dc\u30bf\u30f3\u3001\u8db3\u3001\u30b9\u30af\u30ea\u30fc\u30f3\u306a\u3069\uff09\u306e\u30b5\u30a4\u30ba\u6bd4\u7387\u304c\u81ea\u52d5\u7684\u306b\u8abf\u6574\u3055\u308c\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\r\n<p>12\u884c\u76ee\u306e<span class=\"enlighter-x12\"><\/span><span class=\"marker_yellow_futo\"><span class=\"enlighter-x12\">margin<\/span><span class=\"enlighter-text\">: <\/span><span class=\"enlighter-x13\">10px<\/span><span class=\"enlighter-text\"> <\/span><span class=\"enlighter-x13\">0<\/span><span class=\"enlighter-text\">;<\/span><\/span>\u3092<span class=\"enlighter-x12\"><\/span><span class=\"marker_yellow_futo\"><span class=\"enlighter-x12\">margin<\/span><span class=\"enlighter-text\">: <\/span><span class=\"enlighter-x13\">10px<\/span><span class=\"enlighter-text\"> <\/span><span class=\"enlighter-x13\">auto<\/span><span class=\"enlighter-text\">;<\/span><\/span><span class=\"enlighter-text\">\u306b\u5909\u66f4\u3059\u308b\u3068\u3001\u30d1\u30bd\u30b3\u30f3\u304c\u4e2d\u592e\u914d\u7f6e\u306b\u306a\u308a\u307e\u3059\u3002<\/span><\/p>\r\n<h2>\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30d1\u30bd\u30b3\u30f3\u306e\u30c7\u30b6\u30a4\u30f3\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u4f8b<\/h2>\r\n<div class=\"desktop arenji-01\">\r\n<div class=\"desktop-frame\">\r\n<div class=\"screen\"><a href=\"https:\/\/haugenic.com\/wp-content\/uploads\/2024\/08\/048.jpg\"><img decoding=\"async\" src=\"https:\/\/haugenic.com\/wp-content\/uploads\/2024\/08\/048-large.jpg\" alt=\"\" width=\"400\" height=\"225\" class=\"alignnone size-large wp-image-2416\" \/><\/a><\/div>\r\n<\/div>\r\n<\/div>\r\n<p>\u30b3\u30fc\u30c9\u306f\u305d\u306e\u307e\u307e\u306b\u3001\u753b\u50cf\u3060\u3051\u30c1\u30a7\u30f3\u30b8\u3057\u307e\u3057\u305f\u3002<\/p>\r\n<h2>\u30dd\u30c3\u30d7\u306a\u30ab\u30e9\u30fc\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/h2>\r\n<div class=\"desktop arenji-02\">\r\n<div class=\"desktop-frame\">\r\n<div class=\"screen\"><a href=\"https:\/\/haugenic.com\/wp-content\/uploads\/2024\/08\/048.jpg\"><img decoding=\"async\" src=\"https:\/\/haugenic.com\/wp-content\/uploads\/2024\/08\/048-large.jpg\" alt=\"\" width=\"400\" height=\"225\" class=\"alignnone size-large wp-image-2416\" \/><\/a><\/div>\r\n<\/div>\r\n<\/div>\r\n<p>\u30e2\u30cb\u30bf\u30fc\u8272\u306f<span class=\"marker_yellow_futo\">#cc0000<\/span>\u3001\u30dc\u30bf\u30f3\u306e\u8272\u3092<span class=\"marker_yellow_futo\">#eeee00<\/span>\u306b\u8a2d\u5b9a\u3002<\/p>\r\n<h2>\u8584\u578b\u30c6\u30ec\u30d3\u98a8\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/h2>\r\n<div class=\"desktop arenji-03\">\r\n<div class=\"desktop-frame\">\r\n<div class=\"screen\"><a href=\"https:\/\/haugenic.com\/wp-content\/uploads\/2024\/08\/048.jpg\"><img decoding=\"async\" src=\"https:\/\/haugenic.com\/wp-content\/uploads\/2024\/08\/048-large.jpg\" alt=\"\" width=\"400\" height=\"225\" class=\"alignnone size-large wp-image-2416\" \/><\/a><\/div>\r\n<\/div>\r\n<\/div>\r\n<p>\u30d5\u30ec\u30fc\u30e0\u306e\u592a\u3055\u3092<span class=\"marker_yellow_futo\">10px<\/span>\u306b\u3001\u4e38\u3055\u3092<span class=\"marker_yellow_futo\">0px<\/span>\u306b\u3001\u8db3\u306e\u592a\u3055\u3092<span class=\"marker_yellow_futo\">30%<\/span>\u306b\u3001\u8db3\u306e\u9577\u3055\u3092<span class=\"marker_yellow_futo\">100px<\/span>\u306b\u8a2d\u5b9a\u3002<\/p>\r\n<h2>\u3061\u3063\u3061\u3083\u3044\u30e2\u30cb\u30bf\u30fc\u306b\u30ab\u30b9\u30bf\u30de\u30a4\u30ba<\/h2>\r\n<div class=\"desktop arenji-04\">\r\n<div class=\"desktop-frame\">\r\n<div class=\"screen\"><a href=\"https:\/\/haugenic.com\/wp-content\/uploads\/2024\/08\/048.jpg\"><img decoding=\"async\" src=\"https:\/\/haugenic.com\/wp-content\/uploads\/2024\/08\/048-large.jpg\" alt=\"\" width=\"400\" height=\"225\" class=\"alignnone size-large wp-image-2416\" \/><\/a><\/div>\r\n<\/div>\r\n<\/div>\r\n<p>\u30e2\u30cb\u30bf\u30fc\u306e\u5e45\u3092<span class=\"marker_yellow_futo\">200px<\/span>\u306b\u8a2d\u5b9a\u3002\u305d\u308c\u306b\u5408\u308f\u305b\u3066\u3001\u30d5\u30ec\u30fc\u30e0\u306e\u592a\u3055\u306f<span class=\"marker_yellow_futo\">12px<\/span>\u3001\u8db3\u306e\u9577\u3055\u306f<span class=\"marker_yellow_futo\">15px<\/span>\u3078\u3068\u5c0f\u3055\u304f\u3057\u307e\u3057\u305f\u3002<\/p>\r\n<p>\u753b\u9762\u306e\u30b5\u30a4\u30ba\u306b\u5408\u308f\u305b\u3066\u3001\u30dc\u30bf\u30f3\u3082\u52dd\u624b\u306b\u5c0f\u3055\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\r\n<h2>\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u306e\u5909\u66f4<\/h2>\r\n<div class=\"desktop arenji-05\">\r\n<div class=\"desktop-frame\">\r\n<div class=\"screen\"><a href=\"https:\/\/haugenic.com\/wp-content\/uploads\/2024\/08\/048.jpg\"><img decoding=\"async\" src=\"https:\/\/haugenic.com\/wp-content\/uploads\/2024\/08\/048-large.jpg\" alt=\"\" width=\"400\" height=\"225\" class=\"alignnone size-large wp-image-2416\" \/><\/a><\/div>\r\n<\/div>\r\n<\/div>\r\n<p>\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u3092<span class=\"marker_yellow_futo\">1\/1<\/span>\u306b\u8a2d\u5b9a\u3002<\/p>\r\n<p>\u8a2d\u5b9a\u3057\u305f\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u3068\u753b\u50cf\u306e\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u304c\u7570\u306a\u308b\u5834\u5408\u306f\u3001\u753b\u50cf\u304c\u3076\u3063\u305f\u5207\u3089\u308c\u307e\u3059\u3002<\/p>\r\n<h2>\u30b9\u30af\u30ed\u30fc\u30eb\u53ef\u80fd\u306a\u30c6\u30ad\u30b9\u30c8\u30dc\u30c3\u30af\u30b9\u3068\u3057\u3066\u4f7f\u3046<\/h2>\r\n<div class=\"desktop arenji-06\">\r\n<div class=\"desktop-frame\">\r\n<div class=\"screen\">\r\n<div class=\"screen-text\">\u3053\u3093\u306b\u3061\u306f\uff01<br \/>\r\n<br \/>\r\n\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30d1\u30bd\u30b3\u30f3\u306e\u753b\u9762\u306e\u4e2d\u306b\u3001\u30c6\u30ad\u30b9\u30c8\u9818\u57df\u3092\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002\u6587\u7ae0\u304c\u9577\u3044\u3068\u53f3\u5074\u306b\u30b9\u30af\u30ed\u30fc\u30eb\u30d0\u30fc\u304c\u73fe\u308c\u307e\u3059\u3002<br \/>\r\n<br \/>\r\n\u3053\u306e\u9818\u57df\u306e\u4e2d\u3067\u306f\u3001<span class=\"huto\">\u592a\u5b57<\/span>\u306a\u3069\u306e\u666e\u901a\u306e\u6587\u5b57\u30bf\u30b0\u3084\u3001FontAwesome\u306e\u30a2\u30a4\u30b3\u30f3\u30d5\u30a9\u30f3\u30c8\u3082\u4f7f\u3048\u307e\u3059\u3002<br \/>\r\n<i class=\"fa-solid fa-cat fa-2x\"><\/i>\uff1e\uff86\uff6c\uff70\uff01<br \/>\r\n<br \/>\r\n\u305d\u308c\u306f\u305d\u3046\u3068\u3001\u9752\u753b\u9762\u306b\u767d\u3044\u30c6\u30ad\u30b9\u30c8\u306e\u30d1\u30bd\u30b3\u30f3\u306e\u30e2\u30cb\u30bf\u30fc\u3092\u898b\u308b\u3068\u3001\u5fc3\u81d3\u30d2\u30a7\u2026\u3066\u306a\u308b\u3088\u306d\u3002<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div><div class=\"su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u898b\u308b<\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\r\n\r\n<h3 class=\"sa sa--up\">HTML\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"desktop\"&gt;\r\n  &lt;div class=\"desktop-frame\"&gt;\r\n    &lt;div class=\"screen\"&gt;\r\n      &lt;div class=\"screen-text\"&gt;\u3053\u3093\u306b\u3061\u306f\uff01&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\r\n<h3 class=\"sa sa--up\">CSS\u30b3\u30fc\u30c9<\/h3>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\/* \u5168\u4f53\u8a2d\u5b9a *\/\r\n.desktop {\r\n  --max-width: 400px; \/* \u30e2\u30cb\u30bf\u30fc\u306e\u5e45 *\/\r\n  --frame-thickness: 20px; \/* \u30d5\u30ec\u30fc\u30e0\u306e\u592a\u3055 *\/\r\n  --frame-color: #333; \/* \u30e2\u30cb\u30bf\u30fc\u306e\u8272 *\/\r\n  --text-color: #eee; \/* \u6587\u5b57\u306e\u8272 *\/\r\n  --text-padding: 5px; \/* \u6587\u5b57\u306e\u4f59\u767d *\/\r\n  --button-color: rgba(255, 255, 255, 0.5); \/* \u30dc\u30bf\u30f3\u306e\u8272 *\/\r\n  --screen-color: #000; \/* \u30b9\u30af\u30ea\u30fc\u30f3\u306e\u8272 *\/\r\n  --aspect-ratio: 16 \/ 9; \/* \u30a2\u30b9\u30da\u30af\u30c8\u6bd4 *\/\r\n  --border-radius: 20px; \/* \u30e2\u30cb\u30bf\u30fc\u306e\u4e38\u3055 *\/\r\n  --foot-width: 15%; \/* \u8db3\u306e\u592a\u3055\u3092\u30e2\u30cb\u30bf\u30fc\u5e45\u306e15%\u306b\u8a2d\u5b9a *\/\r\n  --foot-height: 30px; \/* \u8db3\u306e\u9577\u3055 *\/\r\n  margin: 10px 0; \/* \u4e0a\u4e0b\u306e\u4f59\u767d *\/\r\n  padding: 0 0 calc(var(--foot-height) + var(--frame-thickness));\r\n  position: relative;\r\n  width: 100%;\r\n  max-width: var(--max-width);\r\n}\r\n\r\n\/* \u30d5\u30ec\u30fc\u30e0\u306e\u90e8\u5206 *\/\r\n.desktop-frame {\r\n  position: relative;\r\n  width: 100%;\r\n  background-color: var(--frame-color);\r\n  border-radius: var(--border-radius);\r\n  box-sizing: border-box;\r\n  padding: var(--frame-thickness);\r\n}\r\n\r\n\/* \u753b\u9762\u306e\u90e8\u5206 *\/\r\n.desktop-frame .screen {\r\n  background-color: var(--screen-color);\r\n  border-radius: calc(var(--border-radius) - var(--frame-thickness));\r\n  overflow: scroll;\r\n  aspect-ratio: var(--aspect-ratio);\r\n}\r\n\r\n\/* \u30b9\u30af\u30ea\u30fc\u30f3\u306e\u30c6\u30ad\u30b9\u30c8 *\/\r\n.desktop-frame .screen .screen-text{\r\ncolor: var(--text-color);\r\npadding:var(--text-padding);\r\n}\r\n\r\n\/* \u30dc\u30bf\u30f3 *\/\r\n.desktop::before {\r\n  content: '';\r\n  position: absolute;\r\n  bottom: calc(var(--foot-height) + var(--frame-thickness));\r\n  right: calc(var(--border-radius) * 2 \/ 3);\r\n  width: calc(var(--frame-thickness) * 6.5);\r\n  height: var(--frame-thickness);\r\n  z-index: 1;\r\n  --dot-size: calc(var(--frame-thickness) * 0.7);\r\n  background-image: radial-gradient(\r\n    circle,\r\n    var(--button-color) calc(var(--dot-size) \/ 2 - 1px),\r\n    transparent calc(var(--dot-size) \/ 2)\r\n  );\r\n  background-size: calc(var(--frame-thickness) * 1.2) var(--frame-thickness);\r\n  background-position: left center;\r\n  background-repeat: repeat-x;\r\n  -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--frame-thickness) * 0.75), transparent calc(100% - var(--frame-thickness) * 0.75));\r\n  mask-image: linear-gradient(to right, black calc(100% - var(--frame-thickness) * 0.75), transparent calc(100% - var(--frame-thickness) * 0.75));\r\n}\r\n\r\n\/* \u8db3\u306e\u7e26\u90e8\u5206 *\/\r\n.desktop-frame::before {\r\n  content: '';\r\n  position: absolute;\r\n  width: var(--foot-width);\r\n  height: calc(var(--foot-height) + var(--frame-thickness));\r\n  bottom: calc(-1 * var(--foot-height) + var(--frame-thickness) * -0.5);\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  background-color: var(--frame-color);\r\n  z-index: 0;\r\n}\r\n\r\n\/* \u8db3\u306e\u6a2a\u90e8\u5206 *\/\r\n.desktop::after {\r\n  content: '';\r\n  position: absolute;\r\n  width: 50%;\r\n  height: var(--frame-thickness);\r\n  bottom: 0;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  background-color: var(--frame-color);\r\n  border-radius: calc(var(--border-radius) \/ 2);\r\n  z-index: 1;\r\n}<\/pre>\r\n<p>35\u884c\u76ee\u306e<span class=\"enlighter-text\"><\/span><span class=\"enlighter-x12\"><\/span><span class=\"marker_yellow_futo\"><span class=\"enlighter-x12\">overflow<\/span><span class=\"enlighter-text\">: scroll;<\/span><\/span>\u3092<span class=\"marker_yellow_futo\">overflow: hidden;<\/span>\u306b\u5909\u66f4\u3059\u308b\u3068\u3001\u30b9\u30af\u30ed\u30fc\u30eb\u4e0d\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\r\n\r\n<\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"CSS\u3067\u4f5c\u308b\u3001\u30e6\u30cb\u30fc\u30af\u306a\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30d1\u30bd\u30b3\u30f3\u98a8\u306e\u67a0\u306e\u30c7\u30b6\u30a4\u30f3\u3002","protected":false},"author":1,"featured_media":2418,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-2417","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"acf":[],"_links":{"self":[{"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/posts\/2417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2417"}],"version-history":[{"count":35,"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/posts\/2417\/revisions"}],"predecessor-version":[{"id":2453,"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/posts\/2417\/revisions\/2453"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=\/wp\/v2\/media\/2418"}],"wp:attachment":[{"href":"https:\/\/haugenic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/haugenic.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}