77850


背景にbeforeを使って画像を表示させたaを、fixedで追従するメニューのようにしました。  
しかし背景に画像を表示させる関係でbeforeのz-indexを-1にしてしまったため、他のdiv要素が邪魔して追従時に隠れてしまいます。  
あれこれz-indexを変えたりpositionを入れてみたりしているのですが解決できません。  
この場合は階層順をどのようにすればいいのでしょうか？

ご教示いただけると助かります。

aを隠してしまうdivのコードは以下

[code]

    $('.flex_ a').on('click',function(){
        $('.flex_ a').removeClass('active');
        $(this).addClass('active');
        })
[/code]

[code]

    @charset "UTF-8";
    
    html{
        scroll-behavior: smooth;
    }
    
    * {
        box-sizing: border-box;
    }
    
    body {
        color: #3e3e3e;
        background:
          linear-gradient(217deg, rgba(255,242,192,1), rgba(255,210,179,1)),
          linear-gradient(127deg, rgba(255,210,179,1), rgba(255,229,180,1));
    }
    
    a:link, a:visited, a:hover, a:active{
        text-decoration: none;
        color: #3e3e3e;
    }
    
    p {
        font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
        line-height:1.5;
        letter-spacing:0.1em;
    }
    
    .sp_br{
        display:none;
    }
    
    /*パンくずリスト周りの調整ここから*/
    #g_nav {
        margin: 0;
    }
    
    ul#topic_path {
        max-width: 100%;
        padding: 15px 0 0 15px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    ul#topic_path li a:hover {
        color: #ff6c00; 
    }
    /*パンくずリスト周りの調整ここまで*/
    
    #contents {
        border: none;
        padding: 0px;
        margin: 0;
        background-color: transparent;
        border-radius: 5px;
    }
    
    
    section {
        padding: 60px 10px;
    }
    
    /*見出しデザインここから*/
    .section-title  {
        max-width: 400px;
        width: 100%;
        height: auto;
        margin: 0 auto 30px;
        display: block;
    }
    
    /*メインビジュアルここから*/
    .mainvisual {
        max-width: 1920px;
        width: 100%;
        height: auto;
        display: block;
        margin: auto;
    
    }
    
    .mainvisual img {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        display: block;
    }
    /*メインビジュアルここまで*/
    
    /*リード文ここから*/
    .lead-box {
        max-width: 1200px;
        background-color: #fff;
        border-radius: 5px;
        padding: 50px;
        margin: auto;
    }
    
    .lead-box p {
        /*max-width: 1200px;*/
        margin: 0 auto;
        font-weight:bold;
        line-height: 1.8;
        display: block;
    }
    /*リード文ここまで*/
    
    
    /*投稿ボタンここから*/
    a.btn-hv:link, a.btn-hv:visited, a.btn-hv:hover, a.btn-hv:active{
        text-decoration: none;
    }
    
    a.btn-hv {
        font-weight: bold;
        text-align: center; 
        text-decoration: none;
        color: #fff;
        background:
          linear-gradient(217deg, rgba(174,220,255,1), rgba(189,190,255,1));
        padding: 15px;
        display: block;
        margin: -44px auto 0;
        max-width: 350px;
        transition: .3s ease;
        font-size: 1.8em;
        border-radius: 10px;
        letter-spacing: 0.25rem;
        border: solid 1.9px rgba(189,190,255,1);
        box-sizing: border-box;
        font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    }
    
    a.btn-hv:hover,a.btn-hv2:hover {
        text-align: center; 
        text-decoration: none;
        color: rgba(189,190,255,1);
        background:transparent;
    }
    
    .flex_box {
        max-width: 1200px;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0 auto;
        position: relative;
    }
    
        .fex_ a:hover{
            opacity:0.6;
            transition:0.6s;
        }
    
    .box {
        width: 32%;
        background-color: #FFFFFF;
        border-radius: 5px;
        margin-bottom: 3%;
        text-align: center;
        position: relative;/*更新バッジ用*/
    }
    
    .box:nth-of-type(3) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .badge{
        border-radius: 5px 0 0 0;
        font-weight: bold;
        font-size: 1.3em;
        color: #fff;
        background-color: #ff931d;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1000;
        padding: 10px 20px;     
    }
    
    .box a {
        display: block;
        transition: .2s ease;
    }
    
    .box a:hover {
        color: #ff931d;
        opacity: 0.8;
    }
    
        
    .box img {
        max-width: 700px;
        width: 100%;
        height: auto;
        border-radius: 5px 5px 0 0;
        transition: .2s ease;
        position: relative;
    
    }
    
    .flex_box::after {
        display: block;
        content:"";
        width: 32%;
    }
        
    .blog_title {
        text-align: center;
        font-size: 1.2em;
        font-weight: bold;
        margin: 10px 5px;
        transition: .2s ease;
    }
    
    h2{
        text-align: center;
        font-size:2.25rem;
        padding:20px;
        text-decoration: none;
        border:none;
        font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
        color:#3e3e3e;
    }
    
    .come{
        text-align:center;
        display:block;
        font-weight: bold;
        font-size:1.7rem;
    }
    
    .flex_ctn{
        display: flex;
        flex-wrap: wrap;
    }
    
    .box__ img{
        object-fit: cover;
        display:block;
        width:100%;
    }
    
    .photo__{
        width:31.6%;
        object-fit: cover;
        margin:1%;
        box-sizing: border-box;
    }
    
    .photo__:nth-child(3n){
        margin:1% 0 1% 1%;
    }
    
    .box__ img:hover{
        opacity:0.7;
    }
    
    
    @media(max-width: 690px) {
    /*パンくずリスト周りの調整*/
        #g_nav {
        margin: 0;
    }
    
        .sp_br{
        display:block;
    }
        
    section {
        padding: 20px 10px;
    }
        
    #contents {
        margin: 0;
    }
        
    .mainvisual {
        padding: 0;
    }
        
    .mainvisual img {
        padding: 0;
    }
        
    .lead-box {
        padding: 20px;
    }
        
    .lead-box p {
        font-size: 95%;
    }
        
    .blog_title {
        font-size: 1em;
    }
        
    a.btn-hv {
        font-size: 1.5em;
    }
    .box__ img{
        object-fit: cover;
        display:block;
        width:100%;
    }
    .photo__{
        width:48%;
        object-fit: cover;
        margin:1%;
        box-sizing: border-box;
    }
    .photo__:nth-child(3n){
        margin:1%;
    }
    }
        
    @media(max-width: 620px) {
    
    .col_1 {
        background-color: #fff;
        border-radius: 5px;
        border: 1px solid #8E8E8E;
        padding: 20px;
    }
            
    .box {
        width: 100%;
        margin-bottom: 10%;
    }
        
        
        a.btn-hv {
        padding:10px;
        margin: 5px auto 0;
    }
    }
    
    .nav {
      height: 90px;
      width: 100%;
      margin: 0 auto;
      position: fixed;
      top: 130px;
      left: 0;
    }
    
    .flex_ {
      max-width: 1200px;
      width: 45%;
      margin: 0 5% 0 50%;
      height: 80px;
      line-height: 80px;
      display: flex;
      position: relative;
      justify-content: space-between;
    }
    
    .flex_ a {
        display: block;
        font-size: 1.5rem;
        padding: 0 0 0 20px;
        color: #000;
        text-decoration: none;
        overflow: visible;
      }
    
    @media (max-width: 1092px) {
      body {
        width: 100%;
      }
      .flex_ {
        width:60%;
        margin: 0 auto;
      }
    }
    
    @media (max-width: 823px) {
    
        .flex_ {
            width:90%;
            margin: 0 auto;
          }
        .flex_ a {
            font-size: 1.25rem;
          }
      }
    
      @media (max-width: 553px) {
    
        .flex_ {
           flex-direction:column;
           height: 65px;
           line-height: 65px;
          }
    
          .flex_ a {
            font-size: 1rem;
          }
      }
    
    .active + .huwahuwa {
      display: inline-block;
    }
    
    @keyframes huwahuwa {
      0% {
        transform: translate(0, 0) rotate(-7deg);
      }
      50% {
        transform: translate(0, -7px) rotate(0deg);
      }
      100% {
        transform: translate(0, 0) rotate(7deg);
      }
    }
    
    .flex_ a:hover {
      opacity: 0.6;
      transition: 0.6s;
    }
    
    .flex_ > a {
      /* クリック時のbefore疑似要素をa要素にスタッキングするため、positionをrelativeに */
      position: relative;
    }
    
    .flex_ > a.active::before {
      /* huwahuwaは疑似要素で表現。内容はほぼ従来のhuwahuwaと同じ。 */
      /* posotionをabsoluteに。配置位置を親のa要素基準とする。*/
      position: absolute;
      /* leftとtopを0にすることで親要素の左上と同一の位置に移動。調整したい場合はこの数値をいじってください */
      left: 0;
      top: 0;
      content: "";
      animation: huwahuwa 3s infinite ease-in-out 0.8s alternate;
      background: url(https://i.stack.imgur.com/FXBqw.png) no-repeat
        center center / 60px auto;
      display: inline-block;
      transition: 1.5s ease-in-out;
      width: 100px;
      height: 100px;
        z-index:-1;
    }
    
    @media (max-width: 553px) {
    
        .flex_ > a.active::before {
            /* huwahuwaは疑似要素で表現。内容はほぼ従来のhuwahuwaと同じ。 */
            /* posotionをabsoluteに。配置位置を親のa要素基準とする。*/
            position: absolute;
            /* leftとtopを0にすることで親要素の左上と同一の位置に移動。調整したい場合はこの数値をいじってください */
            left: 0;
            top: -17px;
          }
      }
    
    #portal{
        position: relative;
      background-color: #abe;
    }
    #photo{
      background-color: #bea;
    }
[/code]

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <!--<![endif]-->
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
    <meta name="format-detection" content="telephone=no" />
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
        
    </head>
    <body>
    <header id="header"> 
    </header>
    
    
    <ul id="topic_path">
      <li><a href="">トップページ</a></li>
      <li></li>
    </ul>
    
        
    <div class="nav">
        <div class="flex_">
            <a href="#">top</a>
            <a href="#portal">one</a>
            <a href="#photo">two</a>
        </div>
    </div>
        
        <div id="contents">
            
    <div class="mainvisual">
    <img src="" alt="">
    </div>
            
    <a href="" class="btn-hv" target="_blank">投稿はこちら</a>
    
    <section>
        
    <div class="lead-box">
    <p>aaa</p>
    
    <p>&nbsp;</p>
    
    <p>aaa</p>
    
    <p>&nbsp;</p>
    
        <p>aaa</p>
    
    <p>&nbsp;</p>
    
    <p>aaa</p>
    </div>
        
    </section>
            
    <section id="portal">
    <h2>one</h2>
    <div class="flex_box">
        
        <div class="box">
            <span class="badge"> NEW! </span>
            <a href="" target="_blank">
            <img src="" alt="">
            <p class="blog_title"></p></a>
        </div>
        
    </div>
    </section>
    
    <section id="photo">
      <h2>two</h2>
    </section>
    
    <div id="go_to_top">
    <div class="wrap"><a href="#header">▲ ページの先頭へ</a></div>
        </div>
        </body>
    </html>
[/code]


CC BY-SA 4.0
2021-06-28T10:03:03.780
77836
2021-07-05T15:40:31.870
2021-07-05T15:40:31.870
19110
46994
question
css html5
position:fixed;のaの階層を一番上にする方法


ナビゲーション部が他のdiv要素の下に隠れてしまう（隠れてしまうのは`#portal`だけですが）原因はbefore疑似要素の`z-index`が原因ではなく、`#portal`に`position:
relative`が付与されているためこのdiv要素がナビ部と同レベルのスタッキングコンテキストとなり、`#portal`の方がHTML上後から記述されているので`#portal`の方が上側に描画されているからです。  
スタッキングコンテキストについてはドキュメントを読んでも難解かもしれませんが、ちゃんと理解していないと複雑なレイアウトが意図通り作成できません。必ず理解するようにしてください。  
<https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context>

今回の問題も解決策は複数ありますが、最も手軽な方法はナビ部分をhtml文書の一番最後に記載することです。  
htmlでは同じレベルの重ね合わせ順序が設定されている場合、後から書いた方が上に来ます。ナビ部分が常に`fixed`であるならば基本的にどの場所に記載しても画面上は固定位置なので、文書の最後に記載することでz-
indexを意識しなくても最も上に描画させることが可能です。

[code]

    $('.flex_ a').on('click',function(){
        $('.flex_ a').removeClass('active');
        $(this).addClass('active');
        })
[/code]

[code]

    @charset "UTF-8";
    
    html{
        scroll-behavior: smooth;
    }
    
    * {
        box-sizing: border-box;
    }
    
    body {
        color: #3e3e3e;
        background:
          linear-gradient(217deg, rgba(255,242,192,1), rgba(255,210,179,1)),
          linear-gradient(127deg, rgba(255,210,179,1), rgba(255,229,180,1));
    }
    
    a:link, a:visited, a:hover, a:active{
        text-decoration: none;
        color: #3e3e3e;
    }
    
    p {
        font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
        line-height:1.5;
        letter-spacing:0.1em;
    }
    
    .sp_br{
        display:none;
    }
    
    /*パンくずリスト周りの調整ここから*/
    #g_nav {
        margin: 0;
    }
    
    ul#topic_path {
        max-width: 100%;
        padding: 15px 0 0 15px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    ul#topic_path li a:hover {
        color: #ff6c00; 
    }
    /*パンくずリスト周りの調整ここまで*/
    
    #contents {
        border: none;
        padding: 0px;
        margin: 0;
        background-color: transparent;
        border-radius: 5px;
    }
    
    
    section {
        padding: 60px 10px;
    }
    
    /*見出しデザインここから*/
    .section-title  {
        max-width: 400px;
        width: 100%;
        height: auto;
        margin: 0 auto 30px;
        display: block;
    }
    
    /*メインビジュアルここから*/
    .mainvisual {
        max-width: 1920px;
        width: 100%;
        height: auto;
        display: block;
        margin: auto;
    
    }
    
    .mainvisual img {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        display: block;
    }
    /*メインビジュアルここまで*/
    
    /*リード文ここから*/
    .lead-box {
        max-width: 1200px;
        background-color: #fff;
        border-radius: 5px;
        padding: 50px;
        margin: auto;
    }
    
    .lead-box p {
        /*max-width: 1200px;*/
        margin: 0 auto;
        font-weight:bold;
        line-height: 1.8;
        display: block;
    }
    /*リード文ここまで*/
    
    
    /*投稿ボタンここから*/
    a.btn-hv:link, a.btn-hv:visited, a.btn-hv:hover, a.btn-hv:active{
        text-decoration: none;
    }
    
    a.btn-hv {
        font-weight: bold;
        text-align: center; 
        text-decoration: none;
        color: #fff;
        background:
          linear-gradient(217deg, rgba(174,220,255,1), rgba(189,190,255,1));
        padding: 15px;
        display: block;
        margin: -44px auto 0;
        max-width: 350px;
        transition: .3s ease;
        font-size: 1.8em;
        border-radius: 10px;
        letter-spacing: 0.25rem;
        border: solid 1.9px rgba(189,190,255,1);
        box-sizing: border-box;
        font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    }
    
    a.btn-hv:hover,a.btn-hv2:hover {
        text-align: center; 
        text-decoration: none;
        color: rgba(189,190,255,1);
        background:transparent;
    }
    
    .flex_box {
        max-width: 1200px;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: 0 auto;
        position: relative;
    }
    
        .fex_ a:hover{
            opacity:0.6;
            transition:0.6s;
        }
    
    .box {
        width: 32%;
        background-color: #FFFFFF;
        border-radius: 5px;
        margin-bottom: 3%;
        text-align: center;
        position: relative;/*更新バッジ用*/
    }
    
    .box:nth-of-type(3) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .badge{
        border-radius: 5px 0 0 0;
        font-weight: bold;
        font-size: 1.3em;
        color: #fff;
        background-color: #ff931d;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1000;
        padding: 10px 20px;     
    }
    
    .box a {
        display: block;
        transition: .2s ease;
    }
    
    .box a:hover {
        color: #ff931d;
        opacity: 0.8;
    }
    
        
    .box img {
        max-width: 700px;
        width: 100%;
        height: auto;
        border-radius: 5px 5px 0 0;
        transition: .2s ease;
        position: relative;
    
    }
    
    .flex_box::after {
        display: block;
        content:"";
        width: 32%;
    }
        
    .blog_title {
        text-align: center;
        font-size: 1.2em;
        font-weight: bold;
        margin: 10px 5px;
        transition: .2s ease;
    }
    
    h2{
        text-align: center;
        font-size:2.25rem;
        padding:20px;
        text-decoration: none;
        border:none;
        font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
        color:#3e3e3e;
    }
    
    .come{
        text-align:center;
        display:block;
        font-weight: bold;
        font-size:1.7rem;
    }
    
    .flex_ctn{
        display: flex;
        flex-wrap: wrap;
    }
    
    .box__ img{
        object-fit: cover;
        display:block;
        width:100%;
    }
    
    .photo__{
        width:31.6%;
        object-fit: cover;
        margin:1%;
        box-sizing: border-box;
    }
    
    .photo__:nth-child(3n){
        margin:1% 0 1% 1%;
    }
    
    .box__ img:hover{
        opacity:0.7;
    }
    
    
    @media(max-width: 690px) {
    /*パンくずリスト周りの調整*/
        #g_nav {
        margin: 0;
    }
    
        .sp_br{
        display:block;
    }
        
    section {
        padding: 20px 10px;
    }
        
    #contents {
        margin: 0;
    }
        
    .mainvisual {
        padding: 0;
    }
        
    .mainvisual img {
        padding: 0;
    }
        
    .lead-box {
        padding: 20px;
    }
        
    .lead-box p {
        font-size: 95%;
    }
        
    .blog_title {
        font-size: 1em;
    }
        
    a.btn-hv {
        font-size: 1.5em;
    }
    .box__ img{
        object-fit: cover;
        display:block;
        width:100%;
    }
    .photo__{
        width:48%;
        object-fit: cover;
        margin:1%;
        box-sizing: border-box;
    }
    .photo__:nth-child(3n){
        margin:1%;
    }
    }
        
    @media(max-width: 620px) {
    
    .col_1 {
        background-color: #fff;
        border-radius: 5px;
        border: 1px solid #8E8E8E;
        padding: 20px;
    }
            
    .box {
        width: 100%;
        margin-bottom: 10%;
    }
        
        
        a.btn-hv {
        padding:10px;
        margin: 5px auto 0;
    }
    }
    
    .nav {
      height: 90px;
      width: 100%;
      margin: 0 auto;
      position: fixed;
      top: 130px;
      left: 0;
    }
    
    .flex_ {
      max-width: 1200px;
      width: 45%;
      margin: 0 5% 0 50%;
      height: 80px;
      line-height: 80px;
      display: flex;
      position: relative;
      justify-content: space-between;
    }
    
    .flex_ a {
        display: block;
        font-size: 1.5rem;
        padding: 0 0 0 20px;
        color: #000;
        text-decoration: none;
        overflow: visible;
      }
    
    @media (max-width: 1092px) {
      body {
        width: 100%;
      }
      .flex_ {
        width:60%;
        margin: 0 auto;
      }
    }
    
    @media (max-width: 823px) {
    
        .flex_ {
            width:90%;
            margin: 0 auto;
          }
        .flex_ a {
            font-size: 1.25rem;
          }
      }
    
      @media (max-width: 553px) {
    
        .flex_ {
           flex-direction:column;
           height: 65px;
           line-height: 65px;
          }
    
          .flex_ a {
            font-size: 1rem;
          }
      }
    
    .active + .huwahuwa {
      display: inline-block;
    }
    
    @keyframes huwahuwa {
      0% {
        transform: translate(0, 0) rotate(-7deg);
      }
      50% {
        transform: translate(0, -7px) rotate(0deg);
      }
      100% {
        transform: translate(0, 0) rotate(7deg);
      }
    }
    
    .flex_ a:hover {
      opacity: 0.6;
      transition: 0.6s;
    }
    
    .flex_ > a {
      /* クリック時のbefore疑似要素をa要素にスタッキングするため、positionをrelativeに */
      position: relative;
    }
    
    .flex_ > a.active::before {
      /* huwahuwaは疑似要素で表現。内容はほぼ従来のhuwahuwaと同じ。 */
      /* posotionをabsoluteに。配置位置を親のa要素基準とする。*/
      position: absolute;
      /* leftとtopを0にすることで親要素の左上と同一の位置に移動。調整したい場合はこの数値をいじってください */
      left: 0;
      top: 0;
      content: "";
      animation: huwahuwa 3s infinite ease-in-out 0.8s alternate;
      background: url(https://placehold.jp/3d4070/ffffff/150x150.png?text=huwahuwa) no-repeat
        center center / 60px auto;
      display: inline-block;
      transition: 1.5s ease-in-out;
      width: 100px;
      height: 100px;
        z-index:-1;
    }
    
    @media (max-width: 553px) {
    
        .flex_ > a.active::before {
            /* huwahuwaは疑似要素で表現。内容はほぼ従来のhuwahuwaと同じ。 */
            /* posotionをabsoluteに。配置位置を親のa要素基準とする。*/
            position: absolute;
            /* leftとtopを0にすることで親要素の左上と同一の位置に移動。調整したい場合はこの数値をいじってください */
            left: 0;
            top: -17px;
          }
      }
    
    #portal{
        position: relative;
        background-color: #abe;
        
    }
    #photo{
      background-color: #bea;
    }
[/code]

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <!--<![endif]-->
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
    <meta name="format-detection" content="telephone=no" />
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
        
    </head>
    <body>
    <header id="header"> 
    </header>
    
    
    <ul id="topic_path">
      <li><a href="">トップページ</a></li>
      <li></li>
    </ul>
    
        
        <div id="contents">
            
    <div class="mainvisual">
    <img src="" alt="">
    </div>
            
    <a href="" class="btn-hv" target="_blank">投稿はこちら</a>
    
    <section>
        
    <div class="lead-box">
    <p>aaa</p>
    
    <p>&nbsp;</p>
    
    <p>aaa</p>
    
    <p>&nbsp;</p>
    
        <p>aaa</p>
    
    <p>&nbsp;</p>
    
    <p>aaa</p>
    </div>
        
    </section>
            
    <section id="portal">
    <h2>one</h2>
    <div class="flex_box">
        
        <div class="box">
            <span class="badge"> NEW! </span>
            <a href="" target="_blank">
            <img src="" alt="">
            <p class="blog_title"></p></a>
        </div>
        
    </div>
    </section>
    
    <section id="photo">
      <h2>two</h2>
    </section>
    
    <div id="go_to_top">
    <div class="wrap"><a href="#header">▲ ページの先頭へ</a></div>
        </div>
        <!-- navを文書の一番下へ移動 -->
    <div class="nav">
        <div class="flex_">
            <a href="#">top</a>
            <a href="#portal">one</a>
            <a href="#photo">two</a>
        </div>
    </div>
    
        </body>
    </html>
[/code]


CC BY-SA 4.0
2021-06-29T09:18:44.590
77850
2021-06-29T09:18:44.590
46944
77836
answer