Moeno's Portfolio link

フッターの作成をしました。

フッターを横画面いっぱいにするために、margin-left: calc(-50vw + 50%);というCSSを記入。
"clac"とは、css内で数学的な計算を行うための関数である。
計算式を説明すると、「(親要素のコンテンツ幅の半分ーブラウザ幅の半分)」となり、この指定をすると要素をブラウザ端まで広げることができる。

                HTML
                    <footer id="footer">
  
                        <h3>Contact</h3>
                        <div>
                          <p>TEL: 03-1234-5678</p>
                          <p>Email: info@mocoffee.jp</p>
                        </div>
                      
                        <h3>Follow Us</h3>
                      
                        <div>
                          <p>&copy; 2024 MO coffee. All rights reserved.</p>
                        </div>
                      
                      </footer>
                
            
                CSS
                    footer {
                        margin: auto;
                        margin-left: calc(-50vw + 50%);
                        clear: both;
                        font-size: 0.75rem;	/*文字サイズ*/
                        text-align: center;
                        padding: 3%;	/*余白*/
                        background-color: #1c305c;
                        color:#fcfafa;	/*文字色*/
                        width:100vw
                      }
                
            

制作HP