質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.50%

【macOS】 レイアウトの継承ができない。

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 112

前提・実現したいこと

閲覧頂きありがとうございます。
早速ですが、下記の内容が解決できず困っています。

■ header.blade.phpのデータを継承ができない。

PHP Laravelを使ってHtmlとcssをリファクタリングしています。

index.blade.php に @section と @yield を使用して
header.blade.phpのデータを継承を試みているのですがうまくいきません。

**app.blade.php**

<!DOCTYPE html>
<html lang="ja">
  <head>
  <meta charset="utf-8">
  <title>WW</title>
        <meta name="description" content="日々新しいプログラミング情報を皆に">
        <link rel="icon" type="image/png" href="img/favicon.png">
        <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
        <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    @yield('content')
  </body>
</html>

ーーーーーーーーーーーーーーーーーーーーー
**index.blade.php**

@extends('layouts.app')

@section('content')
  <div id="home" class="big-bg">

  yield('header') **←←←←←←←←←←←←←←←←←←ここに header.blade.php を継承したい**

    <div class="home-content wrapper">
        <h2 class="page-title">We'll Make Your Day</h2>
        <p>今日も早朝からプログラミング</p>
        <a class="button" href="menu">一覧を見る</a>
    </div><!-- /.home-content -->
  </div><!-- /#home -->
@endsection

ーーーーーーーーーーーーーーーーーーーーー
**header.blade.php 継承ができないテンプレート**

@section('header')
  <header class="page-header wrapper">
    <h1><a href="home"><img class="logo" src="img/logo.svg" alt="ホーム"></a></h1>
    <nav>
      <ul class="main-nav">
        <li><a href="news">ニュース</a></li>
        <li><a href="menu">一覧</a></li>
        <li><a href="contact">コンタクト</a></li>
      </ul>
    </nav>
  </header>
@endsection

試したこと

スペルミスの確認や、@includeでの対応など。

補足情報(FW/ツールのバージョンなど)

◆app.blade.php と index.blade.php について 
下記2つの継承は問題なく行われています。
・index.blade.php の @section('content') から app.blade.php の @yield('content') への継承
・app.blade.php から @extends('layouts.app')への継承

各データの階層
イメージ説明

使用しているPCなど
・ macOS Catalina バージョン10.15.2
・ フレームワーク Laravel

他にも必要な情報があった場合、恐れ入りますが
コメントを頂けますと助かります。

以上、よろしくお願いいたします。
参考にした記事
https://qiita.com/kamikoloss/items/b7ec871657d25a00ef67
https://qiita.com/awesam86/items/0bc8c3f70222220259b0

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+1

継承の概念が多分理解しきれていないのかと思います。
継承は元となるファイルを拡張してあげるイメージで、継承元はあくまで一つです。今回の場合ですと表示するファイルはindexで継承元はapp、headerは継承元の関係にはなりません。(indexを継承元にしてheaderを表示するファイルにすれば多重継承で実現出来るがファイルの意味が変わってしまう)

おそらく質問者さんがやりたいことはincludeかcomponentを使って実現できるかと思います。

サブビューの読み込み
コンポーネントとスロット

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/02/27 14:16

    zushi0905様
    こんなしょうもない質問に真摯にご回答頂き、ありがとうございます。

    zushi0905様の助言のおかげでcomponentを使って以下のように解決しました。
    Laravelはやりがいがあり、面白いのでもっと勉強します。

    ほんとにありがとうございました。

    キャンセル

  • 2020/02/27 15:03

    どういたしまして。
    laravel面白いですよね!お互い頑張りましょう^^

    キャンセル

0

Views以下にcomponentsフォルダを作成し、header.blade.phpを移動させる
イメージ説明

ーーーーーーーーーーーーーーーーーーーーー
header.blade.php  componentの元

<header class="page-header wrapper">
<h1><a href="home"><img class="logo" src="img/logo.svg" alt="ホーム"></a></h1>
<nav>
<ul class="main-nav">
<li><a href="news">ニュース</a></li>
<li><a href="menu">一覧</a></li>
<li><a href="contact">コンタクト</a></li>
</ul>
</nav>
</header>

ーーーーーーーーーーーーーーーーーーーーー
**index.blade.php **

@extends('layouts.app')

@section('content')
<div id="home" class="big-bg">

@component('components.header')     ← このように修正
@endcomponent

<div class="home-content wrapper">
<h2 class="page-title">We'll Make Your Day</h2>
<p>おしゃれなカフェで癒やされてみませんか?無添加の食材で体の中からリフレッシュ。</p>
<a class="button" href="menu">メニューを見る</a>
</div><!-- /.home-content -->
</div><!-- /#home -->
@endsection

◆注意 @endcomponentで閉じないと表示されませんでした。

以上の流れで解決できました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

Views以下にcomponentsフォルダを作成し、header.blade.phpを移動させる
イメージ説明

ーーーーーーーーーーーーーーーーーーーーー
header.blade.php  componentの元

<header class="page-header wrapper">
<h1><a href="home"><img class="logo" src="img/logo.svg" alt="ホーム"></a></h1>
<nav>
<ul class="main-nav">
<li><a href="news">ニュース</a></li>
<li><a href="menu">一覧</a></li>
<li><a href="contact">コンタクト</a></li>
</ul>
</nav>
</header>

ーーーーーーーーーーーーーーーーーーーーー
**index.blade.php **

@extends('layouts.app')

@section('content')
<div id="home" class="big-bg">

@component('components.header')     ← このように修正
@endcomponent

<div class="home-content wrapper">
<h2 class="page-title">We'll Make Your Day</h2>
<p>おしゃれなカフェで癒やされてみませんか?無添加の食材で体の中からリフレッシュ。</p>
<a class="button" href="menu">メニューを見る</a>
</div><!-- /.home-content -->
</div><!-- /#home -->
@endsection

◆注意 @endcomponentで閉じないと表示されませんでした。

以上の流れで解決できました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る