質問編集履歴
4
コード記入
    
        title	
    CHANGED
    
    | 
            File without changes
         | 
    
        body	
    CHANGED
    
    | @@ -3,105 +3,8 @@ | |
| 3 3 | 
             
            サイト作成中他の画像や文字はtransform: translateで指定して位置が変わらないようにできたのですが、なぜかスライダー付き文章だけ幅を変更した際に位置が変わってしまいます。
         | 
| 4 4 | 
             
            ### 発生している問題・エラーメッセージ
         | 
| 5 5 |  | 
| 6 | 
            -
            
         | 
| 7 6 |  | 
| 8 7 |  | 
| 9 | 
            -
            ### css html
         | 
| 10 | 
            -
            ```<!DOCTYPE html>
         | 
| 11 | 
            -
            <html lang="ja">
         | 
| 12 | 
            -
            <haed>
         | 
| 13 | 
            -
            <meta charset="UTF-8">
         | 
| 14 | 
            -
            <meta name="viewport" content="target-densitydpi=device-dpi, width=1200, maximum-scale=1.0, user-scalable=yes">    
         | 
| 15 | 
            -
            <title>NEXT ENDING</title>
         | 
| 16 | 
            -
            <link rel="stylesheet"href="home.css">
         | 
| 17 | 
            -
            </haed>
         | 
| 18 | 
            -
            <body bgcolor="#fff" style="margin-top: 0;margin-left: 0;margin-right: 0;margin-bottom: 0;">
         | 
| 19 | 
            -
                 
         | 
| 20 | 
            -
                
         | 
| 21 | 
            -
                
         | 
| 22 | 
            -
                <!-------------ヘッダーメニュー--------------->
         | 
| 23 | 
            -
              
         | 
| 24 | 
            -
             <center>   
         | 
| 25 | 
            -
                 <ul class="menu" style="list-style: none;">
         | 
| 26 | 
            -
                     <header class="site-header">   
         | 
| 27 | 
            -
                         <niv class="menu_item">
         | 
| 28 | 
            -
                             <li class="menu"><a href="home.html" alt="最初のページ">home</a></li>    
         | 
| 29 | 
            -
                             <li class="menu"><a href="map.html" alt="探索マップ">map</a></li> 
         | 
| 30 | 
            -
                             <li class="menu"><a href="" alt="キャラクター一覧">character</a></li> 
         | 
| 31 | 
            -
                             <li class="menu"><a href="" alt="章シナリオ">scenario</a></li> 
         | 
| 32 | 
            -
                             <li class="menu"><a href="" alt="関係者一覧">credit</a></li></niv> 
         | 
| 33 | 
            -
                     </header>
         | 
| 34 | 
            -
                 </ul>
         | 
| 35 | 
            -
                </center>
         | 
| 36 | 
            -
                
         | 
| 37 | 
            -
            <main>
         | 
| 38 | 
            -
                <div class="main-text">
         | 
| 39 | 
            -
                    <div class="img_a">
         | 
| 40 | 
            -
                        <img src="home_a.png" alt="メインビジュアル">
         | 
| 41 | 
            -
                    </div>
         | 
| 42 | 
            -
                    <p class="sabtitel">海の底から誰かの泣き声が聞こえる</p>
         | 
| 43 | 
            -
                 <p class="sabbtitel">海の底には国が秘密裏に作った共同実験所があるらしい<br>
         | 
| 44 | 
            -
                    そんな噂どうせどこかのSNSで生まれた陰謀論か何かだ<br>
         | 
| 45 | 
            -
                    なんて、この時の僕達はこれから起きるであろう悲劇の<br>
         | 
| 46 | 
            -
                    始まりの一端をだれも信じようとはしなかった 
         | 
| 47 | 
            -
                    </p>
         | 
| 48 | 
            -
                    
         | 
| 49 | 
            -
                    <p class="sabtitel2">「今から殺し合いをしていただきます」</p>
         | 
| 50 | 
            -
                 <p class="sabbtitel2">少女のような風貌の彼女がそう告げる。<br>
         | 
| 51 | 
            -
                     この場に集められただれもかれもが、そんなこと<br>
         | 
| 52 | 
            -
                     できるわけがないだろうと抗議の声を上げた<br>
         | 
| 53 | 
            -
                     今までの生活から一変した非現実に竦む足もそのまま<br>
         | 
| 54 | 
            -
                     さも当たり前のように話は勝手に進んでいくのであった
         | 
| 55 | 
            -
                    </p>
         | 
| 56 | 
            -
                    
         | 
| 57 | 
            -
                </div>
         | 
| 58 | 
            -
              
         | 
| 59 | 
            -
              
         | 
| 60 | 
            -
                
         | 
| 61 | 
            -
                <div class="titela">
         | 
| 62 | 
            -
                        <img src="home_2.png"alt="タイトル"></div>
         | 
| 63 | 
            -
                 <div class="nanasi">
         | 
| 64 | 
            -
                     <img src="nanasi.png" alt="ナナシ"></div>
         | 
| 65 | 
            -
                
         | 
| 66 | 
            -
                  <p class="tyui">Participation conditions</p>
         | 
| 67 | 
            -
                 <p class="tyui2">応募の際の注意事項</p>
         | 
| 68 | 
            -
                
         | 
| 69 | 
            -
                <div class="tyui01">
         | 
| 70 | 
            -
                        <img src="tyui01.png"alt="注意01"></div>
         | 
| 71 | 
            -
                
         | 
| 72 | 
            -
                
         | 
| 73 | 
            -
                <div class="tyui02">
         | 
| 74 | 
            -
                        <img src="tyui02.png"alt="注意01"></div>
         | 
| 75 | 
            -
                
         | 
| 76 | 
            -
                
         | 
| 77 | 
            -
                   <div class="tyui03">
         | 
| 78 | 
            -
                        <img src="tyui03.png"alt="注意01"></div>
         | 
| 79 | 
            -
                
         | 
| 80 | 
            -
                <div class="tyui04">
         | 
| 81 | 
            -
                        <img src="tyui04.png"alt="注意01"></div>
         | 
| 82 | 
            -
                
         | 
| 83 | 
            -
                 <p class="tyui3"> ー企画概要ー </p>
         | 
| 84 | 
            -
                
         | 
| 85 | 
            -
                 <div class="tyui4">
         | 
| 86 | 
            -
                     <p>・当企画は某ハイスピード推理リアクションゲームシリーズの世界観をお借りした二次創作企画になります。<br>
         | 
| 87 | 
            -
                ・本家様や実在の人物、企業等は関係ございません。<br><br>
         | 
| 88 | 
            -
                ・また、当企画は前作同様諸注意として、残酷な死亡表現、救いのないシナリオ、胸糞エンディングを<br>
         | 
| 89 | 
            -
                迎えることになると思われますがそれをご了承できる方のみの応募を推奨させていただきます。<br><br>
         | 
| 90 | 
            -
                ・前作:ORIRONPA ENTERの同一世界観の話となります。<br>
         | 
| 91 | 
            -
                前作に関しては未確認でも問題ない内容とはなっていますが、一点特殊な前提世界観がありますので<br>
         | 
| 92 | 
            -
                後ほど出す世界観内容を確認の上応募をお願いいたします。<br><br>
         | 
| 93 | 
            -
                ・現時点では6章編成、2週間周期での進行予定となっております。尚、当企画は生き返り企画ではありますが<br>
         | 
| 94 | 
            -
                前提とする胸糞エンディングに相違はございませんのでご安心ください<br><br>
         | 
| 95 | 
            -
                ・後ほど詳細として同義の文を本アカウントより出させていただきますが以上内容をご了承の上での<br>
         | 
| 96 | 
            -
                         応募のご検討をお願いいたします。<br><br></p></div>
         | 
| 97 | 
            -
            </main>
         | 
| 98 | 
            -
               
         | 
| 99 | 
            -
              
         | 
| 100 | 
            -
                
         | 
| 101 | 
            -
             
         | 
| 102 | 
            -
                
         | 
| 103 | 
            -
                
         | 
| 104 | 
            -
                <p class="aa">a</p>
         | 
| 105 8 | 
             
            コード
         | 
| 106 9 | 
             
            ```
         | 
| 107 10 | 
             
            ```
         | 
3
コード記入
    
        title	
    CHANGED
    
    | 
            File without changes
         | 
    
        body	
    CHANGED
    
    | @@ -7,9 +7,384 @@ | |
| 7 7 |  | 
| 8 8 |  | 
| 9 9 | 
             
            ### css html
         | 
| 10 | 
            -
             | 
| 10 | 
            +
            ```<!DOCTYPE html>
         | 
| 11 | 
            +
            <html lang="ja">
         | 
| 12 | 
            +
            <haed>
         | 
| 13 | 
            +
            <meta charset="UTF-8">
         | 
| 14 | 
            +
            <meta name="viewport" content="target-densitydpi=device-dpi, width=1200, maximum-scale=1.0, user-scalable=yes">    
         | 
| 15 | 
            +
            <title>NEXT ENDING</title>
         | 
| 16 | 
            +
            <link rel="stylesheet"href="home.css">
         | 
| 17 | 
            +
            </haed>
         | 
| 18 | 
            +
            <body bgcolor="#fff" style="margin-top: 0;margin-left: 0;margin-right: 0;margin-bottom: 0;">
         | 
| 19 | 
            +
                 
         | 
| 20 | 
            +
                
         | 
| 21 | 
            +
                
         | 
| 22 | 
            +
                <!-------------ヘッダーメニュー--------------->
         | 
| 23 | 
            +
              
         | 
| 24 | 
            +
             <center>   
         | 
| 25 | 
            +
                 <ul class="menu" style="list-style: none;">
         | 
| 26 | 
            +
                     <header class="site-header">   
         | 
| 27 | 
            +
                         <niv class="menu_item">
         | 
| 28 | 
            +
                             <li class="menu"><a href="home.html" alt="最初のページ">home</a></li>    
         | 
| 29 | 
            +
                             <li class="menu"><a href="map.html" alt="探索マップ">map</a></li> 
         | 
| 30 | 
            +
                             <li class="menu"><a href="" alt="キャラクター一覧">character</a></li> 
         | 
| 31 | 
            +
                             <li class="menu"><a href="" alt="章シナリオ">scenario</a></li> 
         | 
| 32 | 
            +
                             <li class="menu"><a href="" alt="関係者一覧">credit</a></li></niv> 
         | 
| 33 | 
            +
                     </header>
         | 
| 34 | 
            +
                 </ul>
         | 
| 35 | 
            +
                </center>
         | 
| 36 | 
            +
                
         | 
| 37 | 
            +
            <main>
         | 
| 38 | 
            +
                <div class="main-text">
         | 
| 39 | 
            +
                    <div class="img_a">
         | 
| 40 | 
            +
                        <img src="home_a.png" alt="メインビジュアル">
         | 
| 41 | 
            +
                    </div>
         | 
| 42 | 
            +
                    <p class="sabtitel">海の底から誰かの泣き声が聞こえる</p>
         | 
| 43 | 
            +
                 <p class="sabbtitel">海の底には国が秘密裏に作った共同実験所があるらしい<br>
         | 
| 44 | 
            +
                    そんな噂どうせどこかのSNSで生まれた陰謀論か何かだ<br>
         | 
| 45 | 
            +
                    なんて、この時の僕達はこれから起きるであろう悲劇の<br>
         | 
| 46 | 
            +
                    始まりの一端をだれも信じようとはしなかった 
         | 
| 47 | 
            +
                    </p>
         | 
| 48 | 
            +
                    
         | 
| 49 | 
            +
                    <p class="sabtitel2">「今から殺し合いをしていただきます」</p>
         | 
| 50 | 
            +
                 <p class="sabbtitel2">少女のような風貌の彼女がそう告げる。<br>
         | 
| 51 | 
            +
                     この場に集められただれもかれもが、そんなこと<br>
         | 
| 52 | 
            +
                     できるわけがないだろうと抗議の声を上げた<br>
         | 
| 53 | 
            +
                     今までの生活から一変した非現実に竦む足もそのまま<br>
         | 
| 54 | 
            +
                     さも当たり前のように話は勝手に進んでいくのであった
         | 
| 55 | 
            +
                    </p>
         | 
| 56 | 
            +
                    
         | 
| 57 | 
            +
                </div>
         | 
| 58 | 
            +
              
         | 
| 59 | 
            +
              
         | 
| 60 | 
            +
                
         | 
| 61 | 
            +
                <div class="titela">
         | 
| 62 | 
            +
                        <img src="home_2.png"alt="タイトル"></div>
         | 
| 63 | 
            +
                 <div class="nanasi">
         | 
| 64 | 
            +
                     <img src="nanasi.png" alt="ナナシ"></div>
         | 
| 65 | 
            +
                
         | 
| 66 | 
            +
                  <p class="tyui">Participation conditions</p>
         | 
| 67 | 
            +
                 <p class="tyui2">応募の際の注意事項</p>
         | 
| 68 | 
            +
                
         | 
| 69 | 
            +
                <div class="tyui01">
         | 
| 70 | 
            +
                        <img src="tyui01.png"alt="注意01"></div>
         | 
| 71 | 
            +
                
         | 
| 72 | 
            +
                
         | 
| 73 | 
            +
                <div class="tyui02">
         | 
| 74 | 
            +
                        <img src="tyui02.png"alt="注意01"></div>
         | 
| 75 | 
            +
                
         | 
| 76 | 
            +
                
         | 
| 77 | 
            +
                   <div class="tyui03">
         | 
| 78 | 
            +
                        <img src="tyui03.png"alt="注意01"></div>
         | 
| 79 | 
            +
                
         | 
| 80 | 
            +
                <div class="tyui04">
         | 
| 81 | 
            +
                        <img src="tyui04.png"alt="注意01"></div>
         | 
| 82 | 
            +
                
         | 
| 83 | 
            +
                 <p class="tyui3"> ー企画概要ー </p>
         | 
| 84 | 
            +
                
         | 
| 85 | 
            +
                 <div class="tyui4">
         | 
| 86 | 
            +
                     <p>・当企画は某ハイスピード推理リアクションゲームシリーズの世界観をお借りした二次創作企画になります。<br>
         | 
| 87 | 
            +
                ・本家様や実在の人物、企業等は関係ございません。<br><br>
         | 
| 88 | 
            +
                ・また、当企画は前作同様諸注意として、残酷な死亡表現、救いのないシナリオ、胸糞エンディングを<br>
         | 
| 89 | 
            +
                迎えることになると思われますがそれをご了承できる方のみの応募を推奨させていただきます。<br><br>
         | 
| 90 | 
            +
                ・前作:ORIRONPA ENTERの同一世界観の話となります。<br>
         | 
| 91 | 
            +
                前作に関しては未確認でも問題ない内容とはなっていますが、一点特殊な前提世界観がありますので<br>
         | 
| 92 | 
            +
                後ほど出す世界観内容を確認の上応募をお願いいたします。<br><br>
         | 
| 93 | 
            +
                ・現時点では6章編成、2週間周期での進行予定となっております。尚、当企画は生き返り企画ではありますが<br>
         | 
| 94 | 
            +
                前提とする胸糞エンディングに相違はございませんのでご安心ください<br><br>
         | 
| 95 | 
            +
                ・後ほど詳細として同義の文を本アカウントより出させていただきますが以上内容をご了承の上での<br>
         | 
| 96 | 
            +
                         応募のご検討をお願いいたします。<br><br></p></div>
         | 
| 97 | 
            +
            </main>
         | 
| 98 | 
            +
               
         | 
| 99 | 
            +
              
         | 
| 100 | 
            +
                
         | 
| 101 | 
            +
             
         | 
| 102 | 
            +
                
         | 
| 103 | 
            +
                
         | 
| 104 | 
            +
                <p class="aa">a</p>
         | 
| 105 | 
            +
            コード
         | 
| 11 106 | 
             
            ```
         | 
| 107 | 
            +
            ```
         | 
| 12 108 |  | 
| 109 | 
            +
            body{
         | 
| 110 | 
            +
                background: #1c1c23;
         | 
| 111 | 
            +
                height: 300px;
         | 
| 112 | 
            +
                
         | 
| 113 | 
            +
            }
         | 
| 114 | 
            +
             | 
| 115 | 
            +
             | 
| 116 | 
            +
            .example p {
         | 
| 117 | 
            +
              position: absolute;
         | 
| 118 | 
            +
              color: white;
         | 
| 119 | 
            +
              top: 0;
         | 
| 120 | 
            +
              left: 0;
         | 
| 121 | 
            +
              }
         | 
| 122 | 
            +
             | 
| 123 | 
            +
            .img_a img{
         | 
| 124 | 
            +
                maX-width: 100%;
         | 
| 125 | 
            +
                
         | 
| 126 | 
            +
                
         | 
| 127 | 
            +
            }
         | 
| 128 | 
            +
             | 
| 129 | 
            +
            .example img {
         | 
| 130 | 
            +
                 position:fixed;
         | 
| 131 | 
            +
                top: 0px;
         | 
| 132 | 
            +
                width: 100%;
         | 
| 133 | 
            +
              }
         | 
| 134 | 
            +
            .nanasi img {
         | 
| 135 | 
            +
                z-index: 2;
         | 
| 136 | 
            +
                position: absolute;
         | 
| 137 | 
            +
                transform: translate(0%, -15%);
         | 
| 138 | 
            +
                width: 100%;
         | 
| 139 | 
            +
                 margin: 0 auto;
         | 
| 140 | 
            +
                
         | 
| 141 | 
            +
            }
         | 
| 142 | 
            +
            .titela img {
         | 
| 143 | 
            +
                z-index: 2;
         | 
| 144 | 
            +
                 maX-width: 100%;
         | 
| 145 | 
            +
                position: absolute; 
         | 
| 146 | 
            +
                transform: translate(0%, -300%);
         | 
| 147 | 
            +
            }
         | 
| 148 | 
            +
                
         | 
| 149 | 
            +
            }
         | 
| 150 | 
            +
             | 
| 151 | 
            +
             | 
| 152 | 
            +
            .menu_item{
         | 
| 153 | 
            +
                z-index: 4;
         | 
| 154 | 
            +
                display: flex;
         | 
| 155 | 
            +
                 justify-content: center;
         | 
| 156 | 
            +
              flex-wrap: wrap;
         | 
| 157 | 
            +
                
         | 
| 158 | 
            +
            }
         | 
| 159 | 
            +
             | 
| 160 | 
            +
            .menu a{
         | 
| 161 | 
            +
                z-index: 4;
         | 
| 162 | 
            +
                color: #fff;
         | 
| 163 | 
            +
                text-decoration: none;
         | 
| 164 | 
            +
            font-family: 'Courier New';
         | 
| 165 | 
            +
                font-size: 25px;
         | 
| 166 | 
            +
                margin-left: 45px;
         | 
| 167 | 
            +
                
         | 
| 168 | 
            +
               
         | 
| 169 | 
            +
            }
         | 
| 170 | 
            +
             | 
| 171 | 
            +
             | 
| 172 | 
            +
            .site-header{
         | 
| 173 | 
            +
             z-index: 4;
         | 
| 174 | 
            +
                position: fixed;
         | 
| 175 | 
            +
                width: 100%;
         | 
| 176 | 
            +
            }
         | 
| 177 | 
            +
             | 
| 178 | 
            +
             | 
| 179 | 
            +
             | 
| 180 | 
            +
            ul {
         | 
| 181 | 
            +
                
         | 
| 182 | 
            +
            width: 100%;
         | 
| 183 | 
            +
             | 
| 184 | 
            +
            padding: 0;
         | 
| 185 | 
            +
             | 
| 186 | 
            +
            list-style-type: none;
         | 
| 187 | 
            +
             | 
| 188 | 
            +
            text-align: center;
         | 
| 189 | 
            +
                 z-index: 4;
         | 
| 190 | 
            +
                
         | 
| 191 | 
            +
            }
         | 
| 192 | 
            +
             ul li {
         | 
| 193 | 
            +
                 z-index: 4;
         | 
| 194 | 
            +
            display: inline-block; 
         | 
| 195 | 
            +
             | 
| 196 | 
            +
            line-height: 100%;
         | 
| 197 | 
            +
            }
         | 
| 198 | 
            +
            * { 
         | 
| 199 | 
            +
                margin: 0px; 
         | 
| 200 | 
            +
                padding: 0px; 
         | 
| 201 | 
            +
            }
         | 
| 202 | 
            +
             | 
| 203 | 
            +
             | 
| 204 | 
            +
             | 
| 205 | 
            +
             | 
| 206 | 
            +
            .main-text p{
         | 
| 207 | 
            +
                z-index: 1;
         | 
| 208 | 
            +
              position: absolute;   
         | 
| 209 | 
            +
                letter-spacing: 0.13em;
         | 
| 210 | 
            +
              color: #ffffff;
         | 
| 211 | 
            +
                background-color:rgba(255,255,255,0.2);
         | 
| 212 | 
            +
                
         | 
| 213 | 
            +
                
         | 
| 214 | 
            +
            }
         | 
| 215 | 
            +
             | 
| 216 | 
            +
            .sabtitel{
         | 
| 217 | 
            +
                 z-index: 1;
         | 
| 218 | 
            +
                  font-family: 'ヒラギノ角ゴ Std W8'; 
         | 
| 219 | 
            +
                font-size: 2.4vmax;
         | 
| 220 | 
            +
                transform: translate(0%, -1200%);
         | 
| 221 | 
            +
               width: 50%;
         | 
| 222 | 
            +
                position: absolute;
         | 
| 223 | 
            +
                padding-left: 20px;
         | 
| 224 | 
            +
                
         | 
| 225 | 
            +
              
         | 
| 226 | 
            +
                
         | 
| 227 | 
            +
                
         | 
| 228 | 
            +
            }
         | 
| 229 | 
            +
            .sabbtitel{
         | 
| 230 | 
            +
                 z-index: 1;
         | 
| 231 | 
            +
                  font-family: 'ヒラギノ角ゴ Pro W6'; 
         | 
| 232 | 
            +
                font-size: 1.6vmax;
         | 
| 233 | 
            +
                transform: translate(0%, -400%);  
         | 
| 234 | 
            +
                width: 50%;
         | 
| 235 | 
            +
                position: absolute;
         | 
| 236 | 
            +
                padding-left: 20px;
         | 
| 237 | 
            +
                
         | 
| 238 | 
            +
                
         | 
| 239 | 
            +
            }
         | 
| 240 | 
            +
             | 
| 241 | 
            +
            .sabtitel2{
         | 
| 242 | 
            +
                 z-index: 1;
         | 
| 243 | 
            +
                  font-family: 'ヒラギノ角ゴ Std W8'; 
         | 
| 244 | 
            +
                font-size: 2.4vmax;
         | 
| 245 | 
            +
               transform: translate(0%, -380%);
         | 
| 246 | 
            +
               width: 50%;
         | 
| 247 | 
            +
                position: absolute;
         | 
| 248 | 
            +
                padding-left: 20px;
         | 
| 249 | 
            +
                
         | 
| 250 | 
            +
              
         | 
| 251 | 
            +
                
         | 
| 252 | 
            +
                
         | 
| 253 | 
            +
            }
         | 
| 254 | 
            +
            .sabbtitel2{
         | 
| 255 | 
            +
                 z-index: 1;
         | 
| 256 | 
            +
                  font-family: 'ヒラギノ角ゴ Pro W6'; 
         | 
| 257 | 
            +
                font-size: 1.6vmax;
         | 
| 258 | 
            +
                transform: translate(0%, -65%);   
         | 
| 259 | 
            +
                width: 50%;
         | 
| 260 | 
            +
                position: absolute;
         | 
| 261 | 
            +
                padding-left: 20px;
         | 
| 262 | 
            +
                
         | 
| 263 | 
            +
                
         | 
| 264 | 
            +
            }
         | 
| 265 | 
            +
             | 
| 266 | 
            +
             | 
| 267 | 
            +
             | 
| 268 | 
            +
                
         | 
| 269 | 
            +
                
         | 
| 270 | 
            +
            }
         | 
| 271 | 
            +
            span{
         | 
| 272 | 
            +
                 z-index: 1;
         | 
| 273 | 
            +
                color: #f00078;
         | 
| 274 | 
            +
            }
         | 
| 275 | 
            +
             | 
| 276 | 
            +
            .button::before {
         | 
| 277 | 
            +
              position: absolute;
         | 
| 278 | 
            +
              top: 0;
         | 
| 279 | 
            +
              right: 0;
         | 
| 280 | 
            +
              bottom: 0;
         | 
| 281 | 
            +
              left: 0;
         | 
| 282 | 
            +
              z-index: -1;
         | 
| 283 | 
            +
              content: '';
         | 
| 284 | 
            +
              background: #fff;
         | 
| 285 | 
            +
              transform-origin: right top;
         | 
| 286 | 
            +
              transform: scale(0, 1.02);
         | 
| 287 | 
            +
              transition: transform .3s;
         | 
| 288 | 
            +
            }
         | 
| 289 | 
            +
            .button:hover::before {
         | 
| 290 | 
            +
              transform-origin: left top;
         | 
| 291 | 
            +
              transform: scale(1, 1.02);
         | 
| 292 | 
            +
            }
         | 
| 293 | 
            +
             | 
| 294 | 
            +
            .button {
         | 
| 295 | 
            +
                font-size: 2.0vmax;
         | 
| 296 | 
            +
                    top:    185%;
         | 
| 297 | 
            +
                right: 0%;
         | 
| 298 | 
            +
                 left: 65%;
         | 
| 299 | 
            +
              position: relative;
         | 
| 300 | 
            +
              display: inline-block;
         | 
| 301 | 
            +
              padding: .4em 2em;
         | 
| 302 | 
            +
              border: 6px solid #40b1aa;
         | 
| 303 | 
            +
              color: #40b1aa;
         | 
| 304 | 
            +
              text-align: right;
         | 
| 305 | 
            +
              text-decoration: none;
         | 
| 306 | 
            +
              transition: .3s;
         | 
| 307 | 
            +
                z-index: 5;
         | 
| 308 | 
            +
            }
         | 
| 309 | 
            +
            .button:hover {
         | 
| 310 | 
            +
                
         | 
| 311 | 
            +
              color: #40b1aa;
         | 
| 312 | 
            +
            }
         | 
| 313 | 
            +
             | 
| 314 | 
            +
            .tyui{
         | 
| 315 | 
            +
                font-family:'Avenir Next Condensed';
         | 
| 316 | 
            +
                font-size:  5.4vmax;
         | 
| 317 | 
            +
            color: #fff;
         | 
| 318 | 
            +
                letter-spacing: 5px;
         | 
| 319 | 
            +
            transform: translate(0%, 700%); 
         | 
| 320 | 
            +
            position: absolute;
         | 
| 321 | 
            +
            border: 0;
         | 
| 322 | 
            +
                text-align:center;
         | 
| 323 | 
            +
                left: 0;
         | 
| 324 | 
            +
                right: 0;
         | 
| 325 | 
            +
            margin: auto;
         | 
| 326 | 
            +
            }
         | 
| 327 | 
            +
             | 
| 328 | 
            +
            .tyui2{
         | 
| 329 | 
            +
                font-family:'Avenir Next Condensed';
         | 
| 330 | 
            +
                font-size: 2vmax;
         | 
| 331 | 
            +
            color: #fff;
         | 
| 332 | 
            +
                letter-spacing: 5px;
         | 
| 333 | 
            +
            transform: translate(0%, 1980%); 
         | 
| 334 | 
            +
            position: absolute;
         | 
| 335 | 
            +
                text-align:center;
         | 
| 336 | 
            +
                left: 0;
         | 
| 337 | 
            +
                right: 0;
         | 
| 338 | 
            +
            margin: auto;
         | 
| 339 | 
            +
            }
         | 
| 340 | 
            +
             | 
| 341 | 
            +
            .tyui01 img{
         | 
| 342 | 
            +
            transform: translate(50%, 250%); 
         | 
| 343 | 
            +
            position: absolute;
         | 
| 344 | 
            +
            width: 20%    
         | 
| 345 | 
            +
             
         | 
| 346 | 
            +
             | 
| 347 | 
            +
            }
         | 
| 348 | 
            +
             | 
| 349 | 
            +
            .tyui02 img{
         | 
| 350 | 
            +
            transform: translate(150%, 250%); 
         | 
| 351 | 
            +
            position: absolute;
         | 
| 352 | 
            +
            width: 20%    
         | 
| 353 | 
            +
             
         | 
| 354 | 
            +
             | 
| 355 | 
            +
            }
         | 
| 356 | 
            +
             | 
| 357 | 
            +
            .tyui03 img{
         | 
| 358 | 
            +
            transform: translate(250%, 250%); 
         | 
| 359 | 
            +
            position: absolute;
         | 
| 360 | 
            +
            width: 20%    
         | 
| 361 | 
            +
             
         | 
| 362 | 
            +
             | 
| 363 | 
            +
            }
         | 
| 364 | 
            +
             | 
| 365 | 
            +
            .tyui04 img{
         | 
| 366 | 
            +
            transform: translate(350%, 250%); 
         | 
| 367 | 
            +
            position: absolute;
         | 
| 368 | 
            +
            width: 20%    
         | 
| 369 | 
            +
             
         | 
| 370 | 
            +
             | 
| 371 | 
            +
            }
         | 
| 372 | 
            +
             | 
| 373 | 
            +
            .tyui3{
         | 
| 374 | 
            +
                font-family:'Avenir Next Condensed';
         | 
| 375 | 
            +
                font-size: 2vmax;
         | 
| 376 | 
            +
            color: #fff;
         | 
| 377 | 
            +
                letter-spacing: 5px;
         | 
| 378 | 
            +
            transform: translate(0%, 3200%); 
         | 
| 379 | 
            +
            position: relative;
         | 
| 380 | 
            +
                text-align:center;
         | 
| 381 | 
            +
                left: 0;
         | 
| 382 | 
            +
                right: 0;
         | 
| 383 | 
            +
            margin: auto;
         | 
| 384 | 
            +
            }
         | 
| 385 | 
            +
             | 
| 386 | 
            +
             | 
| 387 | 
            +
             | 
| 13 388 | 
             
            .tyui4{
         | 
| 14 389 | 
             
                overflow:auto;
         | 
| 15 390 | 
             
                margin:0 auto 20%;
         | 
| @@ -24,15 +399,23 @@ | |
| 24 399 |  | 
| 25 400 | 
             
            }
         | 
| 26 401 |  | 
| 27 | 
            -
             | 
| 28 402 | 
             
            .tyui4 p{ font-size: 1vw;
         | 
| 29 403 | 
             
                color:#fff;
         | 
| 30 404 | 
             
                text-align:left;
         | 
| 31 405 |  | 
| 32 406 |  | 
| 33 407 |  | 
| 408 | 
            +
            }
         | 
| 34 409 |  | 
| 410 | 
            +
            .aa{font-family: cursive;
         | 
| 411 | 
            +
            position: absolute;
         | 
| 412 | 
            +
            top:2700px;}
         | 
| 35 413 |  | 
| 414 | 
            +
               
         | 
| 415 | 
            +
               
         | 
| 416 | 
            +
                
         | 
| 417 | 
            +
             | 
| 418 | 
            +
             | 
| 36 419 | 
             
            ### 試したこと
         | 
| 37 420 |  | 
| 38 421 | 
             
            ここに問題に対して試したことを記載してください。
         | 
2
画像挿入
    
        title	
    CHANGED
    
    | 
            File without changes
         | 
    
        body	
    CHANGED
    
    | @@ -3,12 +3,13 @@ | |
| 3 3 | 
             
            サイト作成中他の画像や文字はtransform: translateで指定して位置が変わらないようにできたのですが、なぜかスライダー付き文章だけ幅を変更した際に位置が変わってしまいます。
         | 
| 4 4 | 
             
            ### 発生している問題・エラーメッセージ
         | 
| 5 5 |  | 
| 6 | 
            -
            
         | 
| 7 7 |  | 
| 8 8 |  | 
| 9 | 
            -
            ### css
         | 
| 9 | 
            +
            ### css html
         | 
| 10 10 |  | 
| 11 11 | 
             
            ```
         | 
| 12 | 
            +
             | 
| 12 13 | 
             
            .tyui4{
         | 
| 13 14 | 
             
                overflow:auto;
         | 
| 14 15 | 
             
                margin:0 auto 20%;
         | 
1
画像挿入
    
        title	
    CHANGED
    
    | 
            File without changes
         | 
    
        body	
    CHANGED
    
    | @@ -3,7 +3,9 @@ | |
| 3 3 | 
             
            サイト作成中他の画像や文字はtransform: translateで指定して位置が変わらないようにできたのですが、なぜかスライダー付き文章だけ幅を変更した際に位置が変わってしまいます。
         | 
| 4 4 | 
             
            ### 発生している問題・エラーメッセージ
         | 
| 5 5 |  | 
| 6 | 
            +
            ](b3e3ac31107adbcd5572ef83415152b8.png)](1ea7a9c86d757a56e86bb254bc673fe1.png)
         | 
| 6 7 |  | 
| 8 | 
            +
             | 
| 7 9 | 
             
            ### css
         | 
| 8 10 |  | 
| 9 11 | 
             
            ```
         | 
| @@ -28,9 +30,8 @@ | |
| 28 30 |  | 
| 29 31 |  | 
| 30 32 |  | 
| 31 | 
            -
            }](70cdaf01d45323f1c955edc8ac39b3d6.png)](0295563c3b5bc43322fee7c75819e397.png)
         | 
| 32 | 
            -
            ```
         | 
| 33 33 |  | 
| 34 | 
            +
             | 
| 34 35 | 
             
            ### 試したこと
         | 
| 35 36 |  | 
| 36 37 | 
             
            ここに問題に対して試したことを記載してください。
         | 
