普通の枠線ボックス内のテーブルです

タイトル

主文

本文


リンク→時事逓信屋


🐶test1🐶
test2 test3
　 　　　　 　 　　　　 　 　　　　 　 　　　　 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>枠線ボックスのサンプル</title>
<style>
    .box {　/* ボックス */
      position: relative;        /* タイトルを絶対配置するための基準 */
      border: 2px solid #6666ff;　/* 枠のサイズ/色 */　/* グラデーション　↓ */
      background: radial-gradient(circle at 30% 30%, #e0f7fa, #b2ebf2, #80deea);
      border-radius: 6px;　/* 角丸サイズ */
      padding: 20px;　 /* 内側の余白 */
      margin-top: 40px;          /* タイトル分の余白 */
      width: auto;              /* サンプル用に自動幅 */
    }

    .box-title {　/* タイトルボックス */
      position: absolute;
      top: -26px;                /* 枠線の上に重ねる フォントサイズで調整*/
      left: 50%;                 /* 横方向の中央 */
      transform: translateX(-50%);　/*幅の50%分だけ左に移動*/
      color: rgb(255, 255, 255); 
      background: rgb(72, 44, 228);
      border-radius: 12px;
      padding: 0 10px;
      border: 2px solid #6666ff;    /* タイトル用の小枠 */
      font-size: 32px;　/* フォントサイズ */
      font-weight: bold;　/* 太文字 */
    }
  </style>
</head>
<body>
<div class="box">
    <span class="box-title">タイトル</span>
    <p><b><font size= "5">主文</font></b><br>
<br>
本文<br>
<br>
<br>
リンク→<a href="https://flower-processing.net/wp/"><font color="#800080">時事逓信屋</font></a></p>
<table width="100%">
  <TBODY>
    <TR>  <!--中央/横１列連結/文字サイズ/色/太文字-->
      <TD align="center" colspan="4"><B><FONT size="+3" color="#0000ff">test1</FONT></B></TD>
    </TR>
    <TR>
      <TD colspan="2" align="center" style="background-color : yellow;"><B>test2</B></TD>
      <TD colspan="2" align="center" style="background-color : yellow;"><B>test3</B></TD>
    </TR>
      <TR>　<!--背景色/画像アドレス-->
       <TD style="background-color : lime;">　
       <img src="./imgs/test1.png"></TD>
       <TD style="background-color : fuchsia;">
       <img src="./imgs/test2.png"></TD>
       <TD style="background-color : blue;">
       <img src="./imgs/test3.png"></TD>
       <TD style="background-color : red;">
       <img src="./imgs/test4.png"></TD>
     </TR>
   </TBODY>
 </TABLE>
</div>
</body>
</html>

サンプル２

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>統合型スライダーテスト</title>

<style>
:root{
  --image-width:200px;
  --image-margin:10px;
  --visible-count:3;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  padding:40px;
  font-family:Arial,sans-serif;
  background:#f5f5f5;
}

h1{
  text-align:center;
  margin-bottom:30px;
}

.slider-container{
  position:relative;
  overflow:hidden;
  width:calc(
    var(--image-width) * var(--visible-count) +
    var(--image-margin) * (var(--visible-count) - 1)
  );
  margin:auto;
  border:2px solid #200bdd;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  background:#1fbae9;
  touch-action:pan-x;
  cursor:grab;
}

.slider-track{
  display:flex;
  transition:transform .3s ease-out;
  will-change:transform;
}

.slider-track a{
  display:block;
  width:var(--image-width);
  margin-right:var(--image-margin);
  flex-shrink:0;
}

.slider-track img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}

.hover-zone{
  position:absolute;
  top:0;
  width:50px;
  height:100%;
  z-index:10;
  background:rgba(0,0,0,.01);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(56,30,170,0);
  font-size:24px;
  transition:color .3s ease;
}

.hover-zone:hover{
  color:rgba(0,0,0,.8);
  background:rgba(255,255,255,.6);
  top:50px;
  width:50px;
  height:100px;
  border-radius:6px;
}

.hover-left{
  left:0;
}

.hover-right{
  right:0;
}

.hover-left::before{
  content:"＜";
}

.hover-right::before{
  content:"＞";
}

.info{
  text-align:center;
  margin-top:25px;
  font-size:16px;
}
</style>
</head>

<body>

<h1>HTML統合型スライダーテスト</h1>

<div id="sliderContainer" class="slider-container">

  <div id="sliderTrack" class="slider-track">

    <a href="#">
      <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='140'%3E%3Crect width='200' height='140' fill='%23e74c3c'/%3E%3Ctext x='100' y='80' text-anchor='middle' font-size='32' fill='white'%3EIMAGE 1%3C/text%3E%3C/svg%3E">
    </a>

    <a href="#">
      <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='140'%3E%3Crect width='200' height='140' fill='%233498db'/%3E%3Ctext x='100' y='80' text-anchor='middle' font-size='32' fill='white'%3EIMAGE 2%3C/text%3E%3C/svg%3E">
    </a>

    <a href="#">
      <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='140'%3E%3Crect width='200' height='140' fill='%232ecc71'/%3E%3Ctext x='100' y='80' text-anchor='middle' font-size='32' fill='white'%3EIMAGE 3%3C/text%3E%3C/svg%3E">
    </a>

    <a href="#">
      <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='140'%3E%3Crect width='200' height='140' fill='%239b59b6'/%3E%3Ctext x='100' y='80' text-anchor='middle' font-size='32' fill='white'%3EIMAGE 4%3C/text%3E%3C/svg%3E">
    </a>

    <a href="#">
      <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='140'%3E%3Crect width='200' height='140' fill='%23f39c12'/%3E%3Ctext x='100' y='80' text-anchor='middle' font-size='32' fill='white'%3EIMAGE 5%3C/text%3E%3C/svg%3E">
    </a>

    <a href="#">
      <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='140'%3E%3Crect width='200' height='140' fill='%231abc9c'/%3E%3Ctext x='100' y='80' text-anchor='middle' font-size='32' fill='white'%3EIMAGE 6%3C/text%3E%3C/svg%3E">
    </a>

  </div>

</div>

<div class="info">
  起動時：3枚表示　／　画像幅：200px　／　間隔：10px
</div>

<script>

const container=document.getElementById('sliderContainer');
const track=document.getElementById('sliderTrack');

const imageWidth=parseInt(
  getComputedStyle(document.documentElement)
    .getPropertyValue('--image-width')
);

const imageMargin=parseInt(
  getComputedStyle(document.documentElement)
    .getPropertyValue('--image-margin')
);

const step=imageWidth+imageMargin;

const visibleCount=parseInt(
  getComputedStyle(document.documentElement)
    .getPropertyValue('--visible-count')
);

const images=Array.from(track.children);
const imageCount=images.length;

images.forEach(img=>{
  track.appendChild(img.cloneNode(true));
});

const totalCount=track.querySelectorAll('a').length;

track.style.width=`${totalCount*step}px`;

let currentTranslate=0;

track.style.transform=`translateX(${currentTranslate}px)`;

function moveSlider(deltaX){

  currentTranslate+=deltaX;

  track.style.transition='transform 0.2s linear';

  track.style.transform=
    `translateX(${currentTranslate}px)`;

  if(currentTranslate<=-(imageCount*step)){

    track.style.transition='none';

    currentTranslate=0;

    track.style.transform=
      `translateX(${currentTranslate}px)`;

    requestAnimationFrame(()=>{
      track.style.transition='transform 0.2s linear';
    });
  }

  if(currentTranslate>0){

    track.style.transition='none';

    currentTranslate=-(imageCount*step);

    track.style.transform=
      `translateX(${currentTranslate}px)`;

    requestAnimationFrame(()=>{
      track.style.transition='transform 0.2s linear';
    });
  }

  if(
    currentTranslate<
    -(imageCount*step*2-visibleCount*step)
  ){

    track.style.transition='none';

    currentTranslate+=imageCount*step;

    track.style.transform=
      `translateX(${currentTranslate}px)`;

    requestAnimationFrame(()=>{
      track.style.transition='transform 0.2s linear';
    });
  }
}

let isHovering=false;
let lastX=null;

container.addEventListener('mouseenter',()=>{
  isHovering=true;
});

container.addEventListener('mousemove',e=>{

  if(!isHovering)return;

  if(lastX===null){
    lastX=e.clientX;
    return;
  }

  const deltaX=e.clientX-lastX;

  lastX=e.clientX;

  moveSlider(deltaX);
});

container.addEventListener('mouseleave',()=>{
  isHovering=false;
  lastX=null;
});

let startX=0;

container.addEventListener('touchstart',e=>{
  startX=e.touches[0].clientX;
});

container.addEventListener('touchmove',e=>{

  const deltaX=
    e.touches[0].clientX-startX;

  startX=e.touches[0].clientX;

  moveSlider(deltaX);
});

const leftZone=document.createElement('div');
const rightZone=document.createElement('div');

leftZone.className='hover-zone hover-left';
rightZone.className='hover-zone hover-right';

container.appendChild(leftZone);
container.appendChild(rightZone);

let hoverInterval=null;

leftZone.addEventListener('mouseenter',()=>{
  hoverInterval=setInterval(()=>{
    moveSlider(5);
  },30);
});

leftZone.addEventListener('mouseleave',()=>{
  clearInterval(hoverInterval);
});

rightZone.addEventListener('mouseenter',()=>{
  hoverInterval=setInterval(()=>{
    moveSlider(-5);
  },30);
});

rightZone.addEventListener('mouseleave',()=>{
  clearInterval(hoverInterval);
});

</script>

</body>
</html>
統合型スライダーテスト

HTML統合型スライダーテスト

起動時：3枚表示　／　画像幅：200px　／　間隔：10px