ウェブページを制作するのに必要なHTMLファイルとスタイルシート(CSS)ファイルを用意します。
課題用圧縮ファイルの中身を作業用フォルダに展開して取り出し、内容を確認してください。
今後は、HTMLは
index.html、スタイルシートはmystyle.cssを開いてそれぞれ設定を書き込んでいきます。この課題では、基本的にこの２つのファイルをベースに作業をします。
以前の練習問題では次々に新しいファイルを作成していましたが、この課題では
index.htmlとmystyle.cssが中心で、そこに様々な設定を追加し、完成させてゆく流れとなるでしょう。
要するに、ファイルの数はあまり増えないでしょう。😁以下にそれぞれの内容を掲載しておきます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="mystyle.css"> <title>ガジェットブログ</title> </head> <body> </body> </html>@charset "UTF-8"; body {font-family: Meiryo,'メイリオ','Hiragino Kaku Gothic Pro',sans-serif;}課題用圧縮ファイル
css2pack.zipの中身を展開すると、最初からここまで出来上がっていることでしょう。HTMLやCSSファイルの中身が確認できたら、編集を開始します。
せっかちな方は下の解説を飛ばして次のページに進んでＯＫですが、HTMLやCSSの仕組みがどうなっているのか詳しく知りたい場合は、下の解説を参考にしてください。
ここでは、HTMLの詳しい内容を解説します。
DOCTYPE宣言
HTMLファイルの先頭行には「DOCTYPE宣言」を記述し、HTML5で書かれた文章であることを明記します。
<!DOCTYPE html>使用言語
<html>を記述し、ページで使用する言語の種類を lang 属性で記述します。ここでは日本語のページを作成するので「ja」を設定しています。
<!DOCTYPE html> <html lang="ja"> </html><head>と<body>
<head>と<body>を記述します。ページに関する設定は<head>の範囲内に、画面に表示する内容は<body>の範囲内に記述します。
<!DOCTYPE html> <html lang="ja"> <head> </head> <body> </body> </html>文字コードの宣言
ページ内で使用する日本語文字コードを設定します。ここでは一般的な「UTF-8」を設定しています。
<head>～</head>の範囲内に書く必要があります。
HTMLファイルを保存する際は、指定した文字コードで保存する必要があります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> </body> </html>ページタイトル
<title>の範囲内にページのタイトルを設定します。
ページのタイトルはブラウザのお気に入り登録時の名前や、検索エンジンの検索結果など、様々な場所に反映されます。適切なタイトルを記入しておきましょう。
ここでは制作するページの内容に合わせて「ガジェットブログ」というタイトルを設定してあります。
<head>の範囲内に書く必要があります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ガジェットブログ</title> </head> <body> </body> </html>ビューポート
ビューポート設定は、主にスマートフォンなどさまざまな機器からページにアクセスする際の画面表示を調整する効果があります。通常は例のようなビューポート設定を追加しておくと無難です。
<head>の範囲内に書く必要があります。
とりあえず、スマホでいい感じに表示させるための「おまじない」と思っておいてください。
ビューポート設定をしておかないと、スマホなどでページを見たときに、パソコンの画面のように、とても小さく表示されるといった現象が起こるかもしれません。
なので、今回のようにスマホからのアクセスも意識したページデザインをする場合は、この設定を追加しておくのが推奨です。
ビューポートについて詳しく知りたい場合は検索するなどして調べてみましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>ガジェットブログ</title> </head> <body> </body> </html>スタイルシートの読み込み
このページで使用するスタイルシートファイルを設定します。
<head>の範囲内に書く必要があります。
ここでは
mystyle.cssというファイルを利用するために <link>を使って次のように設定しています。<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="mystyle.css"> <title>ガジェットブログ</title> </head> <body> </body> </html>HTMLの内容は以上です。
スタイルシートの文字コード
スタイルシートを記述する際の文字コードを設定します。ここではHTMLと同じ「UTF-8」を使用するので、右のように設定しています。
@charset "UTF-8";フォントの変更
ページ上で文字を表示する際の書体（フォント）を font-family プロパティで設定しています。
Windowsの場合は「メイリオ」、macOSの場合は「Hiragino Kaku Gothic Pro(ヒラギノ角ゴ)」フォントを使用し、それらのフォントが無い端末では「sans-serif(ゴシック系のフォント)」を使用するよう設定しています。
どんな端末でもそれなりに表示される、比較的無難な設定です。
@charset "UTF-8"; body {font-family: Meiryo,'メイリオ','Hiragino Kaku Gothic Pro',sans-serif;}CSSの内容は以上です。書体を設定する程度のシンプルなものです。
これからCSSに設定を追加する場合は、新しい行を作って下へ下へと追記していきましょう。