前回まではホームページの基本的な作り方と、公開の手順を解説してきましたが、この記事では少し段階を上げて「自己紹介ページ作成」について順番に解説していきます。
前回作ったデータは「見出し」と「文章」だけという簡単なページでしたが、今回はそこに「プロフィール画像」を追加していきます。
出来上がる自己紹介のページはこんな感じです。
とその前に
【実務で使えるコーディングテクニック集50選】というコンテンツが出まして、こちらコーディングを勉強する人は先に読んでおくべき教材ということでめちゃめちゃおススメしてます！！！
コーディングを最強のコスパで短期間でマスターしたい方は下記をチェック
※豪華特典付き
HTMLを書く
前回までのおさらいも含めて、一から「HTMLコード」を書いていきましょう。
そんなに多くないので、コピペはせずに手入力でやってみましょう。
まずは新しく「profile.html」というファイルを作り、編集画面を開けてください。
まずは大枠となる部分から作るので以下の要素を書いてください。
・DOCTYPE宣言 ⇒ <!DOCTYPE html>
・言語指定 ⇒ <html lang=”ja”></html>
・headタグ ⇒ <head></head>
・bodyタグ ⇒ <body></body>
実際にコードとして記述するとこうなりますね。
<!DOCTYPE html> <html lang="ja"> <head></head> <body></body> </html>
では上のタグから順に埋めていきます。
headタグ
最初は<head>タグですね。
「文字コード」「タイトル」「説明」のタグを追加していきます。
<head> <meta charset="utf-8"> <title>どろがめの自己紹介ページ</title> <meta name="description" content="どろがめの自己紹介ページです。"> </head>
次に<body>タグの内容を埋めます。
「ページの見出し」「プロフィール画像」「各項目の見出し」「内容」を追加していきます。
bodyタグ
最終的な<body>タグの中身は下記になります。
<body>
<h1>どろがめの自己紹介ページ</h1>
<img src="img/face.png" alt="どろがめのプロフィール画像">
<h2>プロフィール</h2>
<p>
出身：東京都<br>
趣味：ゲーム実況<br>
職業：WEBプログラマー<br>
</p>
<h2>ひとこと</h2>
<p>
これから自己紹介ページの作り方を解説していきます。<br>
基本的な「HTML」と「CSS」を使ったページになります。<br>
初心者でも分かりやすいように、なるべく噛み砕いて<br>
説明しますので、最後までお付き合いください。
</p>
</body>
では順番に解説していきます。
ページの見出し
ページの見出しは前回も解説しましたが、「<h1></h1>」で囲んだ箇所になります。
<h1>どろがめの自己紹介ページ</h1>
プロフィール画像
画像のタグは<img>タグになります。
<img>タグは囲むのではなく、imgタグ内に色々追加で書いていきます。
src=”画像パス”←表示させる画像のパス
alt=”代替テキスト”←この画像は○○ですよ。という画像の説明
<img src="img/face.png" alt="どろがめのプロフィール画像">
src=”img/face.png” というコードについて解説します。
「profile.html」にコードが書かれているので、「profile.html」と同じフォルダ内を基準に読み込みが行われます。
この場合、画像パスは「profile.html」と同じ階層の「img」フォルダ内にある「face.png」という画像を表示させる。
ということになります。
alt=”どろがめのプロフィール画像”について解説します。
「alt」というのは「代替テキスト」の意味を持ちます。
「代替テキスト」というのは、画像パスの指定が間違っていたり、何らかの理由で画像の読み込みが失敗した場合に、代わりに表示させるテキストのことです。
ここには画像の説明を書きましょう。
各項目の見出し
各項目の見出しというのは下記のように<h2></h2>タグで囲んだ箇所になります。
<h2>プロフィール</h2>
見出しというタグで<h1>と使い方は同じですが、どう使い分ければいいのでしょうか。
これは適応される範囲と優先順位で考えてください。
例えばこの自己紹介ページで考えると、わかりやすいです。
<h1>はページ全体の見出し
<h2>は各項目の見出し
つまり、こページは自己紹介のページなのでそのまま
<h1>どろがめの自己紹介ページ</h1>
としています。
これからプロフィールを書きますよー。という見出しなので
<h2>プロフィール</h2>
としています。
そして仮にプロフィールの中でより細かな見出しが必要な場合は、<h3>という流れで見出しを<h2>～<h6>までを階層に分けて使います。
基本的には<h1>はページに対する見出しなので、１ページにつき１つのみ使うようにしてください。
理由は今は細かくは解説しませんが、1つのページに対して何個も見出しがあるとややこしいですよね？
作ったホームページはGoogleが評価しているのですが、その評価を下げる要因になります。
とにかく難しく考えず、単純に<h1>は1つのページに対して１つと覚えておいてください。
プロフィールの内容
次は内容です。プロフィールに関するまとまった文章を書くので以下のように<p></p>タグで囲みます。
<p> 出身：東京都<br> 趣味：ゲーム実況<br> 職業：WEBプログラマー </p>
このあたりも前回説明したとおり、<p>タグはまとまった文章を書くときに使います。
HTMLファイル内で「Enter」を押して改行しても、ホームページ上の表示では改行されません。
ブラウザで見たときに改行する場合は、改行する箇所に<br>を書く必要があります。
ひとことの部分
あとは同じ要領でひとことの箇所を記載していきます。
<h2>ひとこと</h2> <p> これから自己紹介ページの作り方を解説していきます。<br> 基本的な「HTML」と「CSS」を使ったページになります。<br> 初心者でも分かりやすいように、なるべく噛み砕いて<br> 説明しますので、最後までお付き合いください。 </p>
プロフィールと同じく、<h2>タグと<p>タグで構成していきます。
上記でいうと、「ひとこと」という見出しで、「まとまった文章」をこれから作る自己紹介ページの簡易な解説を載せています。
すべてをまとめる
上記のタグを全てまとめます。
HTMLタグの中に<head>タグと<body>タグを書くと下記のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>どろがめの自己紹介ページ</title>
<meta name="description" content="どろがめの自己紹介ページです。">
</head>
<body>
<h1>どろがめ</h1>
<img src="./img/face.png" alt="どろがめのプロフィール画像">
<h2>プロフィール</h2>
<p>
出身：東京都<br>
趣味：ゲーム実況<br>
職業：WEBプログラマー<br>
</p>
<h2>ひとこと</h2>
<p>
これから自己紹介ページの作り方を解説していきます。<br>
基本的な「HTML」と「CSS」を使ったページになります。<br>
初心者でも分かりやすいように、なるべく噛み砕いて<br>
説明しますので、最後までお付き合いください。
</p>
</body>
</html>
表示の確認
ではひとまずHTMLのコードは完成しましたので、何でもいいですが「profile.html」というファイル名で保存してみてください。
保存できたらダブルクリックか、ブラウザを起動してから「ドラッグ＆ドロップ」してください。
すると下記のような表示が出来ていることを確認してください。
-
文字コードは「UTF-8」と指定しているので、保存するときも「UTF-8」で保存してください。
CSSでデザインを調整する
「画像」と「見出し」と「文章」が表示されましたでしょうか？
ただ、ホームページの一番初めにお見せした完成後のイメージと比べると、画像の形や<h1>と<h2>見出しのデザインが違いますよね？
細かいデザインを変えたい場合は、「CSS」というのを使って「見出し」や「画像」など様々な要素を装飾していきます。
CSSって何？
まずは「CSS」について解説していきます。
覚える必要は全くないですが、まず名前の由来からいくと
「Cascading Style Sheets（カスケーディング・スタイル・シート）」
の頭文字をとって「CSS」と名付けられました。
「HTML」が構造を記述したファイルに対して、「CSS」はレイアウトやデザインを指定するファイルになります。
コードを書いてみよう
今回この自己紹介のページに対してデザインを調整していきますが、下記にまずは「CSS」のコードを記述していますので、見てみてください。
img{
border-radius: 50%;
}
h1{
color:white;
background:#0093D0;
text-align:center;
}
h2{
border-left: solid 5px #0093D0;
padding-left:10px;
}
まずは「profile.html」ファイルと同じ階層に「css」フォルダを作ってください。
上記のコードをコピーもしくは記述して、「css」内に「style.css」というファイルで保存してください。
これで「CSS」ファイルは完成です。
それぞれのコードの意味はあとで解説しますので、まずは書いてみましょう。
短いので手書きで記述してみてもいいかと思います。
デザインを反映してみよう
上記のように「CSS」ファイルを作っただけでは実際のデザインに反映されません。
ではどのようにして表示に反映させるかを解説していきます。
基本的に「ブラウザ」はHTMLファイルの内容を表示しています。
なので「HTML」ファイル側で「このCSS」を読み込みます！
というのを指定してあげる必要があります。
先ほどの「HTML」ファイルの<head>タグ内に以下の記述を追加してください。
<!– 以下のCSSファイルを読み込みます。 –>
<link href=”css/style.css” rel=”stylesheet”>
実際のコードは以下のようになります。
<head>
<meta charset="utf-8">
<title>どろがめの自己紹介ページ</title>
<meta name="description" content="どろがめの自己紹介ページです。">
<!-- 以下のCSSファイルを読み込みます。 -->
<link href="css/style.css" rel="stylesheet">
</head>
それぞれを解説していきますと
<!-- 以下のCSSファイルを読み込みます。 -->
これはコメント行といって、「HTML」のコードに関する説明を記述しています。
ブラウザで確認したときには表示はされません。
使い方は「<!–」から始まり「–>」のタグで閉じます。
その範囲内がコメントになります。
HTMLは基本的に英語で記述するので、コードの量が多くなったり、どのタグがどこまでの範囲で囲まれているかなどが、パッと見てわからなくなってしまいがちです。
コメントに関しては必須ではないですが、入れるクセを付けた方が今後の為になります。
久しぶりにコードを編集したり、他の人が触る場合などは、コメントを入れてあげたほうがわかりやすくなるので、コードが多くなってきたり、ややこしい箇所にはコメントを入れるようにしましょう。
今回は短いので入れる必要はありませんが、使い方だけ説明しました。
次は実際に「CSS」を読み込むコードです。
<link href="css/style.css" rel="stylesheet">
これに関して覚えるところは、href=”css/style.css”という箇所のみでOKです。
この””内で囲った部分が「読み込む対象のファイル」なります。
「css」フォルダ内の「style.css」ファイルをスタイルシートとして読み込んでください。という意味です。
他の「link 」や「rel=”stylesheet”」という箇所は、こういう風に書くんだという認識だけ持っておいてください。
表示確認してみよう
「HTML」と「CSS」ファイルを保存したら、再度「profile.html」ファイルをブラウザで表示確認してみましょう。
ではここまで、「HTML」＋「CSS」の仕組みを解説しました。
「HTML」はホームページの構造
「CSS」はデザイン
という構図は理解できましたでしょうか？
次の記事では「CSS」内に書かれているコードの意味をそれぞれ解説していきます。
