最適なコードにするためにアドバイスを頂けると幸いです。
すっきりとしていて見やすいコードにしたいのですが、勉強不足で間違っている部分があると思いますのでご指摘いただけると幸いです。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Portfolio Site</title><!--タイトル--> <meta name="description" content="ポートフォリオサイト"><!--説明--> <link rel="icon" type="image/png" href="img/○○"><!--ロゴ--> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <link href="css/style.css" rel="stylesheet"> <link href="css/responsive.css" rel="stylesheet"> <!--font--> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <!--Roboto Slab--> <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300&display=swap" rel="stylesheet"> <!--Arizonia--> <link href="https://fonts.googleapis.com/css2?family=Arizonia&family=Fredericka+the+Great&family=Genos&family=Major+Mono+Display&display=swap" rel="stylesheet"> <!--Ubuntu--> <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <div class="SiteWrapper"> <div class="home"> <header> <div class="home-header"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="works.html">Works</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </header> <main> <div class="home-text"> <p>タイトル</p> </div> </div> <div class="home-about"> <div class="home-title"> <p>ABOUT</p> </div> <div class="home-about-cell"> <div class="home-about-img"> <img src="img/画像.png" alt="エンジニアのイラスト"> </div> <div class="home-about-myself"> <div class="home-about-name"> <p>名前</p> </div> <div class="home-about-intro"> <p>高校3年生のときに、プログラミングに興味を持ち、勉強を開始</p> <p>2021年 ○○大学○○学部入学</p> </div> </div> </div> </div> <div class="home-works"> <div class="home-title"> <p>WORKS</p> </div> <div class="home-works-all"> <div class="home-works-cell"> <a href="#"> <img src="img/Sample1.png" alt=""> <p>アパレルショップHP</p> </a> </div> <div class="home-works-cell"> <a href="#"> <img src="img/j306_2_21.jpg" alt=""> <p>タイトル</p> </a> </div> <div class="home-works-cell"> <a href="#"> <img src="img/j306_2_21.jpg" alt=""> <p>タイトル</p> </a> </div> </div> <div class="home-works-all"> <div class="home-works-cell"> <a href="#"> <img src="img/j306_2_21.jpg" alt=""> <p>タイトル</p> </a> </div> <div class="home-works-cell"> <a href="#"> <img src="img/j306_2_21.jpg" alt=""> <p>タイトル</p> </a> </div> <div class="home-works-cell"> <a href="#"> <img src="img/j306_2_21.jpg" alt=""> <p>タイトル</p> </a> </div> </div> <div class="home-works-all"> <div class="home-works-cell"> <a href="#"> <img src="img/j306_2_21.jpg" alt=""> <p>タイトル</p> </a> </div> <div class="home-works-cell"> <a href="#"> <img src="img/j306_2_21.jpg" alt=""> <p>タイトル</p> </a> </div> <div class="home-works-cell"> <a href="#"> <img src="img/j306_2_21.jpg" alt=""> <p>タイトル</p> </a> </div> </div> </div> <div class="home-contact"> <div class="home-title"> <p>CONTACT</p> </div> <div class="form"> <div class="form-item"> <p class="form-item-label"><span class="form-item-label-required">必須</span>氏名</p> <input type="text" class="form-item-input" placeholder="例)山田太郎"> </div> <div class="form-item"> <p class="form-item-label"><span class="form-item-label-required">必須</span>メールアドレス</p> <input type="email" class="form-item-input" placeholder="例)example@gmail.com"> </div> <div class="form-item"> <p class="form-item-label isMsg"><span class="form-item-label-required">必須</span>お問い合わせ内容</p> <textarea class="form-item-textarea"></textarea> </div> <input type="submit" class="form-btn" value="送信する"> </div> </div> </main> <footer> <div class="footer"> <p><small>© 2021 ALL rights reserved.</small></p> </div> </footer> </div> <script src="script.js"></script> </body> </html>
CSS
@charset "UTF-8"; /*共通 ------------------------------*/ html { font-size: 100%; } a { text-decoration: none; color: #000; } img { max-width: 100%; } .SiteWrapper { min-height: 100vh; } /*HEADER ------------------------------*/ /*HOME ------------------------------*/ .home { height: 100vh; background-image: url("../img/emile-perron-xrVDYZRGdw4-unsplash.jpg"); background-repeat: no-repeat; background-size: cover; } .home-header { height:80px; } .home-header ul { display: flex; list-style: none; float: right; padding: 20px 20px; } .home-header a { font-size: 1.5rem; color: #000; padding: 0 10px; font-family: 'Roboto Slab', serif; font-weight: bold; } .home-header a:hover { color: #00a1e9; } .home-text p { font-size: 9rem; font-family: 'Arizonia', cursive; color: #fff; font-weight: bold; margin: 180px auto; text-align: center; } .home-title { font-size: 2.0rem; font-weight: bold; font-family: 'Ubuntu', sans-serif; text-align: center; letter-spacing: 10px; padding: 60px; } .home-about { padding: 0 10%; background-color: #eaeaea; } .home-about-cell { display: flex; } .home-about-img { width: 50%; } .home-about-img img { width: 400px; margin: 40px 0 50px 70px; } .home-about-myself { width: 50%; } .home-about-name { font-size: 2.0rem; font-weight: bold; font-family: 'Ubuntu', sans-serif; word-break: break-all; margin: 30px 0; } .home-works { margin-bottom: 50px; } .home-works-all { display: flex; justify-content: center; } .home-works-cell { background-color: #e7e7e7; width: 350px; height: 280px; margin: 10px 20px; } .home-works-cell img { margin: 10px 10px; width: 330px; height: 184.765px; } .home-works-cell p { padding-top: 10px; text-align: center; } .home-contact { background-color: #2c2c2c; color: #fff; } .form { margin: 0 auto; padding-bottom: 50px; max-width: 720px; } .form-item { border-top: 1px solid #ddd; padding: 24px 0; width: 100%; display: flex; align-items: center; } .form-item:nth-child(5) { border-bottom: 1px solid #ddd; } .form-item-label { width: 100%; max-width: 248px; letter-spacing: 0.05em; font-size: 18px; } .form-item-label.isMsg { margin: 8px 0 auto 0; } .form-item-label-required { border-radius: 6px; margin-right: 8px; padding: 8px 0; width: 48px; display: inline-block; text-align: center; background-color: #00a1e9; color: #fff; font-size: 14px; } .form-item-input { border: 1px solid #ddd; border-radius: 6px; margin-left: 40px; padding: 0 1em; height: 48px; flex: 1; width: 100%; max-width: 410px; background: #eaedf2; font-size: 18px; } .form-item-textarea { border: 1px solid #ddd; border-radius: 6px; margin-left: 40px; padding: 0 1em; height: 216px; flex: 1; width: 100%; max-width: 410px; background-color: #eaedf2; font-size: 18px; } .form-btn { border-radius: 6px; margin: 32px auto 0 auto; padding: 20px; width: 280px; display: block; letter-spacing: 0.05em; background-color: #00a1e9; color: #fff; font-weight: bold; font-size: 20px; } .contact-ex { text-align: center; } /*FOOTER ------------------------------*/ .footer { background-color: #000; color: #fff; text-align: center; }
まだ回答がついていません
会員登録して回答してみよう