カンプでは以下のようにデザインをしたのですが、(ヘッダー部分とWELLCOM、と表記している半透明の領域が被る)
このように重ねて表示するにはCSSのみでは難しいでしょうか?
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>PORTFOLIO</title> <link rel="stylesheet" href="./css/normalize.css"> <link rel="stylesheet" href="./css/main.css"> <script src="./js/vendor/jquery-1.10.2.min.js"></script> <script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script> <script src="./js/main.js"></script> </head> <body> <section id="top"> <div id="big_bg"> <header class="main_header"> <nav> <ul> <li><a href="#main">Top</a></li> <li><a href="#works">Works</a></li> <li><a href="#profile">Profile</a></li> <li><a href="#profile">Profile</a></li> </ul> </nav> </header> <main id="main"> <div class="board"> <h1>WELLCOME</h1> <p> <br> WEB site</p> <h2>SNS</h2> <a href="https://twitter.com/shinitei_njnj"><img src="./img/twitter.png" width="150px" height="150px"></a> <a href="https://www.instagram.com/xiachuan.lin/"><img src="./img/instagram.png" width="150px" height="150px"></a> </div> </main> </div> </section>
@charset "utf-8"; * { margin: 0px; padding: 0px; } body{ font-family: Impact,Charcoal; color: white; } h1{ font-size: 90px; color: black; } h2{ font-size: 50px; } #works, #profile, fotter{ height: 1080px; background-color: #333333; } header{ background-color: rgba(0,0,255,0.5); padding: 0 2%; } header ,nav ul{ display:flex; } a{ text-decoration: none; color: white; } /* main */ #big_bg{ height: 1080px; background-color: #FF00FF; background-image: url("../img/top.png"); background-repeat: no-repeat; } nav ul{ width: 700px; justify-content: space-around; } nav ul li{ list-style: none; } nav ul li a{ font-size: 80px; color: white; } .board{ text-align:right; float: right; padding-right: 5%; background-color: rgba(0,127,255,0.5); height: 1080px; width: 40%; } .board p{ font-size: 3rem; }
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。