前提について

はじめまして、
プログラミングスクールに通ういりふねと申します。この記事は、スクールの課題である個人アプリの開発の記録を書くことで、自身のアウトプットに利用しています。もし、読んでいただけた方がいましたら、フィードバックをしていただけたら嬉しいです。

開発するのは「有給休暇管理ツール」です。仕様は過去記事をどうぞ。

アプリはデプロイまで行いますが、サービスとして提供するものではありません。あくまでも自学習の一環ですので、ご理解下さい。では本題へどうぞ。

今回実施する内容

前回までで、rootパスでアクセスし、「index.html.haml」を表示させることができました。今回は、この「index.html.haml」を編集し、メインのページを完成させます。作成するページは以下の通りです。
- ログイン中、常に表示されている左カラム
- メインページの有給休暇一覧表（内容は仮データ）
- メインページの有給休暇消化ログ

有給休暇一覧完成!!

まずは、メインページ部分です。左のカラムは、上部が社員の検索を行う検索窓、虫眼鏡のマークにsubmitを設定しています。それより下は、ユーザーが登録した支社が一覧で表示されている箇所と、消化ログや関連サイトのリンクなどがあります。
右側がメイン画面。header部分は、支社や社員の登録、有給休暇の消化登録をする部分になります。それより下は、有給休暇一覧となっております。１枚目の写真は、ほぼ全画面表示した状態。この状態ならば、表を一覧することができます。

続いて消化ログ

続いては、有給休暇の消化履歴を確認する消化ログ（履歴）です。　登録された順番に全データを表示しています。有給休暇一覧だけでは、いつごろ、何日間、どんな理由で有休を使用したかがわからなくなるので、作成することにしました。

ウインドウを縮めても表を崩したくない

メインの有給休暇一覧を作成していて、気づいたのですが、ウインドウを縮めると連動して文字が折り返してしまいます。ウインドウを縮めながら作業したい方もいると思うので、連動して縮小せず、横スクロールできるように設定することにしました。
参考にさせていただいた記事は、こちらです。

①tableを囲うdivに「overflow: auto;」を追加する
　これで、ウインドウを小さくしたときに自動的にスクロールバーが出てきます。

  &__body {
    ~ 省略 ~
    overflow: auto;
  }

②trとｔｈタグに表の幅を固定する記述を追加する
　trタグとthタグに「width」と「min-width」を設定します。幅を表す数値（今回は120px）は、同じ値を入れておきます。これで、基本的な実装は終了です。

tr {
  width: 120px;
  min-width: 120px;

  th {
    width: 120px;
    min-width: 120px;
    ~ 省略 ~
  }
}

③一部のセルの幅を変える
　上記の設定を行ってうまくいったのですが、名前や入社日が入るセルの幅に合わせて設定したので、残日数などのセルの幅が短くて良いものも無駄に長くなってしまいました。そこで、別途、セルの幅を短く固定していきます。

まずは、「_main.html.haml」内のセルの幅を短くしたいthタグにidを付与しました。

.main__body
  %table 
    %tr
      %th 氏名
      %th 入社日
      %th{id: "short"}
        付与日
     ~ 中略 ~
    %tr
      %th サンプル社員1
      %th 2019/04/01
      %th{id: "short"}
        10/01

次にcssの編集を行います。先程、html.hamlファイルに設定したidで、同じように幅を固定する記述を加えていきます。

tr {
  width: 120px;
  min-width: 120px;

  th {
    width: 120px;
    min-width: 120px;
    ~ 省略 ~
    #short {
      width: 80px;
      min-width: 80px;
    }
  }
}

ウインドウを縮めた結果

ウインドウを半分の大きさに縮めた結果、表は崩れずに横スクロールバーが表示されました。氏名と入社日以外のセルも80pxで表示されているようです。

今後実装したいこと

今後は、１行目や１列目を固定して、常にカラムや氏名が表示されている状態にしたいと考えております。これを行うためには、現在仮で入れているデータをなくして、正しくデータベースから表示されるようにしなければなりません。このまま仮データを無駄に増やしても後で削除するのが大変だからです。
そこで、メインページの作成は、ここまでとして次回からは、また機能の追加などを行っていきたいと思います。

今日の積み上げ

今回の記事で、初めてコードを表示させました。思ったよりも簡単でした。
参考にさせていただいた記事は、こちらです。