第三回の続きです!
やっとHTML/CSSを書きます☆
【学習に最適】天気予報をHTML・CSS・Javascriptだけで作る
HTML/CSSを書く
はい、ようやく本題に参りました。
HTML/CSSファイルを追加する
まずは、以前に導入したVSCode上で、HTMLとCSSのファイルを作成していきます。
下図を参考に、index.htmlと、css/style.cssを追加してください。
▼HTMLファイルを追加する
▼ファイル名(index.html)を入力すると、HTMLが作成できる
▼CSSフォルダを追加する
▼フォルダ名(css)を入力し、フォルダを追加しよう
▼HTMLと同じ要領で、CSSファイル(style.css)をcssフォルダー内に作成しよう
HTMLとCSSを作成し、下図のようになっていればOKです。
もしstyle.cssがcssフォルダの外にあれば、ドラッグアンドドロップでcssフォルダに移そう。
▼HTML/CSSファイル作成直後の状態
コーディングする
ファイルを開くには、先ほどファイルを作成した左側のエリアから選択してください。
下図の右側のエリアがコードを書く場所になります。
開いているフォルダは、上部のタブから切り替えることが出来ます。
▼ファイルの編集方法を理解しよう
フレームのメインコンテンツの部分を、やっていきます。
トップは、『⑤画像を使ってイイ感じのデザインにする』の時に、
サイドバーは、『⑥【応用編】地域を変更できるようにしよう』の時に実装します。
それでは、下記ソースコードをコピーして、各ファイルへ貼り付け、保存しましょう。
1: | <!DOCTYPE html> |
2: | <html lang="ja"> |
3: | |
4: | <head> |
5: | <meta charset="UTF-8"> |
6: | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
7: | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
8: | <title>アリちゃんの天気予報</title> |
9: | |
10: | <!-- CSS --> |
11: | <link rel="stylesheet" href="css/style.css"> |
12: | </head> |
13: | |
14: | <body> |
15: | <main> |
16: | <h3>大阪の天気</h3> |
17: | <section class="forecasts-area"> |
18: | <div class="card1"> |
19: | <h5 class="forecast__dateLabel">今日</h5> |
20: | <span class="forecast__date">2月12日(日)</span> |
21: | <span class="forecast__telop">晴後曇</span> |
22: | <span class="forecast__chanceOfRain"> |
23: | <span>[00-06時]</span> |
24: | <span class="T00_06">--%</span> |
25: | </span> |
26: | <span class="forecast__chanceOfRain"> |
27: | <span>[06-12時]</span> |
28: | <span class="T06_12">--%</span> |
29: | </span> |
30: | <span class="forecast__chanceOfRain"> |
31: | <span>[12-18時]</span> |
32: | <span class="T12_18">0%</span> |
33: | </span> |
34: | <span class="forecast__chanceOfRain"> |
35: | <span>[18-24時]</span> |
36: | <span class="T18_24">20%</span> |
37: | </span> |
38: | <span class="forecast__temperature"> |
39: | <span class="min">-℃</span> |
40: | <span>/</span> |
41: | <span class="max">16℃</span> |
42: | </span> |
43: | </div> |
44: | </section> |
45: | </main> |
46: | |
47: | </body> |
48: | |
49: | </html> |
1: | body { |
2: | background-color: #E5EFFF; |
3: | padding: 0 2.5rem; |
4: | color: #666; |
5: | } |
6: | |
7: | /* メインの表題 */ |
8: | h3 { |
9: | font-size: 1.8rem; |
10: | } |
11: | |
12: | /* 天気予報表示エリア */ |
13: | .forecasts-area { |
14: | display: flex; |
15: | padding: 0 1.2rem; |
16: | } |
17: | |
18: | /* カード要素 .cord1~3 */ |
19: | [class^="card"] { |
20: | display: flex; |
21: | flex-direction: column; |
22: | align-items: center; |
23: | border: 1px solid gray; |
24: | background-color: white; |
25: | padding: 0.5rem 1.5rem 1rem; |
26: | box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.2); |
27: | } |
28: | |
29: | /* カード要素 .cord1~2 */ |
30: | [class^="card"]:not(:last-child) { |
31: | margin-right: 1.7rem; |
32: | } |
33: | |
34: | /* カード子要素の初期化 */ |
35: | [class^="card"]>* { |
36: | margin-bottom: 0.3rem; |
37: | } |
38: | |
39: | /* 日付ラベル */ |
40: | .forecast__dateLabel { |
41: | font-size: 1.5rem; |
42: | margin: 0 0 -0.2rem 0; |
43: | font-weight: normal; |
44: | } |
45: | |
46: | /* 日付 */ |
47: | .forecast__date { |
48: | margin-bottom: 0.5rem; |
49: | } |
50: | |
51: | /* 予報テロップ */ |
52: | .forecast__telop { |
53: | margin-bottom: 1rem; |
54: | } |
55: | |
56: | /* 降水確率 */ |
57: | .forecast__chanceOfRain { |
58: | display: flex; |
59: | justify-content: space-between; |
60: | width: 8rem; |
61: | } |
62: | |
63: | /* 気温の間にあるスラッシュの要素 */ |
64: | .forecast__temperature>*:nth-child(2) { |
65: | margin: 0 0.4rem; |
66: | } |
67: | |
68: | /* 最低気温 */ |
69: | .forecast__temperature .min { |
70: | color: blue; |
71: | } |
72: | |
73: | /* 最高気温 */ |
74: | .forecast__temperature .max { |
75: | color: red; |
76: | } |
保存が出来ていることが確認出来たら、エクスプローラーでindex.htmlをダブルクリックして表示してみましょう。
▼index.htmlをダブルクリック
▼このように表示されればOK
コードを少しだけ解説
クラス名はなるべく『BEM記法』で書きましたが、3種類くらい厳密なBEMで書けていない所があります。すいません。
BEM記法の有用性や、書き方はリンクが参考になると思います。
18行目のdiv要素は、同じ階層にコピーするだけで横に並ぶように良い感じでCSSで定義しています。
カード内の要素は3つとも同じ構造ですから、メンテナンス性を考えてあえて一つにしておきました。
次回のJavascriptを実装する時に、要素のコピーをしつつ、中のデータを編集するようにプログラミングします。
ここで言うメンテナンス性とは、カードを3つともベタ書きしていると、一つの文言を変える時に、3つとも変更しなければなりません。 しかし、1つだけ書いておいてプログラムでコピーするようにしておけば、変更が出たときの手間やミスの可能性が減るという意味です。 こうして部品化することを『コンポーネント化』と呼び、React.jsやLaravelといったフレームワークでも取り入れられている考え方の一つです。
前編でお伝えした通り、HTMLタグやCSSプロパティの説明は、基本的にしません。
なので、コードの中で初心者が分かりづらいであろうCSS関係の技術を軽くリストアップしておきます。
・flex
・前方一致による属性検索(セレクタの書き方)
・nth系の疑似要素(セレクタの書き方)
次回予告
やっと実装に入り、形が見えてきましたね。
次回はJavascriptというプログラミング言語を使ったコーディングになります。
天気予報APIから情報を取ってきて、今回の画面に反映まで行いますから、次回で天気予報サイトは殆ど出来たも同然です!!
次回もコードを載せますし、伝えたいこともたくさんあるので、記事が別れると思っておいてください。