Appleに似たページを作る【HTML下準備編】 ~1日10行コーディング 〜~

4787 ワード
HTML apple YouTube HTML テキストリンク

10日目

前回までのは一区切りついたので、今日からはまた別のものを作ろうと思います。
一旦初心に帰って普通にHPを作ろうかなって....
ただ、テーマがないとなんのページ作るかで求められるものが全然違うので、自分が最近ハマっているYoutuberの紹介ページをAppleのHPのMacの部分を真似て作ろうかなと思います。

Mac - Apple（日本）
https://www.apple.com/jp/mac/?afid=p238%7CsKItUSOhE-dc_mtid_18707vxu38484_pcrid_396708056104_pgrid_17843521221_&cid=aos-jp-kwgo-Mac--slid---product--

↑
こんな感じで、Macの画像のところが動画のサムネになるイメージ...!!

【技術テーマ】

ホームページ制作

言語

  • HTML
  • CSS

目標成果物

サイトのベースとなるHTMLを記述する!

コードと資料

もうできる人からしたらそんなところ？って言う部分を今日はやっていきます。

  1. HTMLファイルを用意しベースを作成

まずはHTMLの基礎の基礎となる部分を用意します。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>僕のすすめる料理動画3選</title>
</head>
<body>

</body>
</html>
  1. 動画情報を埋め込む

現状ではほんとに真っ白なページなのでタイトルの通りおすすめの動画を3つ埋め込みます。

index.html
<body>
    <h1>僕のすすめる料理動画3選</h1>
    <h2>料理研究家が辿り着いた最高の一皿【至高のペペロンチーノ】</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Jx-tqntWPCM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <h2>もう、醤油には戻れない【悪魔の万能ネギTKG】</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/MQFEBR4Eo1Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <h2>もう市販のサラダチキンはいらない【レンジサラダチキン】</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/7il2sEYzMYA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>

上記の情報記述することで一旦動画の情報を埋め込むところはできました。

ただ、こんなのほんとにひどいのでここからAppleのページに寄せていきたいと思います....