こんにちは。クリスピーパンダです。
今回が初めての投稿ですが、早速行ってみましょう〜。
この記事で実現できること
foreach等のループ文で複数作ったform、divタグ、buttonタグで、buttonタグをdivタグ全体に広げて、リンク（button）を作成するものです。
イメージは、記事投稿サイトなどで記事表示する際に、たくさんできたカードの全体をボタンにして、postしようよって感じです。通常postはしないですが、ユーザーIDを送信したいよ！とかあるんで、そういう時に役立つ思います！
開発環境
OS：macOS Catalina
テキストエディタ：VSCode
フレームワーク：Laravel6
使用言語：HTML, CSS, JavaScript
実装
HTML
今回はLaravelなのでBladeですがHTMLと同じです。@foreachやroute('post.show')などはBladeでPHPを記述していますが、他のフレームワークでもループ文やaction先など指定すれば実装できます。
@foreach($posts as $post)
<formaction="{{ route('post.show') }}"method="POST"name="post_show"><divclass="linkbox"><p>{{ $post->title }}</p><p>{{ $post->body }}</p><inputname="user_id"type="hidden"value="ここに送りたい値を記述"><buttontype="submit"></button></div></form>
@endforeach
これでpostのタイトルや内容が表示され、それを囲んでるdivタグ部分が次のCSSでリンク(ボタン)になります。
formタグ→divタグ→buttonタグの順番でコーディングしてください。
CSS
今回のHTML部分では、CSSの読み込みは省略していますが、CSSの読み込みも忘れずに行ってくださいね！
.linkbox{position:relative;}.linkboxbutton{position:absolute;top:0;left:0;height:100%;width:100%;/* buttonのスタイル削除 */background-color:transparent;border:none;cursor:pointer;outline:none;padding:0;appearance:none;}まずはポジションを使用して、buttonタグを浮き上がらせて、buttonタグのスタイルをすべて削除することで、スケスケのbuttonタグが出来上がるというイメージです。
最後に
aタグで実装すればいいじゃん！と最初に思ったのですが、どうやらループ文で複数作成したaタグでpostすると、JavaScript等をかませないとだめみたいだったので、今回は簡単にbuttonタグで実装してみました。
aタグでもこんな感じで実装できるよ！やもっと簡単な方法あるよって方はぜひ教えて下さい！
