常連

注目の的

拍手喝采

質問の閲覧をありがとうございます。
CSSの書き方で、下記個所にて問題が起き、解決できないので質問させていただきました。
お手数ですが、ご確認をよろしくお願いいたします。

### 前提・実現したいこと

background-color: pinkがついている個所を.modal__btn__detailの背景画像よりも後ろにしたいです。
（ピンク背景をhoverすると横に動くアニメーションを実装しています。）

### 発生している問題

ピンクの個所が.modal__btn__detailの背景画像より後ろに配置されない。
aタグ内「詳細はこちら」の文字より後ろに配置はできている状況。
参考：問題個所の添付画像
![イメージ説明](3fea96fbb255157faac366a13cc2687b.png)
参考：完成させたいイメージ
![イメージ説明](e0707d65ac04a80f347ef3cdfc03bcfb.png)

### 該当のソースコード

```html
<div class="modal__btn">
    <div class="modal__btn__detail">
        <a href="#" target="_blank">詳細はこちら</a>
    </div>
     <div class="modal__btn__notice">
        <a href="#" target="_blank">オトクなお知らせ</a>
    </div>
</div>
```
```css
.modal__btn{
    position: relative;
    display: flex;
    justify-content: center;
    list-style: none;
    font-size: 13px;
}
.modal__btn .modal__btn__detail{
    position: relative;
    background-image: url(../common/img/pc/service_modal/big_btn.png);
    background-position: center;
    background-repeat: no-repeat;
    padding: 12px 20px;
    margin-right: 40px;
    z-index: 5;
}
.modal__btn a{
    color: #3c3c3c;
    text-decoration: none;
}
.modal__btn .modal__btn__detail::after{
    content: "";
    background-color: pink; /*#FFFFFA*/
    height: 45px;
    width: 100px;
    position: absolute;
    bottom: 0;
    left: 10px;
    z-index: -1;
}
.modal__btn .modal__btn__detail:hover::after{
    animation: hover 0.25s cubic-bezier(.4, 0, .2, 1) forwards;
}
.modal__btn .modal__btn__notice{
    background-image: url(../common/img/pc/service_modal/big_btn.png);
    background-position: center;
    background-repeat: no-repeat;
    padding: 12px 8px;
}
@keyframes hover {
    100%{
        transform: translateX(100%);
    }
}
```

### 試したこと

.modal__btn__detail：
　z-indexの値を上げる、position: relativeを追加したうえでz-indexの値を上げる。
　　→効果なし。

.modal__btn__detail::after：
　z-indexの値を下げる。
　　→aタグ内「詳細はこちら」の文字より後ろに配置はできたが、背景画像はピンク背景より前に出てこず。

z-indexについて

### 前提


例えば、ユーザー登録し、商品を出品または購入することができるようなサイト内で、「戻る」ボタンを設置する際のリンクの設定が最適か教えてください。

以下のような関係性のページがあったとします。


●遷移元となるページ
・商品一覧ページ(index.php)
・マイページ(mypage.php)

〇遷移先ページ
商品詳細ページ（productDetail.php)
▶このページに「戻る」ボタンを設置しています。

index.phpでは、ページネーションやカテゴリー検索の際にGETパラメータ使用しているため、productDetail.phpから「戻る」ボタンで戻った際に同じページを表示させるために、同様のGETパラメーターが必要。



### 試したこと

「戻る」ボタンは以下のようにしました。
これは適切でしょうか？
もし他に最適な方法がありましたらアドバイスをください。


```ここに言語を入力
                <?php if(!empty($_SERVER['HTTP_REFERER']) && (strpos($_SERVER['HTTP_REFERER'],$_SERVER['HTTP_HOST']) !== false)) : ?>
                <div>
                    <a href="<?php echo $_SERVER['HTTP_REFERER']; ?>">&lt; 戻る</a>
                </div>
                <?php endif; ?>
                
```

前のページに「戻る」ボタンの実装は適切かどうか教えてください。

以下の様なｊｓｐ(jquery含む）があります。tdは可変となっています。
変数「a」に$("tbody tr")と設定し、そのaを繰り返し使用して、その直下のtdを使用したいので、
$("a[i] td")と設定したのですが、うまく行きませんでした。セレクターに変数を使用して、直下のセレクターを取得するにはどの様に設定すれば良いでしょうか？

```html
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%-- taglibディレクティブタグで、使用するタグライブラリを宣言 --%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全部表示</title>

</head>
<body>

<form method="get" action="/koshisample/saleBox" name="itemtable">
<table>
<tr>
<th>chkbox</th>
<th>ID</th>
<th>商品名</th>
<th>値段</th>
</tr>
<c:forEach var="item" items="${itemlists}" varStatus="status">
  <tr>
  <td><input type="checkbox" id="chkbid" name="chkb"></td>
    <td><input type="hidden" name="id" value="${item.id}">${item.id}</td>
    <td>${item.namae}</td>
    <td>${item.price }</td>
  </tr>
</c:forEach>

</table>
<input type="submit" name="salebox" value="カゴに入れる" onclick="setValue()">
<input type="button" name="test" value="test" onclick="setId()">
</form>
<input type="hidden" id="id1">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function() {
	var a = $("tbody tr");
	console.log(a);
	for (i =1; i<a.length; i++) {
		var b = $("a[i] td");
		console.log(b);
	}
})

</script>

</body>
</html>
```

jqueryでセレクターに変数と既存の値を設定する方法

### 前提・実現したいこと

要素同士の上下の間にある謎の空白を埋めたい


### 発生している問題・エラーメッセージ

```
heightを指定すると余分な余白ができてしまい、heightをなくせばその余白はなくなるが縦長になってしまいレイアウトがくずれる
```

![イメージ説明](af37defd2a1683b7bd12b99ac6182345.png)

```php
 <div class="main-contents__list">
                    <article class="main-contents__block">
                        <figure class="main-contents__image">
                            <a href="#">
                                <img src="" alt=""
                                    width="350" height="">
                            </a>
                        </figure>
                        <section class="main-contents__texts">
                            <p class="main-contents__time">2020/09/09</p>
                            <h2><a href="">タイトルタイトル</a></h2>

                            <p class="main-contents__description">
                                テキスト</p>
                        </section>
                        <p class="btn"><a href="#">READ MORE</a></p>
                    </article>繰り返し



                   
                </div>
```

### 該当のソースコード

```sass
.main-contents {
        max-width: 1200px;
        margin: 0 auto;
        margin-top: 30px;
        
        .main-contents__title{
            font-size: 30px;
            margin-bottom: 30px;
            margin-left: 25%;
            @include border();
            
            
        }
        .main-contents__box {
            display: flex;
            
            .main-contents__list {
                word-wrap: break-word;
                flex-wrap: wrap;
                justify-content: space-around;
                margin: 0 auto;
                word-break: break-all;
                display: flex;
                list-style: none;
                margin-bottom: 0;
                
                @include common-block("large");
                
            }
        }
    }
```
```common-block
 @else if( $type == 'large' ){
    //スタイル
    .main-contents__block{
        list-style: none;
        width: 350px;
        height: 500px;
        border: 1px solid $main;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 0 8px gray;      
        @include btn();
        text-align: center;
        margin-bottom: 30px;
        
        .main-contents__texts{
            word-break: break-all;
            padding: 30px;
            text-align: center;
            
            .main-contents__time{
                margin-bottom: 10px;
            }   
            h2{
                margin-bottom: 10px;
                a{
                    color: $main-contents_a;
                }
            }
            
            
        }
      
    }
  }
```

### 試したこと

heightの指定を変えたがだめだった。
横にサイドバーがあるのだがそれをずらしてみても解決しなかった。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

要素同士の上下の間にある謎の空白を埋めたい

###データの削除をPDOを通して行いたい。

ある企業の課題でphpを使って管理画面を作成しているのですが、
phpのpdoを利用した削除機能の実装につまづいています。
どなたかご協力ください。お願い致します。

###現状のコード

```php

  <?php
 $res = null;
    try {
      $dsn = 'mysql:dbname=test_db;host=133.167.38.105;charset=utf8';
      $user = 'test';
      $password = 'password';
    
      $PDO = new PDO($dsn, $user, $password); 
      $PDO->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
          
      $PDO->query("SET NAMES utf8;");
      $sql = "DELETE FROM news　WHERE id = $page"; 
      $stmt = $PDO->prepare($sql); 
      $res = $dsn->query($sql);
    
    } catch (PDOException $e) {
    exit('データベースに接続できませんでした。' . $e->getMessage());
    }
  ?>
```


```php
$sql = "DELETE FROM news WHERE id = $page"; 

```

こちらの$pageでは、$_GET[id]を代入しており、クエリーで検索をかけております。
エラー文は

```

Fatal error: Uncaught Error: Call to a member function query() on string in /var/www/html/delete_news.php:95 Stack trace: #0 {main} thrown in /var/www/html/delete_news.php on line 95
```

こちらです。

###行ったこと


```php
 $res = null;
```

変数の初期化を行いました。

###わからない部分

```php
$res = $dsn->query($sql);
```

こちらで$resに対して#sqlをクエリ処理することはわかるのですが、エラー文のfunction query()とは、クエリの中に何も入っていないという意味だと思うのですが、どうにか解決方法を教えていただけますと幸いです。