第三回の続きです！
やっと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から情報を取ってきて、今回の画面に反映まで行いますから、次回で天気予報サイトは殆ど出来たも同然です！！
次回もコードを載せますし、伝えたいこともたくさんあるので、記事が別れると思っておいてください。