50代からのHTML / CSS / Java Scriptチャレンジ No.28

2024年11月16日 20:17

番外編はどうでしたでしょうか？今日からまた別のサンプル作成を通して、HTMLとCSSについて学習をしていきます。今回作成するのは、「CDアルバムの紹介ページ」だそうです。早速やっていきたいと思います。

どんなページかというと下の画像のようなページです。

しかも、マルチデバイスに対応したWebページらしいです＾＾；なんか昔やってた頃は、こんな話がで始めた頃だった気がする。＾＾；

まずは、VScodeを立ち上げて、メニューのファイルから新しいファイルを選択して名前を"index.html"とする。保存先は、新規でフォルダを作成しました。フォルダ名をChapter02（前回が01だったので）そのフォルダに保存。

そしたら、基本構成の１つ目Doctypeを入力。<Docまで入れたら自動補完されると思うんで、間違えないと思う。一応確認だけど、これが今の最新版の書き方らしい。
その下には、次のように書く。
<html lang="ja">
そしたら終了タグも一緒に補完されるので、改行しておく。

これで、このフィアルがhtmlであることを示す。あとは、このhtmlタグの中にheadタグとbodyタグを入れる。

さらにheadタグの中にmetaタグでキャラセットUTF-8を記述。さらに決まり文句を記述。viewportをデバイスの幅に合わせるってやつね。

そして、さらにtitleタグを入れていく。タイトル名を「イヤホンジャックの向こう側」とする。架空のアルバムタイトルね＾＾
ここまでで、基本タグの記述が終了！

基本設定が終わったので、次はbodyタグの中を記述していく。まずはh1タグで見出を作成。中身をアルバムタイトルの「イヤホンジャックの向こう側」とする。そしたら、一旦保存してブラウザーで確認。

Googleでsanitize.cssを検索して、Chapter02の中に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ファイルの方のheadタグの中に、<link>タグを使ってstyle.cssを読み込ませる。

上のように書くんだけど、忘れてる＾＾；まぁ、ここまで書いたら、保存してブラウザーをリロード。あまり変化はないけど、余白が調整されるかな。まぁ、余白がなくなる感じにね。

ちなみに、sanitize.cssはブラウザーごとの差をなくすやつね

さてさて、ここまでは前回の復習でもあるんだけど、結構忘れてるなぁ＾＾；まぁこう言うのって作っていかないとね＾＾；と言うわけで、今日はここまで＾＾お疲れ様でした＾＾

いいなと思ったら応援しよう！

50代英語教師です。まだまだ学びたいことがありますので、もし記事が参考になったり、頑張ってるなぁと思われたらご支援よろしくお願いします。今後の学習費に充てていきたいと考えてます。

#勉強記録

17,477件