はじめに
ポートフォリオを作ろうと思い、HTML CSS JS などの知識が必要なのかなと感じました。
タイトルでは初心者と書いていますが、普段はSwiftを書いたりしているので、デザインという点では初心者？かもしれません。
今回は、挑戦という意味も込めてホームページを作成してみることにしました。
環境
- MacOS 11.0.1
- VSCode 1.53.2
目的
以下の事に挑戦してみたいと思います。
- 画面の中央にカードを縦並びで配置してたい
- カーソルが重なるとカードを拡大させたい
- スクロールしたらフェードインさせてみい
実践
HTML
まずは、HTML を書いていこうと思います。
一回は見たことあるコードがかけましたが、ここからが本番という気がします。
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
</body>
</html>
次に<head>タグの中身を書いていこうと思います。
<head>タグ内には主に<meta>タグ<link>タグを書くようです。
以下に書いておくべきものをまとめてみました。
文字のエンコード
文字コードを指定するもので日本語のサイトでは必須のようです。
<meta charset='utf-8'>
viewport
後で説明すると思うのですが、「レスポンシブデザイン」を有効にする上で必要な設定なようです。
スマホ・タブレットなどに表示に対応するみたいです。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
タイトル
<title>タグ内で設定した文字列は検索結果やタブに表示されるようです。
<title>タイトル</title>
OGPタグ・Twitter カード
Twitter などのソーシャルメディアに表示される時の設定を行えるようです。
<meta property="og:url" content="ページのURL" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページのタイプ">
<meta property="og:description" content="記事の抜粋" />
<meta property="og:image" content="画像のURL" />
<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@Twitterユーザー名" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="appIDを入力" />
Favicon
ブラウザのタブやブックマークに登録した時に表示されるアイコンの設定を行えるです。
<link rel="shortcut icon" href="画像のパス">
head タグ
これまで紹介してきたタグを<head>タグ内に書き込んでみました。
これら以外にも様々なタグがあるようですが、今回は必須なものだけを選びました。
次は<body>タグの中身を書いていきたいと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta property="og:type" content="website">
<meta property="og:title" content="タイトル">
<meta property="og:description" content="コンテンツ">
<title>タイトル</title>
</head>
</html>
Body タグ
<body> タグ内は <head> タグと違い必ずこういう手順で書くというルールみたいなのはないみたいです。
もちろん見やすいコードを書く方法はあるのでしょうが、今回は自分なりに見やすいと思う書き方で書いてみたいと思います。
以下のように、bodyの中に<div class='wrapper'>を追加してコンテンツをまとめられるようにしました。
<body>
<div class="wrapper">
</div>
</body>
class はCSSやJSを使い装飾やアニメーションなどを実装する際に使うため、この記事では使いませんが、CSS編などで使うので、書いておくだけで大丈夫です。
ヘッダー
まず一番最初に<header>の中身を書きたいと思います。
<header>タグにはページの見出しとなることやナビゲーションなどを記載するみたいです。
今回はheaderタグ内を以下のように編集しました。
- cardの親containerクラスを持つ
<section>タグを追加 - cardクラスを持つ
<div>タグを追加 - card に表示する画像
<img>タグと文字列<h1>タグを追加
<header class="header">
<section class="container">
<div class="card">
<img class="card-img" src="画像のパス" alt="">
<h1 class="card-content">
<span class="card-title">Title</span>
<span class="card-text">Text Text Text Text</span>
</h1>
</div>
</section>
</header>
メインとなるコンテンツ
メインとなるコンテンツもカードなので、<header> タグ内を使いまわす形になります。
<header>内の<section class="container">から</section>までをコピーし<main class="content">内に貼り付けるだけで大丈夫です。
<body>
<div class="wrapper">
<!-- main -->
<main class="content">
<section class="container">
<div class="card">
<img class="card-img" src="画像のパス" alt="">
<h1 class="card-content">
<span class="card-title">Title</span>
<span class="card-text">Text Text Text Text</span>
</h1>
</div>
</section>
</main>
<!-- main -->
</div>
</body>
追加情報
ここにはよくお知らせなどが記載されていますね。
<section class="container">
<div class="more-info">
<h1>AND MORE INFO</h1>
<p>Coming soon</p>
<p>info[at]text text text</p>
</div>
</section>
フッター
ページの一番下来る部分で、主に誰が書いたのかや関連リンクを記載する所のようです。
今回は誰がかいたのかということだけがわかるようにしておきました。
<footer class="footer">
<p>©name name name</p>
</footer>
結果
以下のように表示されました。
HTML だけではどうなっているのかわからないですね。
ここにCSSを使って装飾することで驚くくらい見え方が変わり魅力的になります。
 |
|---|
さいごに
Web デザインを初めて取り組むにあたり、わからないことだらけで間違っているところもあるかもしれませんが、無事にHTML編を終えることができました。
次回はCSS編になりますが、目的で紹介したことはここで実装できると思います。
もし、こういう書き方のほうがいいなどありましたら、コメントしていただけると幸いです。