メモ3(自分用)
jpg統合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady();" defer></script>
<title>Image Merging with OpenCV.js</title>
</head>
<body>
<div id="status">OpenCV.js is loading...</div>
<canvas id="canvasOutput" style="border: 1px solid;"></canvas>
<script type="text/javascript">
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
function loadAndMergeImages() {
let img1 = new Image();
let img2 = new Image();
img1.src = 'path/to/your/first/image.jpg';
img2.src = 'path/to/your/second/image.jpg';
img1.onload = function() {
img2.onload = function() {
let mat1 = cv.imread(img1);
let mat2 = cv.imread(img2);
let dst = new cv.Mat();
let src = [mat1, mat2];
cv.vconcat(src, dst);
cv.imshow('canvasOutput', dst);
mat1.delete();
mat2.delete();
dst.delete();
}
}
}
document.addEventListener('DOMContentLoaded', function() {
loadAndMergeImages();
});
</script>
</body>
</html>
ローカルストレージ
最初に共通の背景を設定しておく(省略)
<!-- 各セクション用の色選択のUI -->
<label>
ヘッダーの背景色:
<input type="color" id="headerColorPicker">
</label>
<label>
サイドバーの背景色:
<input type="color" id="sidebarColorPicker">
</label>
<label>
メインの背景色:
<input type="color" id="mainColorPicker">
</label>
<script>
// セクション要素の参照を取得
var header = document.getElementById('header');
var sidebar = document.getElementById('sidebar');
var main = document.getElementById('main');
// ヘッダーの背景色を変更
document.getElementById('headerColorPicker').addEventListener('change', function(event) {
var selectedColor = event.target.value;
header.style.backgroundColor = selectedColor;
localStorage.setItem('userSelectedHeaderBgColor', selectedColor);
});
// サイドバーの背景色を変更
document.getElementById('sidebarColorPicker').addEventListener('change', function(event) {
var selectedColor = event.target.value;
sidebar.style.backgroundColor = selectedColor;
localStorage.setItem('userSelectedSidebarBgColor', selectedColor);
});
// メインの背景色を変更
document.getElementById('mainColorPicker').addEventListener('change', function(event) {
var selectedColor = event.target.value;
main.style.backgroundColor = selectedColor;
localStorage.setItem('userSelectedMainBgColor', selectedColor);
});
// ページ読み込み時に、以前選択された背景色を適用する
window.onload = function() {
var savedHeaderColor = localStorage.getItem('userSelectedHeaderBgColor');
var savedSidebarColor = localStorage.getItem('userSelectedSidebarBgColor');
var savedMainColor = localStorage.getItem('userSelectedMainBgColor');
if (savedHeaderColor) {
header.style.backgroundColor = savedHeaderColor;
}
if (savedSidebarColor) {
sidebar.style.backgroundColor = savedSidebarColor;
}
if (savedMainColor) {
main.style.backgroundColor = savedMainColor;
}
}
</script>
gridレスポンシブ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Grid Layout</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"sidebar main main";
grid-template-columns: 1fr 2fr 2fr;
grid-template-rows: auto 1fr 1fr;
gap: 10px;
padding: 10px;
}
.header {
grid-area: header;
background-color: #4CAF50 ;
padding: 10px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #FFC107 ;
padding: 10px;
}
.main {
grid-area: main;
background-color: #81D4FA ;
padding: 10px;
}
/* For tablets */
@media (max-width: 800px) {
.container {
grid-template-areas:
"header header"
"main main"
"sidebar sidebar";
grid-template-columns: 1fr 1fr;
}
}
/* For mobile phones */
@media (max-width: 500px) {
.container {
grid-template-areas:
"header"
"main"
"sidebar";
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">ヘッダー</div>
<div class="sidebar">左サイドメニュー</div>
<div class="main">メインコンテンツ</div>
</div>
</body>
</html>
3倍
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
<style>
body {
width: 33.33%;
margin: 0 auto;
overflow-x: hidden;
}
</style>
</head>
<body>
<img src="path_to_image.jpg" alt="Sample Image" style="width: 100%;">
<script>
document.addEventListener('DOMContentLoaded', function() {
var images = document.querySelectorAll('img');
images.forEach(function(img) {
img.addEventListener('click', function() {
if (this.style.width === '100%' || this.style.width === '') {
this.style.width = '300%';
} else {
this.style.width = '100%';
}
});
});
});
</script>
</body>
</html>
popup2
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Example</title>
<script>
function openPopup() {
window.open('popup2_1.html', 'PopupWindow', 'width=600,height=400,scrollbars=yes,resizable=yes');
}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="openPopup()">Open Popup</a>
</body>
</html>
popup2_1
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Content</title>
</head>
<body>
<h1>Welcome to the popup!</h1>
<a href="https://www.example.com">Go to example.com</a>
</body>
</html>
この記事が気に入ったらサポートをしてみませんか？