WEBサイト作成シリーズ
↓
WEBサイト作成～HTMLを書いてみよう！すぐに実行！
WEBサイト作成～おすすめエディターはこれ！
の続きになります。
このブログの内容
背景に画像を入れるとどうなる？
前回作成した「index.html」はこちら
↓
文字だけです。
確かにもうちょっとおしゃれにして楽しくテンションあげていきたいですよね。←
いきなりそれっぽく変身させる方法として、背景に画像を入れるのはどうでしょう。
↓
どうでしょう？ちょっとテンション上がりません？
プログラミング学習にはテンションが大事！←
ではやってみましょう！
用意するものは？
事前に用意するものは、背景に使用する画像です。
私のサイトでは「ぱくたそ」様のフリー画像をいただいています。
↓
引用：ぱくたそ公式HP
URL：https://www.pakutaso.com/
しっかり規約を読んで、守って使用しましょうね。
使っている画像はこちらのMサイズです。
↓
ノスタルジックな丸ボケの写真素材
※画像はダウンロード後のファイル
引用：ぱくたそ公式HP
- 「ノスタルジックな丸ボケ」を検索
URL：https://www.pakutaso.com/
画像は、ファイル名を「homeimage.jpg」にしてください。
「index.html」ファイルと同じフォルダ内に、「images」フォルダを作成して、その中に入れておきましょう。
これで準備はOKです。
CSSを書くよ！
え？CSS？
はい、CSSです。
背景を入れるためだけならHTMLに書き込むこともできますが、基本的にデザインはCSSで書くものです。
構造はHTML、デザインはCSS。
HTMLとCSSのファイルを分けておくことで、メンテナンスがしやすくなります。
また、同じデザインを複数のHTMLファイルで使用することができるようになります。
ですので、最初から分けて覚えておきましょう！
「index.html」ファイルと「images」フォルダがあるフォルダ内に、「css」フォルダを作りましょう。
「css」フォルダの中に、右クリック「新規作成」「テキスト ドキュメント」を作りましょう。
ファイル名を「style.css」としてください。
このファイルに、CSSを書いていきます。
「style.css」を右クリック、「プログラムから開く」から、「メモ帳」（VisualStudioCodeでも〇）で開きます。
ファイルにコードを書きます。
@charset "UTF-8";
/* ------------------------------------------------
common
------------------------------------------------ */
.bg-image {
background-size: cover;
background-position: left top;
}
/* ------------------------------------------------
home
------------------------------------------------ */
#home {
background-image: url(../images/homeimage.jpg);
min-height: 100vh;
}
書いたら保存しておきましょう。
コードの説明は後ほどしますね。
HTMLを書くよ！
では！HTMLを書きましょう！
前回作成してある「index.html」を右クリック、「プログラムから開く」から、「メモ帳」（VisualStudioCodeでも〇）で開きます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yu_chi’s Portfolio Website</title>
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="home" class="bg-image">
Yu_chi<br>
プログラミングを中心に、<br>
GoogleBloggerにて発信。<br>
<br>
文系VBプログラマー。<br>
育休中。
</div>
</body>
</html>
前回と異なる部分はここです。
実行してみましょう！
保存したら一度メモ帳を閉じて今作ったindex.htmlをダブルクリックで開きます。
ファイル名が「.html」になっていると、ダブルクリックで既定のブラウザで開きます。
別のブラウザで開きたい場合はindex.htmlファイルを右クリックをして「プログラムから開く」で開きたいブラウザを選択してください。
背景に画像が出ましたー！
できたー！
コードの説明をするよ！
コードの説明をしておきますね！
ふーん、くらいで読んでみてください。
画像が出せたんですから、すべて理解しようとしなくても大丈夫ですよ。
コピペでたくさん真似をして作っていく中で、少しずつ理解していけばいいです。
CSS
@charset "UTF-8";
CSSのキャラセット。
先頭に書きます。
文字コードをUTF-8に指定しています。
指定しないと文字化けすることがあります。
/* ------------------------------------------------ common ------------------------------------------------ */
コメント
「/*」と「*/」の間の文字はブラウザが無視してくれます。
この場合、区切り線として使用している「------」と「common」という文字は無視されています。
コードを見やすくしたり、コードの説明をメモしておいたり、一時的にコードを無効にする（コメントアウトすると言います）するのに便利です。
ここで少し用語を説明…。
CSSの考え方
- セレクタ：どこにデザインするか
- プロパティ：何をデザインするか
- 値：どうデザインするか
上記を踏まえて…。
.bg-image {
}
セレクタです。どこにデザインを適用するかを指定します。
セレクタ：クラス
「.（ピリオド）」+「名称」
「.（ピリオド）」を付けた場合はHTMLのクラスにデザインを適用します。
今回はクラス名が「bg-image」のHTMLに｛ ｝内のデザインが反映されます。
適用されるのはHTMLのここですね！
#home {
}
セレクタです。どこにデザインを適用するかを指定します。
セレクタ：id
「#（シャープ）」+「名称」
「#（シャープ）」を付けた場合はHTMLのidにデザインを適用します。
今回はid名が「home」のHTMLに｛ ｝内のデザインが反映されます。
適用されるのはHTMLのここですね！
セレクタの書き方は3つあるよ
- タグ名で指定
「タグ名」+「{ }（波括弧）」 - クラス名で指定
「.（ピリオド）」+「クラス名」+「{ }（波括弧）」 - id名で指定
「#（シャープ）」+「id名」+「{ }（波括弧）」
次にプロパティについて…。
プロパティと値の書き方
- 「プロパティ名」+「：（コロン）」+「値」
- 複数書く場合は、「;（セミコロン）」で区切る
上記を踏まえて…。
background-size: cover;
プロパティと値のセットは、何をどう変えるのかを指定します。
プロパティ background-size：背景画像サイズ
背景画像サイズを変更します。
値 cover：画面最大表示
画像を画面に合わせて最大表示します。
縦横の比率は変えません。
はみ出たところは、「background-position」に合わせて切り取られます。
background-position: left top;
プロパティと値のセットは、何をどう変えるのかを指定します。
プロパティ background-position：背景画像の位置
背景画像の初期表示位置を変更します。
値 left top：画像の左上を画面左上に設定
画像の左上を画面左上に設定します。
「background-size」が「Cover」の場合、画面から画像がはみ出る場合、右や下が切り取られます。
下が切り取られたらこんな感じ。
右が切り取られたらこんな感じ。
表示した画面を大きくしたり小さくしたりして確認してみてください。
「background-size:Cover」は今回の背景のように余白を出したくないときにとても便利！
background-image: url(../images/homeimage.jpg);
プロパティと値のセットは、何をどう変えるのかを指定します。
プロパティ background-image：背景画像の指定
値 url(../images/homeimage.jpg)：画像
「url」には画像のパスを指定します。
パスというのは、画像のある場所、住所のようなものです。
パスの書き方
パスの書き方を説明しますが、ややこしいので、ひとまず流し読んでおいてください。images/homeimage.jpg
「images」フォルダの中の「homeimage.jpg」を表します。
「images」フォルダがどこにあるか、ブラウザに教えてあげないといけません。
ブラウザは、パスを書く「style.css」の場所を知っています。
「style.css」は「CSS」フォルダに入れましたね。
フォルダを見てみましょう。
「style.css」と 同じ場所は「./（ピリオドとスラッシュ）」で表します。
（が、同じ場所の時は「./（ピリオドとスラッシュ）」を省略可能）
今回の場合だと「./（ピリオドとスラッシュ）」は「style.css」と同じ場所、つまり「CSS」フォルダの中という意味になります。
./images/homeimage.jpg
つまり、これだとCSSファイルの入っている「CSS」フォルダの中に「images」フォルダがあることになってしまいます。
でも実際は「images」フォルダは「CSS」フォルダの中ではなく外にあります。
「style.css」のある「CSS」フォルダの 一つ外に出る場合は、「.（ピリオド）」を前に追加します。
../images/homeimage.jpg
これで「CSS」フォルダの外にある「images」フォルダの中の「homeimage.jpg」を表すことができました！
パスをHTML側に書く場合は、HTMLファイルから見た場所になるので、書き方が変わるので注意です。
ふぅ、ややこしいですね！
min-height: 100vh;
プロパティと値のセットは、何をどう変えるのかを指定します。
プロパティ min-height：最小の高さの指定
値 100vh：画面サイズの高さと同じ（画面サイズの高さ100%）を表す
スマホやパソコンの画面サイズに合わせておきたいので、vh（画面サイズの高さ）で指定をしておきます。
HTML
<!-- CSS -->
コメント
「<!--」と「-->」の間の文字はブラウザが無視してくれます。
この場合、「CSS」という文字は無視されています。
コードを見やすくしたり、コードの説明をメモしておいたり、一時的にコードを無効にする（コメントアウトすると言います）するのに便利です。
CSSとHTMLでコメントの描き方が違うので注意ですね！
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
リセットCSS
実はブラウザの種類によって、デフォルトで異なるデザインが設定されてしまっています。
それをリセットするCSSを読み込みます。
今回はress.cssというのを使っています。
<link href="css/style.css" rel="stylesheet">
CSSファイルの読み込み
先ほど作った「style.css」を読み込んでいます。
<div id="home" class="bg-image"> </div>
div：複数の要素をグループ化
文字をグループ化してid名とクラス名を付けています。
id：id名をつける
CSSなどで指定して使います。
同じHTMLファイル内で同じidを使うことはできません。
class：クラス名をつける
CSSなどで指定して使います。
同じクラス名を複数要素で使うことができます。
idとクラス
id名、クラス名は自由ですが、半角英数字小文字で書くのが良いでしょう。記号は「-（ハイフン）」か「_（アンダーバー）」です。
数字や記号は先頭は避けましょう。
全角で入力した際はF10キーで変換！
HTMLは余計なエラーを防ぐため、半角小文字で統一！
全角スペースの使用は厳禁！
基本的には クラスで共通デザインを書いておき、特定の場所のデザインをこだわって変えたいような場合にidを使うと良いです。
おわりに
背景がつくと、一気にそれっぽくなりますね。
次回もテンションが上がりそうなフォントを変更してみたいと思います！
0 件のコメント :
コメントを投稿