50代からのHTML / CSS / Java Scriptチャレンジ No.28
番外編はどうでしたでしょうか？今日からまた別のサンプル作成を通して、HTMLとCSSについて学習をしていきます。今回作成するのは、「CDアルバムの紹介ページ」だそうです。早速やっていきたいと思います。
見本
どんなページかというと下の画像のようなページです。
しかも、マルチデバイスに対応したWebページらしいです＾＾；なんか昔やってた頃は、こんな話がで始めた頃だった気がする。＾＾；
HTMLの基本タグの作成
まずは、VScodeを立ち上げて、メニューのファイルから新しいファイルを選択して名前を"index.html"とする。保存先は、新規でフォルダを作成しました。フォルダ名をChapter02（前回が01だったので）そのフォルダに保存。
そしたら、基本構成の１つ目Doctypeを入力。<Docまで入れたら自動補完されると思うんで、間違えないと思う。一応確認だけど、これが今の最新版の書き方らしい。
その下には、次のように書く。
<html lang="ja">
そしたら終了タグも一緒に補完されるので、改行しておく。
これで、このフィアルがhtmlであることを示す。あとは、このhtmlタグの中にheadタグとbodyタグを入れる。
さらにheadタグの中にmetaタグでキャラセットUTF-8を記述。さらに決まり文句を記述。viewportをデバイスの幅に合わせるってやつね。
そして、さらにtitleタグを入れていく。タイトル名を「イヤホンジャックの向こう側」とする。架空のアルバムタイトルね＾＾
ここまでで、基本タグの記述が終了！
bodyタグないの記述
基本設定が終わったので、次はbodyタグの中を記述していく。まずはh1タグで見出を作成。中身をアルバムタイトルの「イヤホンジャックの向こう側」とする。そしたら、一旦保存してブラウザーで確認。
sanitize.cssをダウンロード
Googleでsanitize.cssを検索して、Chapter02の中にcssフォルダを作成して、そこに保存。これでcssファイルが出来上がり。
cssファイルをリンクさせる
そしたら、新規でcssファイルを作成する。VScodeのメニューから新しいファイルを選択して、名前をstyle.cssにしてChapter02の中にある、cssフォルダに保存する。これで準備はOK。style.cssからsanitize.cssを読み込む。
VScodeのstyle.cssファイルの１行目に、@import url(sanitize.css)を記述。
これで、style.cssがsanitize.cssを読み込んだ形になる。あとは、sytle.cssをhtmlファイルの方でリンクさせればOK。
HTMLファイルにsytle.cssを読み込む
HTMLファイルの方のheadタグの中に、<link>タグを使ってstyle.cssを読み込ませる。
上のように書くんだけど、忘れてる＾＾；まぁ、ここまで書いたら、保存してブラウザーをリロード。あまり変化はないけど、余白が調整されるかな。まぁ、余白がなくなる感じにね。
ちなみに、sanitize.cssはブラウザーごとの差をなくすやつね
さてさて、ここまでは前回の復習でもあるんだけど、結構忘れてるなぁ＾＾；まぁこう言うのって作っていかないとね＾＾；と言うわけで、今日はここまで＾＾お疲れ様でした＾＾
いいなと思ったら応援しよう！
