teratail
回答率
87.20%
質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

新規登録して質問してみよう
ただいま回答率
87.20%
トップCSS3に関する質問
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

受付中

最適なコード化するために

Hiroto_4431
Hiroto_4431

総合スコア7

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1回答

-7評価

0クリップ

431閲覧

投稿2022/01/25 15:44

最適なコードにするためにアドバイスを頂けると幸いです。
すっきりとしていて見やすいコードにしたいのですが、勉強不足で間違っている部分があると思いますのでご指摘いただけると幸いです。

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>&copy 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;
}

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806
m.ts10806

2022/01/25 21:02

現状の問題点や目指すイメージが欲しいです。 いずれにしても、要件通りのレイアウトが実現できていて不具合がないなら 構わないと思います。 ゴールは１つかもしれませんがルートは無数にあります。 「最適」というのは存在しないものと考えて良いです。
m.ts10806
m.ts10806

2022/01/25 21:03

それに・・ご自身で「間違っている部分がある」という自覚があるのでしたら、 「どうなったら正しい」というのを提示しないことには他者には手が出せません。 技術があってもコードから要件を正確にくみ取るのは他者には不可能です。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

トップCSS3に関する質問

最適なコード化するために