常連

### 実現したいこと
イメージとしては以下のサイトにある
https://wp-emanon.jp/emanon-premium/demo02/
お客様の声スライダーのようなものになります。
これをプロフィールスライダーとして使います。
各人物のアイコンや簡単なプロフィールの部分からそれぞれの詳細ページへリンクします。
これをhtml、css、jsで作りたいです。
人物は9人分です。
インジケーターは〇でスライドの下に9つ作ります。
インジケーターによる左右どちらにも行ける手動操作と、オートプレイによる左から右へ流れるスライドを両立させます。
スライドは画面の中途半端な位置に止まらないようにしたいです。


### 発生している問題・分からないこと
スライダーは3人分ずつスライドするようになっていますが、それだと動作が早すぎるので1人分ずつスライドするように修正したいです。
但し、画面の見た目は、一度に3人分表示で変更しません。
つまり、1/3づつスライドさせる構造にします。



### 該当のソースコード

```html
   <div class="testimonial-slider">
        <div class="testimonial-track">
            <div class="testimonial">
                <img src="path-to-image1.jpg" alt="Customer 1" class="testimonial-img">
                <p class="testimonial-comment">"Customer 1's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image2.jpg" alt="Customer 2" class="testimonial-img">
                <p class="testimonial-comment">"Customer 2's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image3.jpg" alt="Customer 3" class="testimonial-img">
                <p class="testimonial-comment">"Customer 3's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image4.jpg" alt="Customer 4" class="testimonial-img">
                <p class="testimonial-comment">"Customer 4's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image5.jpg" alt="Customer 5" class="testimonial-img">
                <p class="testimonial-comment">"Customer 5's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image6.jpg" alt="Customer 6" class="testimonial-img">
                <p class="testimonial-comment">"Customer 6's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image7.jpg" alt="Customer 7" class="testimonial-img">
                <p class="testimonial-comment">"Customer 7's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image8.jpg" alt="Customer 8" class="testimonial-img">
                <p class="testimonial-comment">"Customer 8's comment..."</p>
            </div>
            <div class="testimonial">
                <img src="path-to-image9.jpg" alt="Customer 9" class="testimonial-img">
                <p class="testimonial-comment">"Customer 9's comment..."</p>
            </div>
        </div>
        <div class="testimonial-indicators">
            
            <span class="indicator" onclick="goToSlide(0)"></span>
            <span class="indicator" onclick="goToSlide(1)"></span>
            <span class="indicator" onclick="goToSlide(2)"></span>
            <span class="indicator" onclick="goToSlide(3)"></span>
            <span class="indicator" onclick="goToSlide(4)"></span>
            <span class="indicator" onclick="goToSlide(5)"></span>
            <span class="indicator" onclick="goToSlide(6)"></span>
            <span class="indicator" onclick="goToSlide(7)"></span>
            <span class="indicator" onclick="goToSlide(8)"></span>
        </div>
    </div>
```

```css
        .testimonial-slider {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        .testimonial-track {
            display: flex;
            transition: transform 0.5s ease;
        }

        .testimonial {
            flex: 0 0 33.3%;
            text-align: center;
        }

        .testimonial-img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-bottom: 10px;
        }

        .testimonial-comment {
            font-size: 1rem;
            color: #333;
            max-width: 200px;
            margin: 0 auto;
        }

        .testimonial-indicators {
            display: flex;
            justify-content: center;
            margin-top: 15px;
        }

        .indicator {
            width: 12px;
            height: 12px;
            margin: 0 5px;
            background-color: #ccc;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .indicator.active {
            background-color: #333;
        }
```

```js
let currentIndex = 0;
const maxIndex = 2;  // インジケータ数に合わせた最大インデックス

// オートプレイ機能でスライドを移動
function showNextTestimonial() {
    const track = document.querySelector('.testimonial-track');
    
    // 現在のインデックスがmaxIndexを超えたら0に戻す
    currentIndex = (currentIndex + 1) % (maxIndex + 1);
    track.style.transform = `translateX(-${100 * currentIndex}%)`;

    // インジケータを更新
    updateIndicators();
}

// インジケータのクリックで指定のスライドに移動
function goToSlide(index) {
    const track = document.querySelector('.testimonial-track');

    // インデックスが範囲内か確認
    if (index >= 0 && index <= maxIndex) {
        currentIndex = index;
        track.style.transform = `translateX(-${100 * currentIndex}%)`;
        updateIndicators();
    }
}

// インジケータの更新処理
function updateIndicators() {
    const indicators = document.querySelectorAll('.indicator');
    indicators.forEach((indicator, index) => {
        indicator.classList.toggle('active', index === currentIndex);
    });
}

// 初期設定：最初のインジケータをアクティブに設定
updateIndicators();

// オートプレイ機能：5秒ごとに次のスライドを表示
setInterval(showNextTestimonial, 5000);

```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
今の段階では3人分づつスライド。インジケーターは9人分表示。インジケータは3までしか動作していません。これを9まで動作するように直したいです。オートプレイと連動させます。

### 補足
特になし

プロフィールをスライダー化したい

### 実現したいこと
フッターの下の余白を無くしたいです。

### 発生している問題・分からないこと
フッターの下の余白を無くしたいです。




### 該当のソースコード

```HTML
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="株式会社TKG会社店舗紹介">
        <link rel="stylesheet" href="../style.css">
        <title>店舗紹介</title>
    </head>
    <body>
        <div id="contents">
        <header>
            <h1>店舗紹介</h1>
            <nav id="global_navi">
                <ul>
                    <li><a href="../index.html" target="_blank">トップページ</a></li>
                    <li><a href="../company/index.html" target="_blank">会社概要</a></li>
                    <li><a href="index.html">店舗紹介</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <div>
                <h2>豊橋本店</h2>
                <table border="1">
                    <tr>
                        <th>住所</th>
                        <td>〒440-1105 愛知県豊橋市鶉羽町1-10-5</td>
                    </tr>
                    <tr>
                        <th>電話番号</th>
                        <td>0532-01-4105</td>
                    </tr>
                </table>
            </div>
            <div>
                <h2>名古屋店</h2>
                <table border="1">
                    <tr>
                        <th>住所</th>
                        <td>〒450-1105 愛知県名古屋市鶏山区風見鶏町1-10-5</td>
                    </tr>
                    <tr>
                        <th>電話番号</th>
                        <td>052-000-1105</td>
                    </tr>
                </table>
            </div>
        </main>
        <footer>
            <dl>
                <dt>本社所在地</dt>
                <dd>〒440-1105 愛知県豊橋市鶉羽町1-10-5</dd>
                <dt>電話番号</dt>
                <dd>0532-01-4105</dd>
            </dl>
        </footer>
        </div>
    </body>
</html>
```

```CSS
@charset "UTF-8";
/* body */
body,html {
    height: 100%;
    margin: 0;
    padding: 0;
}
#contents {
margin: 0 auto;
    width: 100%;
    position: relative;
    min-height: 100%;
  }

/* header */
header {
    background-color: blue;
    margin: 0;
}
h1 {
    color: white;
    margin: 0;
}
/* グローバルナビゲーション */
#global_navi ul {
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 0;

}
#global_navi ul li {
    margin: 0 10px;
}
#global_navi ul a {
    display: block;
    padding: 6px 20px;
    border-radius: 9999px;
    border: 3px outset white;
    text-decoration: none;
    background-color: aqua;
}

/* main */
/* 画像の大きさ指定 */
img {
    width: 600px;
    height: auto;
}
/* div間の余白を指定 */
div {
    margin: 50px 0;
    width: 850px;
}

/* footer */
footer {
    color: white;
    background-color: blue;
    margin: 0;
}
dl {
    margin: 0;
}
dt {
    float: left;
    clear: left;
    margin-right: 20px;
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
ヘッダーの上の余白は、
#contents {margin: 0 auto;}
で無くなりました。
また、以下の二種類の方法を試しましたができませんでした。
[リンク内容](https://qiita.com/kents1002/items/0fbd3bb2b30b57f382a2)
[リンク内容](https://zenn.dev/catnose99/articles/a873bbbe25b15b)

### 補足
特になし

フッターの下の余白を無くしたいです。

メディアクエリを使わずに作りました。
```html
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
        <meta charset="UTF-8">
        <style>
            .main {
            background-color: white;
            display: grid;
            gap: 16px;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            padding: 16px;
            margin: 16px;
            }
            .main-item {
            background-color: red;
            height: 100px;
            }
        </style>
    </head>
    <title>
    </title>
    <body style="background-color: turquoise;">
        <main class="main">
            <div class="main-item">item 1</div>
            <div class="main-item">item 2</div>
            <div class="main-item">item 3</div>
            <div class="main-item">item 4</div>
            <div class="main-item">item 5</div>
            <div class="main-item">item 6</div>
            <div class="main-item">item 7</div>
            <div class="main-item">item 8</div>
            <div class="main-item">item 9</div>
            <div class="main-item">item 10</div>
          </main>
    </body>
</html>
```

幅の最小値300pxとしているので幅300以下のモニターで見るとコンテンツがはみ出すのが問題です。
なので以下のサイトのように横幅を一定の部分まで狭めるとスマホ版の全体が縮小されていくようにしてみたいですがどのような方法があるでしょうか。
https://www.panda-ah.com/
こちら要素一つ一つにブレイクポイントを設けているわけでは無さそうですが、特殊なviewport設定などが存在するのでしょうか。

メディアクエリを使わずにコンテンツ幅を最適化する方法

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-07-25/0767fc88-6c26-4d90-87d0-615b1147b659.jpeg)

### 実現したいこと

ウェブデザインのコーディングをしているのですが

添付画像のようなパソコン版でのデザインで、
ウインドウに対してヨコ幅1000pxでコンテンツをインナーとして
センター配置しています。

その上で“ウインドウの幅がどのサイズになっても”
●ピンクの背景画像が、コンテンツの右端を起点となるように
●ウインドウ左端まで画像が伸び縮みするように
●ウインドウ幅が1000pxを切った場合は、できればウインドウ右側に5%ほどの余白が欲しい

このようにするには
どうコーディングするのがよいでしょうか。

※背景画像はheight200pxで固定、
backgroundで指定、background-size:coverで指定します。
object-fitで指定してもよいかと思っています。

※ソースコードにつきましては
html記述は簡素なものになるかと思うため、
css記述はご教示いただきたいため、
自分のほうからは割愛させていただきます。

よろしくお願いいたします。

### 試したこと
●親要素div（コンテンツ幅1000px）
max-width1000px、センター指定、position:relative;
●子要素div（背景画像）
position:absolute;
right: 0;
height:200px;
width:100%;
background背景指定、
background-size:cover;

というようなcss記述をやってみましたが
親要素が上限1000pxであるため、子要素の背景画像がそれ以上広がったりしませんでした。

●検索でそれらしいものを調べましたが、
今回の質問に該当するものがありませんでした。



センター配置のコンテンツを起点に画像の配置について

![イメージ説明](f2a2a88d4b57cdbeeee86acc4673ec75.jpeg)


###前提・実現したいこと
html,css初心者です。
htmlで画像の下に文字を配置して、文字を画像に対して中央揃えにしたいです。



###該当のソースコード
<div id="box1">
<img src="img/gazou.png" alt="" width="200" height="219">
<p>文字文字文字</p>
</div>

###試したこと
＃box1 {text-align: center;} で中央寄せをしてみたのですが、一応中央揃えはできるのですが、ｐｃ画面全体に対して中央になってしまいます。

画像に対しての文字のみ中央揃えにして、ｐｃ全体に対しては左揃えで配置したいです。

###補足情報
わかりにくい説明で申し訳ありませんが、ぜひ教えていただけると助かります。
よろしくお願い致します。

【html,css】画像の下に文字を配置して、中央揃えにしたい

### 実現したいこと
テキストのletter-spacingが1文字ごとに違う場合どうコーディングしたら良いか

### 発生している問題・分からないこと
デザインにあるテキストのletter-spacingが1文字ごとに違う場合どうしたら効率よくコーディングできるのか

例えば「あいうえおかきくけこ」というテキストがあった場合
「あ」は0.3em
「い」は0.07em
「う」は-0.06em...
といったように1文字ずつ違うletter-spacingが設定されていて複雑になっているデザインをコーディングしなければいけない時に簡単な方法はないでしょうか。

1文字ずつspanで囲んでCSSをあてる方法でやっているのですがものすごい時間がかかってしまいかなりしんどいので何かいい方法はないでしょうか。



### 該当のソースコード

```
特になし
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
⓵1文字ずつspanで囲みletter-spacingを設定する
→spanがletter-spacingを無視して横幅を決めてしまうのでletter-spacingで幅を変えた意味がなかった

②1文字ずつspanで囲みletter-spacingを設定し、更にflexで並べる
→l一応うまくいったが改行の時などに不便が生じる。

③丸ごと画像として書き出す
→改行の時に不便が生じる

### 補足
特になし

【CSS】デザインでテキスト1文字ごとにletter-spacingが違う時

### 実現したいこと
transformscaleで文字を長体にしたり平体にしても、
平仮名とローマ字の間隔は変えたくございません。

### 発生している問題・分からないこと
下図のように、長体や平体にすると、thisStationJa11と"thisStationEn11の間のblank2の間隔が必ず
それに応じて幅が広くなったり狭まったりします。
下の図のようになります。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-08-16/9c8e155d-32f8-47c8-9960-18f8845d03f8.png)
以下がそのhtmlになります。
```
<div id="stationBoard" class="stationBoard">
    <div id="stationNameDisplay" style="width: 100%;"></div>
    <div style="width: 100%;"><span id="stationNameHiraganaDisplay"></span> <span id="stationNameRomanDisplay"></span></div>
    <div id="lineColorDisplay" style="height: 20px; width: 100%;">
        <div class="center-fix"><div class="thisStationZh">谷谷</div></div>
        <div class="center-fix2">
            <font class="thisStationJa">TTT</font><font class="blank1">&emsp;</font>
            <font class="thisStationEn">TTTTTT</font>
        </div>
    </div>
</div>
<br />
<div id="stationBoard" class="stationBoard2">
    <div id="stationNameDisplay" style="width: 100%;"></div>
    <div style="width: 100%;"><span id="stationNameHiraganaDisplay"></span> <span id="stationNameRomanDisplay"></span></div>
    <div id="lineColorDisplay" style="height: 20px; width: 100%;">
        <div class="center-fix11"><div class="thisStationZh11">谷谷</div></div>
        <div class="center-fix12">
            <font class="thisStationJa11">TTT</font><font class="blank2">&emsp;</font>
            <font class="thisStationEn11">TTTTT</font>
        </div>
    </div>
</div>
<style>
.stationBoard2{
position:relative;top:100pt;
font-family:"Frutiger LT Pro","源暎モノゴ", sans-serif;
}
.center-fix{
display: flex;
align-items: center;
justify-content: center;
font-weight:bold;
transform: scale(1.2,1);
}
.center-fix2{
display:flex;
justify-content: center;
font-weight:bold;
transform: scale(1.2, 1);
}
.center-fix3{
display:flex;
justify-content: center;
}
.thisStationZh{
font-size:60pt;
letter-spacing: 1em;
margin-left:1em;
}
.thisStationJa{
font-size:20pt;
letter-spacing: 0.3em;
margin-left:-0.02em;
}
.blank1{
}
.thisStationEn{
font-size:22pt;
}
</style>
<style>
.stationBoard2{
font-family:"Frutiger LT Pro","源暎モノゴ", sans-serif;
}
.center-fix11{
display: flex;
align-items: center;
justify-content: center;
font-weight:bold;
transform: scale(1.2,1);
}
.center-fix12{
display:flex;
justify-content: center;
font-weight:bold
}
.thisStationZh11{
font-size:60pt;
letter-spacing: 1em;
margin-left:1em;
}
.thisStationJa11{
font-size:20pt;
}
.blank2{
}
.thisStationEn11{
font-size:22pt;
}
</style>
<br />
```



### 該当のソースコード

```
特になし
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
チャットgptに問いかけても幅が変わりました。
もうお手上げです。

### 補足
特になし

transformscaleで文字を長体や平体にしても文字間隔を変えたくないです。

画像のHOMEを囲む赤線がaタグ範囲で、色々cssをいじってliの範囲にまで拡大をしようとしているのですが全く上手くいきません・・・答え教えてください・・・下記にソースコードを載せましたので色々教えてくれたらすごく助かります！
[画像](http://www.fastpic.jp/viewer.php?file=2084653616.png)
```css3
コード
 
header {
	background: #28aae1;
	color: #fff;
	list-style: none;
	width: 100%;
    z-index: 1000;
}

header ul {
}

header li {
	display:inline-block;
	padding:10px 15px;
}

header li a{
	width:100%;
	height:100%;
}

```
```html5
コード
 <body>
  <header>
   <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">HOME</a></li>
   </ul>
  </header>
</body>
```

CSS3