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

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

ただいまの
回答率

88.59%

HTML CSS デザインがうまくいかない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 727

agawa

score 13

困っていること

HTML・CSSを使って独学でWebページを作成しています。
以下のようなデザインにしたいのですが、色々試してもうまくいかず困っております。
どのようなコーディングにすれば希望通りのデザインになるのか、アドバイスいただけませんでしょうか。

以下の、「ああああ」「いいいい」「うううう」の文字およびアイコンとその下のコメント文が
青色シェードの中で左寄りに表示されているのを中央に表示させたいです。
イメージ説明
今書いているコードが大きく変わっても問題ないです。
よろしくお願いします。

現在書いているコード

<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample</title>
<link href="css/sample.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- Main Container -->
<div class="container"> 
  <!-- Navigation -->
  <header>
    <nav>
      <ul>
        <li><a href="#about"><img src="http://placehold.jp/98x27.png" alt="新規登録"></a></li>
        <li><a href="#hero"><img src="http://placehold.jp/98x27.png"  alt="ログイン"></a></li>
      </ul>
    </nav>
  </header>
  <!-- Hero Section -->
  <section class="topimage" id="topimage">
    <div class="imagecomment">
      <h2>あいうえおかきくけこ</h2>
    </div>
  </section>
  <!-- PickUp Section -->

  <h2 class="about_heading">タイトル</h2>
  <section class="about_body">
    <div class="about_merit">
      <div class="about_merititem">
        <h3 class="about_heading">ああああ</h3>
        <div class="about_meritmedia"> <img src="http://placehold.jp/160x160.png"  alt="ああああ"> </div>
        <h4 class="about_comment">テストテストテストテストテストテストテストテストテストテストテスト</h4>
      </div>
      <div class="about_merititem">
        <h3 class="about_heading">いいいい</h3>
        <div class="about_meritmedia"> <img src="http://placehold.jp/160x160.png" alt="いいいい"> </div>
        <h4 class="about_comment">テストテストテストテストテストテストテストテストテストテストテストテストテスト
                                   テストテストテストテストテストテストテスト</h4>
      </div>
      <div class="about_merititem">
        <h3 class="about_heading">うううう</h3>
        <div class="about_meritmedia"> <img src="http://placehold.jp/160x160.png" alt="うううう"> </div>
        <h4 class="about_comment">テストテストテストテストテストテストテストテストテストテストテスト</h4>
      </div>
    </div>
  </section>
  <!-- More Info Section -->
  <section class="banner"> </section>
  <!-- Footer Section -->
  <footer>
    <nav class="footer_menu">
      <ul class="footer_menu">
        <li class="footer_menu">
          <h1 class="footer_menu">〇〇〇について</h1>
        </li>
        <li class="footer_menu"><a href="#about">プライバシーポリシー</a></li>
        <li class="footer_menu"><a href="#about">利用箇所</a></li>
        <li class="footer_menu"><a href="#about">お問い合わせ</a></li>
      </ul>
    </nav>
  </footer>
  <!-- Copyrights Section -->
  <div class="copyright">&copy;2019 - <strong></strong></div>
</div>
<!-- Main Container Ends -->
</body>
</html>
@charset "UTF-8";
/* Body */
body {
    font-family: Quicksand,'游ゴシック体','Yu Gothic', YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', 'sans-serif';

    background-color: #f2f2f2;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    font-style: normal;
    font-weight: 200;
    font-size: 100%;
}
/* Container */
.container {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    background-color: #FFFFFF;
}
/* Navigation */
header {
    width: 100%;
    height: 60px;
    border-bottom: 0px;
}

nav {
    float: right;
    width: 50%;
    text-align: right;
    margin-right: 25px;
}
nav ul {
    list-style: none;
    float: right;
}
nav ul li {
    float: right;
    color: #FFFFFF;
    font-size: 18px;
    text-align: left;
    margin-right: 25px;
    letter-spacing: 2px;
    font-weight: normal;
    transition: all 0.3s linear;
}
ul li a {
    color: #FFFFFF;
    text-decoration: none;
}
ul li:hover a {
    color: #2C9AB7;
}

/* Hero Section */

.topimage {
    background-image: url("http://placehold.jp/1536x400.png");
    background-color: #B3B3B3;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 10px;
    padding-bottom: 200px;
}

.imagecomment {
    font-family: source-sans-pro, "ヒラギノ角ゴ Pro W3";
    font-size: 90%;
    color: #FFFFFF;
    text-align: left;
    margin-top: 200px;
    margin-left: 25%;
    margin-bottom: 0px;
    letter-spacing: 4px;
}

/* About Section */
.about_heading {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    text-align: center;
    font-weight: bold;
}

.about_body {
    padding-top: 20px;
    display: inline-block;
    padding-left: 10%;
    padding-right: 10%;
    background-color: #FFFFFF;
}

.about_merit{
    display: flex;
    float: center;
}

.about_merititem{
    width: 26%;
    padding-right: 25px;
    padding-left: 25px;

}

.about_comment {
    text-align: left;
    line-height: 1.5;
    font-size: 17px;
    font-weight: lighter;
}

.about_meritmedia{
    padding: 0 0.5px;
    text-align: center;
}

/* Parallax Section */
.banner {
    background-color: #B3B3B3;
    height: 120px;
}

/* More info */
footer {
    background-color: #021626;
    color: #FFFFFF;
    width: 100%;
    height: 250px;
    padding-bottom: 20px;
}

.footer_menu {
    font-family: Quicksand,'游ゴシック体','Yu Gothic', YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'MS Pゴシック', 'MS PGothic', 'sans-serif';
    width: 20%;
    text-align: left;
    padding-top: 3px;
    line-height: 25px;
    float: left;
    font-size: 100%;
}

nav .footer_menu {
    float: left;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

nav ul .footer_menu {
    list-style: none;
    float: left;
}
nav ul li .footer_menu {
    float: left;
    display: block;
    color: #FFFFFF;
    font-size: 18px;
    text-align: left;
    letter-spacing: 2px;
    font-weight: normal;
    transition: all 0.3s linear;
}

nav ul li a .footer_menu {
    text-align: left;
}

a .footer_menu:hover{
    color:#000000;
}

footer .footer_column p {
    color: #ffffff;
    padding-left: 30px;
    padding-right:0px;
    text-align: left;
    line-height: 25px;
    font-weight: lighter;
    margin-left: 20px;
    margin-right: 0px;
}

.copyright {
    text-align: right;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
    background-color: #717070;
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: lighter;
    letter-spacing: 2px;
    border-top-width: 2px;
    font-size: 14px;
}
.footer_banner {
    background-color: #000000;
    padding-top: 60px;
    padding-bottom: 60PX;
    margin-bottom: 0px;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2019/04/23 11:12

    imgファイルが肝の質問で画像が見えないのであれば挙動が確認できません
    http://placehold.jp/
    など利用して、画像が表示されるサンプルを書いてください

    キャンセル

  • m.ts10806

    2019/04/23 11:17

    初心者アイコンもありますし「初心者です」はタイトル上不要かと思います。
    https://teratail.com/help/question-tips#questionTips3-1
    > ありがちな失敗としては、「助けてください」「初心者です」という表題をつけてしまうことです。

    キャンセル

回答 1

checkベストアンサー

+3

多分これで思い通りの配置にはなるはず。
float: center;はありません。

.about_merit {
    display: flex;
    float: center;
}


.about_merit {
    display: flex;
    justify-content: center;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/23 12:13

    .about_merit{
    display: inline-block;
    text-align: left;
    }
    ・display:inline-block→自動改行されなくなり、ボックスが横並びとなる
    ・text-align: left →コンテンツを左詰めで配置

    なので、2つ合わさって質問時と同様な左寄り配置のレイアウトになったと思われます。
    ひとつ上の親要素.about_bodyでtext-align:centerとしているので、.about_meritでの
    text-align:leftを削除すればセンター寄せになると思います。

    ただ、inline-blockでの横並びは改行制御が難しいので、display:flexでコントロールするほうがおすすめです。

    キャンセル

  • 2019/04/23 12:27

    aKusanoさん、ありがとうございます!

    キャンセル

  • 2019/04/23 12:41

    kszk311さん、aKusanoさん

    ご回答いただきありがとうございます。
    text-align: leftを削除しても配置に変化がなくセンター寄せにならないのですが、
    そもそも自分がイマイチinline-blockについて理解できていないことが分かりました。
    もう少ししっかり勉強して色々試してみることにします。
    今回の件はaKusanoさんにいただいたご回答で解決しましたので解決済にします。
    ありがとうございました!

    キャンセル

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

  • ただいまの回答率 88.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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