前回、開幕前ということで2018年用にファイルをコピーしたり簡単な修正をしたりして、とりあえずのセッティングをしました。
本当に簡単に修正しただけで終わってしまいましたので、今回は少し見栄えを考えようかなと思いまして。
なので、プログラミングというよりはスタイルシート(css)やhtmlなどのコーディング回という感じになります。
これをもとに、プログラムの修正をして、シーズンインしたいなという考えですね。
ざっくりとイメージを作成してみる
目標はこんな感じ
- PCで見た際には、画面中央によせて、トップ10のランキング表示とその下にボタンチックに各レース結果のリンクがイイ感じに配置されている
- 簡単なレスポンシブを組み、スマホでの表示の最適化をしておく
うーん、まだまだシンプル極まりないんですが、スマホ対応にしておくことで外出先で確認したいときにスッキリ見えるようにしたかったんですよね。
自分でやっておいてなんですが、見にくかったし醜かったので(;´･ω･)
ということで、chromeのデベロッパーツールを使いながらサクッとイメージを整えてみました。
まずはPC表示だと
こんな感じ。外の枠線は画像を見やすいように加工しただけで、実装はしないつもり。
GPのリザルトが増えていくとボタンも増えていくような仕組み（つまり、終わったレースからボタンを追加）。これはスマホでも同様。
次にスマホでのイメージはこんな感じ。ちょっと長い画像なんですが…
とまあ、ボタンの並びが2列に変更となり、スマホサイズではタップしやすいように大き目な感じになるといいなというぐらいで。
これをcssで書いてみたいと思います。
元となるhtml
html自体は昨年の最終戦後に生成したtop10のhtmlを使い、cssを外部化して加工していきました。
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”content-language” content=”ja”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”css/normalize.css”>
<link rel=”stylesheet” href=”css/style.css”>
<title>F1 | 2018 ポイントランキングtop10</title>
<body>
<header><h1>2018 ポイントランキングtop10</h1></header>
<div id=”main”>
<!– content –>
<div class=”top10″>
<ul>
<li>
<div class=”drivername”>Lewis Hamilton</div>
<div class=”point”>363</div>
</li>
<li>
<div class=”drivername”>Sebastian Vettel</div>
<div class=”point”>317</div>
</li>
<li>
<div class=”drivername”>Valtteri Bottas</div>
<div class=”point”>305</div>
</li>
<li>
<div class=”drivername”>Kimi Räikkönen</div>
<div class=”point”>205</div>
</li>
<li>
<div class=”drivername”>Daniel Ricciardo</div>
<div class=”point”>200</div>
</li>
<li>
<div class=”drivername”>Max Verstappen</div>
<div class=”point”>168</div>
</li>
<li>
<div class=”drivername”>Sergio Perez</div>
<div class=”point”>100</div>
</li>
<li>
<div class=”drivername”>Esteban Ocon</div>
<div class=”point”>87</div>
</li>
<li>
<div class=”drivername”>Carlos Sainz</div>
<div class=”point”>54</div>
</li>
<li>
<div class=”drivername”>Felipe Massa</div>
<div class=”point”>43</div>
</li>
</ul>
<p>※ AbuDhabi GP 終了時点</p>
</div>
<div class=”gpresult”>
<ul>
<li><a href=’result/Australia GP result.html’>Australia GP result</a></li>
<li><a href=’result/China GP result.html’>China GP result</a></li>
<li><a href=’result/Bahrain GP result.html’>Bahrain GP result</a></li>
<li><a href=’result/Russia GP result.html’>Russia GP result</a></li>
<li><a href=’result/Spain GP result.html’>Spain GP result</a></li>
<li><a href=’result/Monaco GP result.html’>Monaco GP result</a></li>
<li><a href=’result/Canada GP result.html’>Canada GP result</a></li>
<li><a href=’result/Azerbaijan GP result.html’>Azerbaijan GP result</a></li>
<li><a href=’result/Austria GP result.html’>Austria GP result</a></li>
<li><a href=’result/GreatBritain GP result.html’>GreatBritain GP result</a></li>
<li><a href=’result/Hungary GP result.html’>Hungary GP result</a></li>
<li><a href=’result/Belgium GP result.html’>Belgium GP result</a></li>
<li><a href=’result/Italy GP result.html’>Italy GP result</a></li>
<li><a href=’result/Singapore GP result.html’>Singapore GP result</a></li>
<li><a href=’result/Malaysia GP result.html’>Malaysia GP result</a></li>
<li><a href=’result/Japan GP result.html’>Japan GP result</a></li>
<li><a href=’result/UnitedStates GP result.html’>UnitedStates GP result</a></li>
<li><a href=’result/Mexico GP result.html’>Mexico GP result</a></li>
<li><a href=’result/Brazil GP result.html’>Brazil GP result</a></li>
<li><a href=’result/AbuDhabi GP result.html’>AbuDhabi GP result</a></li>
</ul>
</div>
</div>
<footer>
<a href=”https://tks-kan.com”>tks-kan.com</a>
</footer>
</body>
</head>
変更点としては
スマホでの表示崩れを防ぐためにビューポートを設定。
さらに、CSSを外部化して修正をしやすくしたいので
linkタグにてcssファイルを指定。cssフォルダを用意して、その中にノーマライズとスタイルのファイルを入れておくことに。
さらに、
後々のことを考えてレース結果を保存する先をhtmlフォルダからresultフォルダに名前を変更したいので、リンク先も同様に変更。
ヘッダーフッターのタグを追加し、さらにメイン部分にdivとID”main”を付与。top10のリスト部分にdivとクラス”top10”を付与、レース結果へのボタン表示部分にもdivとクラス”gpresult”を付与しました。
ざっくりと変更点を書きましたが、これをいずれ生成するプログラムにも反映させないと…それはまあ、次回ということで。
スタイスシートを書いていく
外部にスタイルシートファイルを持っていくので、いままで中に書いていた
これを切り抜いて新しいファイルにペースト（もちろんファイル名はstyle.cssで）。
これを元に改造していきます。
- まずは全体的にボックス系の表示ずれを減らすためにもbox-sizingを指定しちゃいます。
* { -webkit-box-sizing: border-box; box-sizing: border-box;}
box-sizingの簡単な説明は以下をご覧くださいませ～。
- PC表示でセンタリングしておきたいのでページの横幅をある程度固定させてしまいます（max-width）。
- h1タグの文字をセンターリング
これはtext-align: center;で実装
- リスト部分に灰色のアンダーラインを引く
border-bottomで実装。ちなみにdisplay: flex;になっているのは、順位、ドライバー名、ポイントの各文字を横並びに表示させるため。
ここまでの状態をみてみると…
こんな感じになってます。では引き続き。
- top10部分の修正は中央表示と終了時点の文字を右下に移動、細かい位置の修正
ランキング部分の横幅をスマホサイズ（ここでは320pxにしました）ぐらいに固定してしまい、margin: 0 auto;でセンタリング。
文字の右下移動はtext-align: right;で。他、表示位置の調整はmargin、paddingで。
.top10 p { text-align: right; padding-right: 1rem;}
.top10 ul div { margin-right: 1rem;}
- aタグの青文字を黒に変更、アンダーラインを消して、さらにスマホでタップしやすいように
color: black;で色変更、アンダーラインはtext-decorationにて、タップしやすくするにはblockにします。
整ってきましたね♪
- フッターを軽く装飾
テキストをセンタリング、ライトブルーに色付けして、上側にmargin、上下padding追加
- レース単位のリザルト（リンク部分の処理）
これはgridを使用してみました。
PC表示では3列にしてます。
さらにリストにはアンダーラインが灰色で入っているので、薄い灰色で全体を塗ることで立体チックなボタン表現に。
他、marginやpaddingで表示の調整。
.gpresult ul li {background-color: lightgray; padding: 0 1rem;}
と、これでPC用の調整は完了。実際に表示させると
これでPC版はOK
レスポンシブというほとじゃないけども…
スマホ対応はレスポンシブにて。
メディアクエリにて幅768px以下の時にボタン部分の表示を3列から2列に変更します。
押しやすいように縦幅を3remにて指定してあげます。
.gpresult ul { grid-template-columns: 1fr 1fr;}
.gpresult ul li { height: 3rem; }
}
追加したのはこれだけ。
レスポンシブというほとじゃないですね(;´･ω･)
ということで、表示させてみると…
ファブレット幅（768px）
スマホ幅
とまあ、ほぼイメージ通りにコーディング完了。
cssはこんな感じ
というわけで、css全体を書き出してみるとこんな感じになってます。
body { counter-reset: drivername; width: 100%; max-width: 720px; margin: 0 auto;}
h1 { text-align: center;}
li { display: flex; border-bottom: 1px solid gray; padding-left: 2rem;}
.top10 ul { width: 320px; margin: 0 auto; padding: 0;}
.top10 p { text-align: right; padding-right: 1rem;}
.top10 ul div { margin-right: 1rem;}
.drivername, .team { width: 12rem;}
.country { width: 6rem;}
.drivername:before {
counter-increment:drivername; content:counter(drivername) “位 ”;
display: inline-flex; width: 3rem;
}
a { text-decoration: none; color: black; display: block; width: 100%; text-align: center;}
.gpresult ul { display: grid; grid-gap: 1rem; grid-template-columns: 1fr 1fr 1fr; margin: 0 1rem; padding: 0;}
.gpresult ul li {background-color: lightgray; padding: 0 1rem;}
footer { text-align: center; margin: 1rem 0 0; background-color: lightblue; padding: 1rem 0;}@media screen and (max-width: 768px) {
.gpresult ul { grid-template-columns: 1fr 1fr;}
.gpresult ul li { height: 3rem; }
}
※インデントがずれてみずらいので、最後にファイルもアップしておきます。
まとめ
今回はここまでです。
ざっとイメージにあわせたコーディングができたんじゃないでしょうか？
これを元にして（ま、css部分は外部化してしまう予定なのでこのファイルを使いますが）プログラム側の修正をしていきたいと思います。
やりたいのは、htmlのフォーマットみたいなものを用意しておいて、実際にはランキング部分とレース結果へのリンク部分だけを作りだして、組み合わせて出力するみたいな感じに仕上げたいですね。
メンテナンスも楽になりそうですし(*’ω’*)
最後にファイルを置いておきますので、気になる方はダウンロードしてみてみてくださいね。
参考になれば幸いです！