ロト6

【41歳学習中_オリジナル】ロト6を当てたいサイト!#3 当選番号一覧表示(レイアウト調整)編

前回はテーブルから過去のロト6の結果を取得し、一覧で表示させるところまで作成しました。

今回は一覧表示を見やすくするため、cssなどを使ってレイアウトを整えたいと思います。

正直cssは理解度が低いのでそれなりの体裁になったら深追いせずに行きたいと思います。

目標としている機能

  • 【未完】入力した数字が過去に当たっているか検索できる
  • 【未完】当たっている場合は、抽選日、第何回、何等、当選金額を一覧表示する
  • 【未完】当たっていない場合は、残念風なコメントを表示させる

5月15日までに「やること」

  • 【完成】データベース作成
  • 当選しているかロジック作成
  • 表示画面作成(検索、結果) ←今回はココ

LOTO6結果一覧のレイアウトを調整する!

ざっくりとした流れ

  • CSSファイルの作成と呼び出し
  • 見出し行を作成する
  • 当選数字は縦書き
  • 数字はカンマで区切る

CSSファイルの作成と呼び出し

今回はpublicフォルダの直下にCSSフォルダを作成し、その中にstyle.cssファイルを作成した。

style.cssを呼び出すためにindex.blade.phpのheadタグ記載した。

見出し行の作成

通常の見出し行は水色に

tableというクラスの最初のtrに対して設定

なぜか見出し行1列目は赤に

前述のコードのthをth:nth-child(1)とすることで1列目だけの見出しを変更できた

当選金額はお金のイメージで黄色に

当選金額は15列目から19列目なのでth:nth-child(n+15):nth-child(-n+19)を使用した。

当選数字は縦書き

縦書き横書きを設定できるwriting-modeプロパティに「vertical-lr」。

-webkit-writing-modeのあたりは正直よくわからない。

vertical-lrは縦書きにしたものを左からならべる。

vertical-rlは縦書きにしたものを右から並べる。

日本語の場合vertical-rlにすること。

半角数字はヨコになってしまったから全角にしたゾ!

数字はカンマで区切る

数字のカンマ区切りはcssで対応できるかと思ったが、phpの「number_format」関数で解決できることが分かった。

完成

大分見やすくなりました!

課題

スクロールすると見出し行がなくなってしまう…

見出し行がなくなると、カラムも多いので何の数字か分からなくなってしまった。

いろいろやってみたが、上手くいかないので課題として保留する。

感想

良く分からないCSSをネットを参考にしながら作成した。

課題は残るものの見栄えは良くなったので良しとする。

  • この記事は東京在住の若干雨キャンパーが書きました

ame-sun

1982年生まれ東京都板橋区在住。

キャンプの日は雨が多い気がする。
あ、長男が2014年の大雪の日に生まれてからかも…
お宮参り、お食い初め、GWの旅行、ディズニーランドも…
キャンプ場に到着すると雨が降ってくる…

でも、運命だ。私は若干雨キャンパーでいく!

2021年からブログを始め、細く長く楽しみながら書いていきます。
どうぞ宜しくお願い致します( ̄へ ̄;)ゞ

■こんなブログです
キャンプ場+@(景色、温泉、川遊びなど)の紹介
キャンプ場リスト
高速IC(インターチェンジ)の周辺情報
 (同じIC周辺を都度調べてたので記事にしてみました♪)
キャンプ道具の紹介
子供と行ける遊び場の紹介 など

■キャンプ回数
 2022年 11回

※Amazonのアソシエイトとして、当メディアは適格販売により収入を得ています。

-ロト6