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

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

ただいまの
回答率

89.87%

2つのフォームボックスの右側に年、月の文字を配置したいです。

解決済

回答 1

投稿 編集

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

honki86

score 2

読みづらい所あるかと思いますがご容赦ください。私はプログラミング初学者で、現在学習課題である、
Railsでフリマサイトアプリの作成中です。新規会員ページフロントマークアップのみのビューを確認したところ。CSSが効いていない箇所があるのですが原因が自分の力では見つけられず、質問いたしました。

イメージ説明

●実現したいこと

上記画像のように各フォームボックスの右側に、年、月の文字を表示させたいです。しかしながら下写真のように
イメージ説明

●仮説とそれを元に行なった作業
親要素である.expiration_day_yearの子year.expiration_day_monthの子month
に親要素からCSSでdisplay: flex;を当てれば年、月が箱から出せると思ったのですが、うまくいきません。

●調べたこと、仮説を元に行なった作業

ragistration_data_4.html.haml

.content
  .five_stage_header
    .logo
      =link_to root_path do
        = image_tag "fmarket_logo_red.svg", size: "185x49", alt: "フリマのアイコン"
  .payment_main
    .center_box
      .regist-title
        支払い方法
      .card_number
        .box
          .box_in
            %label{for: "name"} カード番号
            %span.form-require 必須
            .form
            .iconsここにアイコン
      .expiration_date
        %label{for: "name"} 有効期限
        %span.form-require 必須
        .expiration_day_year
          .year
            年
        .expiration_day_month
          .month
            月
        .security_code
          .in_box
            .in_block
              %label{for: "name"} セキュリティーコード
              %span.form-require 必須
              .code_box
              <a href="/jp/tos_list/" target="_blank">●カード裏面の番号とは?</a>
              .next_btn
                %button.u-box.btn-red{type: "submit"} 次へ進む


  .footer      
    .footer_center
      プライバシーポリシー メルカリ利用規約 特定商取引
      .gray
        =link_to root_path do
          = image_tag "logo_gray.svg", size: "80x65", alt: "フリマのアイコン"
      .inc © Mercari, Inc.

コード

ragistration_data4.scss

.content {
  .five_stage_header {
    height: 128px;
    .logo {
      text-align: center;
      line-height: 90px;
      padding-top: 40px;
    }
  }
  .payment_main {
    height: 100vh;
    .center_box {
      width: 700px;
      height: 100%;
      margin: 0 auto;
      background-color: #ffffff;
      padding: 0px 16px 40px;
      .regist-title {
        height: 97px;
        text-align: center;
        font-size: 22px;
        padding: 32px;
        background-color: #ffffff;
        border-bottom: 1px solid #f5f5f5;
      }
    }
  .card_number {
    .box {
      max-width: 343px;
      height: 180px;
      margin: 0 auto;
      font-size: 14px;
      font-weight: bold;
      .box_in {
        height: 70px;
        background-color: white;
        padding-top: 30px;
        .form {
          height: 50px;
          margin: 0 auto 16px;
          width: 100%;
          height: 48px;
          padding: 10px 16px 8px;
          border-radius: 4px;
          border: 1px solid #ccc;
          background: white;
          line-height: 1.5;
          font-size: 16px;
        }
      }
      .icons {
      max-width: 343px;
      height: 48px;
      background-color: red; 
      }
    }
    }
    .expiration_date {
      width: 343px;
      height: 100vh;
      margin: 0 auto;
      .expiration_day_year {
        width: 343px;
        height: 56px;
        padding-top: 30px;
        display: flex;
        margin: 0 auto;
        .year {
        width: 80px;
        height: 48px;
        border-radius: 4px;
        border: 1px solid #ccc;
        background: white;
          .nen {
          width: 20px;
          height: 20px;
          }
        }
      }
        .expiration_day_month {
          width: 343px;
          height: 56px;
          padding-top: 30px;
          display: flex;
          margin: 0 auto;
          .month {
            width: 80px;
            height: 48px;
            border-radius: 4px;
            border: 1px solid #ccc;
            background: white;
            display: flex;
              .tsuki {
              width: 20px;
              height: 20px; 
            }
          }         
        }
      }
    }
      .security_code {
        max-width: 343px;
        height: 100px;
        margin: 0 auto;
        .in_box {
          max-width: 343px;
          height: 100px;
          margin: 0 auto;
          font-size: 14px;
          font-weight: bold;
          .in_block {
            // width: 343px;
            height: 70px;
            background-color: #ffffff;
            margin-top: 50px;
            .code_box {
              height: 50px;
              // width: 343px;
              margin: 0 auto 16px;
              width: 100%;
              height: 48px;
              padding: 10px 16px 8px;
              border-radius: 4px;
              border: 1px solid #ccc;
              background: white;
              line-height: 1.5;
              font-size: 16px;
          }
        }
      }
    }
    .u-box.btn-red {
      width: 343px;
      height: 50px;
      background: #ea352d;
      border: 1px solid #ea352d;
      color: #fff;
      margin: 24px 0 0;
      font-size: 14px;
    }
    .form-require {
      background-color: red;
      color: white;
      font-size: 12px;
    }
  }
  .footer { 
    width: 456px;
    height: 220px;
    margin: 0 auto;
    .footer_center {
      height: 220px;
      width: 456px;
      background-color: #EEEEEE;
      color: #333;
      text-align: center;
      display: inline-block;
      margin:0 auto;
      font-size: 13px;
      padding-top: 50px;
        .gray {
        margin:0 auto;
        }
        .inc {
        font-size: 13px;
        color: black;
      }
    }
  }

コード
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • yambejp

    2020/01/15 20:10

    初学者とのことですが、hamlとscssはマストなのでしょうか?
    まずはhtmlとcssで組むところから始めるという選択肢はないのですか?

    キャンセル

  • honki86

    2020/01/15 20:21

    回答ありがとうございます!!
    理解が足りていないならなおさら基本を押さえた上でこの記法を学ぶべきだと思います。
    しかしこの課題はhaml、sass記法を指定されており自分一人では解決できず質問に至りました。

    キャンセル

  • yambejp

    2020/01/15 20:29

    なるほど課題ですか・・・では仕方ないですね

    キャンセル

  • m.ts10806

    2020/01/15 22:41

    であれば、タグにRailsとSCSSは入れておくべきと思います。

    キャンセル

回答 1

checkベストアンサー

0

        .expiration_day_year
          .year


上記で年がボックスの中に入ってしまうのは、が .yearボックスの子要素になっているのが原因でしょう。2つを並べたいのなら兄弟要素にすればいいでしょう。
あとCSSを見るとには.nenクラスを当てたいのだと思われますので、下記のようにしましょう。

        .expiration_day_year
          .year
          .nen


関しても同様に、

        .expiration_day_month
          .month
          .tsuki

CSSも .year と .nen は親子にせずに並列に記述してください。
あと垂直位置をセンターに設定しておくといいでしょう。
さらに年と月のCSS設定は同じなのでまとめて設定すると無駄がないです。

      .expiration_day_year, .expiration_day_month {
        width: 343px;
        height: 56px;
        padding-top: 30px;
        display: flex;
        align-items: center; /*垂直位置センター*/
        margin: 0 auto;
        .year, .month {
        width: 80px;
        height: 48px;
        border-radius: 4px;
        border: 1px solid #ccc;
        background: white;
        }
        .nen, .tsuki {
          width: 20px;
          height: 20px;
        }
      }

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/01/16 14:01

    ありがとうございます!
    ネストとインデントに苦しめられていたので勉強になります!

    キャンセル

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

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

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