実現したいこと
・video-3をvideo-2の様な表示をさせたい
・image-1を動画やモーショングラフィックの様に<p>の下に画像を表示させたい
発生している問題・分からないこと
上記2点のコード修正がわからない
該当のソースコード
HTML/CSS
1・HTML 2 3<!DOCTYPE html> 4<html lang="ja"> 5<head> 6 <meta name="description" content="動画クリエイター百恵のプロフィールサイトです。"> 7 <meta charset="utf-8"> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <link rel="stylesheet" href="style.css"> 10 <title>Yoshimura momoe</title> 11</head> 12 13<body> 14 <header> 15 <div id="menu"> 16 <h1 id="site-title">Yoshimura Momoe</h1> 17 <nav> 18 <div id="menu-1"> 19 <a class="menu-2" href="#work.html">work</a> 20 <a class="menu-2" href="#About.html">About</a> 21 <a class="menu-2" href="#contact.html">contact</a> <!-- 'clss' to 'class' --> 22 </div> 23 </nav> 24 </div> 25 </header> 26 27 <main> 28 <div id="main-1"></div> 29 <video id="video-1" src="image/main.mp4" controls></video> 30 <div id="main-2"> 31 <h2>work</h2> 32 <p>動画</p> 33 <div id="video-2"> 34 <video class="video-2" src="image/main1.mp4" controls></video> 35 <video class="video-2" src="image/main2.mp4" controls></video> 36 </div> 37 38 <div id="video-3"> 39 <p>モーショングラフィック</p> 40 <video class="video-3" src="image/main3.mp4" controls></video> 41 <video class="video-3" src="image/main4.mp4" controls></video> 42 </div> 43 44 <div id="image-1"> 45 <p>グラフィックデザイン</p> 46 <img class="image-1" src="image/main2.png" alt="graphic"> 47 <img class="image-1" src="image/main3.png" alt="graphic"> 48 <img class="image-1" src="image/main4.png" alt="graphic"> 49 </div> 50 51 <div id="portfolio"> 52 <h2>About</h2> 53 <img id="icon" src="image/icons.png" alt="icon"> 54 <p id="Introduction">ここは簡単な自己紹介文</p> 55 </div> 56 57 <div id="contact_address"> 58 <h2>お問い合わせ</h2> 59 <form> 60 <label>名前</label> 61 <input type="text" placeholder="名前を入力して下さい"> 62 <br> 63 <label>電話番号</label> 64 <input type="text" placeholder="(例)090-0000-0000"> 65 <br> 66 <label>メールアドレス</label> 67 <input type="text" placeholder="(例)0000@gmail.com"> 68 <br> 69 <label>住所</label> 70 <input type="text" placeholder="住所を入力して下さい"> 71 <br> 72 <label>お問い合わせ内容</label> 73 <textarea></textarea> 74 </form> 75 </div> 76 </div> 77 </main> 78 79 <footer> 80 <div id="others"> 81 <p>© Yoshimura Momoe All rights reserved.</p> 82 <img src="image/icons1.png" alt="instagram"> <!-- 'instgram' to 'instagram' --> 83 <img src="image/icons2.png" alt="YouTube"> 84 </div> 85 </footer> 86</body> 87</html> 88 89
CSS
1h1{2 font-size:20px;3}4 5h2{6 text-align: center;7 font-size:20px;8 margin:30px auto;9}10 11p{12 font-size:20px;13}14 15#menu {16 display: flex;17 justify-content: space-between;18 align-items: center;19 margin:10px 50px 10px 30px;20}21 22#menu-1 a {23 color: black;24 text-decoration: none; /* リンクの下線を削除する */25}26 27#video-1{28 display: block;29 margin: auto; 30 width:640px;31}32 33#video-2{34 display: flex;35 justify-content: space-between;36 align-items: center;37 margin:auto 50px;38}39 40.video-2,.video-3{41 width:500px;42}43 44#image-1 {45 display: flex; 46 justify-content: space-between;47 flex-wrap: wrap; /* 要素が折り返されるように設定 */48 margin: auto;49 width: fit-content; /* コンテナ幅を中身に合わせる */50}51 52.image-1 {53 width: 200px;54 margin: 10px;55}56 57 58
試したこと・調べたこと
上記の詳細・結果
cssで色々と試したができなかった
補足
特になし
0 コメント