YouTube動画の補足とコピペ

このページでは、ホームページ作成のYouTube動画で使っているコードや素材をまとめています。

カメラのメインビジュアル

HTMLの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>mbs</title>
  
  <!-- リセットCSS 読み込み -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
  
  <!-- style.css 読み込み -->
  <link rel="stylesheet" href="./css/style.css">
  
  <!-- Google Fonts 読み込み -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700&display=swap" rel="stylesheet">

</head>
  
<body>
  
  <header></header>
  
  <main></main>
  
  <footer></footer>
  
</body>

</html>

CSSの雛形

body {
  font-family: 'M PLUS 1p', sans-serif;
}

掲載テキスト

The Magic of the Camera

カメラの魔法で
特別な瞬間を思い出へ

シャッターを押すと特別な瞬間が永遠に。
写真で残す思い出を共有しよう。

画像素材

背景を消せるやつ

左下向きのカメラと正面向きのカメラ

HTMLの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>mbs</title>
  
  <!-- リセットCSS 読み込み -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
  
  <!-- style.css 読み込み -->
  <link rel="stylesheet" href="./css/style.css">
  
  <!-- Google Fonts 読み込み -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700&display=swap" rel="stylesheet">

</head>
  
<body>
  
  <header></header>
  
  <main></main>
  
  <footer></footer>
  
</body>

</html>

CSSの雛形

body {
  font-family: 'M PLUS 1p', sans-serif;
}

掲載テキスト

Camera facing down left

Camera facing front

画像素材

参考

きび団子を好む動物たちの例

HTMLの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>mbs</title>
  
  <!-- リセットCSS 読み込み -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
  
  <!-- style.css 読み込み -->
  <link rel="stylesheet" href="./css/style.css">
  
  <!-- Google Fonts 読み込み -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700&display=swap" rel="stylesheet">

</head>
  
<body>
  
  <header></header>
  
  <main></main>
  
  <footer></footer>
  
</body>

</html>

CSSの雛形

body {
  font-family: 'M PLUS 1p', sans-serif;
}

掲載テキスト

Animals that like millet dumplings
きび団子を好む動物たちの例

桃 Peach
桃がきび団子を好む理由は、自然な果糖と栄養、甘さと酸味の絶妙なバランス、果肉の食感、種子からの栄養吸収などが挙げられます。

犬 Dog
犬はきび団子を好む理由は、自然な食材の味と栄養、歯ごたえ、本能的な欲求の満足、飼い主との絆の強化が挙げられます。

猿 Monkey
猿がきび団子を好む理由は、自然な食材の多様性や風味、持ち運びやすさ、群れとの社交的な食事体験による絆の強化も挙げられます。

雉 Pheasant
雉がきび団子を好む理由は、豊富なタンパク質とエネルギー源、採食の適応、羽ばたきや歩行によるエクササイズと健康維持が挙げられます。

画像素材

参考

バナナの形態変化

HTMLの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>mbs</title>
  
  <!-- リセットCSS 読み込み -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
  
  <!-- style.css 読み込み -->
  <link rel="stylesheet" href="./css/style.css">
  
  <!-- Google Fonts 読み込み -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500;700&display=swap" rel="stylesheet">

</head>
  
<body>
  
  <header></header>
  
  <main></main>
  
  <footer></footer>
  
</body>

</html>

CSSの雛形

body {
  font-family: 'M PLUS 1p', sans-serif;
}

掲載テキスト

バナナの形態変化

普通のバナナ
黄色く熟した果肉と柔らかな皮が特徴の、世界中で親しまれている果物です。栄養価が高く、手軽に持ち運びやすいため、健康的なスナックとして広く愛されています。

房のバナナ
複数のバナナが房状に連なった形態のバナナです。収穫から販売までの過程で効率的に取り扱うことができ、大量のバナナを一度に提供できるのが特徴です。

タコさんバナナ
この特殊なバナナは、プライヤーたちにとっては楽しい要素として覚えられており、プレイヤー同士の競り合いに一役買っています。

画像素材

灰色のメインビジュアル

HTMLの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>mbs</title>
  
  <!-- リセットCSS 読み込み -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
  
  <!-- style.css 読み込み -->
  <link rel="stylesheet" href="./css/style.css">
  
  <!-- Google Fonts 読み込み -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap" rel="stylesheet">

</head>
  
<body>
  
  <header></header>
  
  <main></main>
  
  <footer></footer>
  
</body>

</html>

CSSの雛形

body {
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

掲載テキスト

In old mice, there was a ball inside.
Now it has become a planet.

一緒に築く、成長の未来。

画像素材

WATAAME

HTMLの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title></title>
  
  <!-- リセットCSS 読み込み -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
  
  <!-- style.css 読み込み -->
  <link rel="stylesheet" href="./css/style.css">
  
  <!-- Google Fonts 読み込み -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

</head>
  
<body>
  
  <header></header>
  
  <main></main>
  
  <footer></footer>
  
</body>

</html>

CSSの雛形

body {
  font-family: "Noto Sans JP", sans-serif;
}

@media screen and (max-width: 767px) {
  
}

掲載テキスト

あらゆる規模の企業に最適なクラウドサービスを提供
WATAAME

弊社のクラウドソリューションは、最先端のテクノロジーを駆使して設計されています。ビジネスの成長を加速させ、運用の効率化を図るために、セキュリティ、スケーラビリティ、カスタマイズの各面で優れたサービスを提供します。

クラウドを通じて未来を創造する
About

私たちは、クラウドコンピューティングの技術を駆使して、あらゆるビジネスが直面する挑戦に対応する革新的なソリューションを提供します。クライアントの持続可能な成長を支える信頼性高いサービスと、個々のニーズに合わせたカスタマイズを通じて、ビジネスの可能性を広げます。

最先端クラウドソリューションでビジネスを変革
Service

クラウドホスティング

提供するクラウドホスティングサービスは、企業の規模やニーズに関わらず、高性能かつ柔軟性に富んだインフラを保証します。最新のセキュリティ技術により、データを安全に保ちながら、高いアクセシビリティを実現します。

クラウドストレージ

当社のクラウドストレージソリューションは、顧客の具体的なデータストレージ要件に応じてカスタマイズ可能です。スケーラブルなストレージオプションにより、成長するビジネスのニーズに柔軟に対応します。

アプリケーション開発

ビジネスの特定の要求に応じたアプリケーション開発を通じて、クライアントの業務効率を向上させます。私たちは、ユーザーフレンドリーで、かつ強力なカスタムアプリケーションの提供に注力しています。

私たちの歩みとビジョン
Company

私たちは、クライアントとの長期的な関係を大切にし、それぞれのニーズに細かく応えるカスタマイズされたサービスを提供します。セキュリティ、信頼性、アクセシビリティを最前線に置き、クライアントが安心してビジネスを運営できる環境を保証します。

まずはお問い合わせ

私たちはクライアント一人ひとりの声に耳を傾け、最適なクラウドソリューションを提供するためのアドバイスとサポートを心がけています。プロジェクトの相談、サービスに関する詳細な情報、またはお見積もりのご依頼など、どんな小さな疑問にも迅速に対応いたします。

© wataame

画像素材

カステラ不動産

HTMLの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title></title>
  
  <!-- リセットCSS 読み込み -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
  
  <!-- style.css 読み込み -->
  <link rel="stylesheet" href="./css/style.css">
  
  <!-- Google Fonts 読み込み -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap" rel="stylesheet">

</head>
  
<body>
  
  <header></header>
  
  <main></main>
  
  <footer></footer>
  
</body>

</html>

CSSの雛形

body {
  font-family: "Noto Serif JP", serif;
}

@media screen and (max-width: 767px) {
  
}

掲載テキスト

北極・南極ならおまかせ
カステラ不動産

北極・南極の不動産なら
私たちにお任せください
不動産取り扱い件数 No.1
顧客満足度 99.9%

月面エリアの不動産も対応可能！お気軽にご相談ください！

Vision
経営理念

私たちは北極や南極といったエリアの不動産をより手軽により便利に扱えるよう仲介する不動産会社です。

それはもうカステラを置くかのように建物を建てますし、カステラを売買するかのように不動産を売買します。

Business
事業内容

Service 01
極地専門不動産仲介サービス
北極や南極での住宅や商業施設の売買および賃貸を専門に扱います。
極地特有の環境条件を理解している専門チームが、顧客に最適な不動産を提供します。

Service 02
極地開発コンサルティング
北極及び南極での不動産開発プロジェクトに対するコンサルティングサービスを提供します。
規制、環境影響評価、建築技術に関する専門的アドバイスを行い、持続可能な開発を支援します。を理解している専門チームが、顧客に最適な不動産を提供します。

Service 03
月面エリア不動産サービス
月面における不動産の購入、売却、または賃貸に関する仲介と管理を行います。
宇宙法規制に基づき、安全かつ合法的な取引を顧客に保証します。

Service 04
不動産オンラインプラットフォーム
北極・南極、さらには月面エリアの不動産をオンラインで検索、購入、売却できるプラットフォームを開設します。
このプラットフォームでは、リアルタイムの不動産情報、仮想現実内覧、そしてAIによる投資アドバイスを提供します。

Property
物件情報

北極エリアのエコフレンドリー・リサーチセンター
この施設は、厳しい北極の気候に耐えるために高度な技術で建設された、持続可能なリサーチセンターです。太陽光発電と地熱利用でエネルギーを供給し、科学者や研究者に最適な環境を提供します。

南極コンドミニアム・ヴィレッジ
南極大陸の魅力的な風景を一望できるコンドミニアム群です。各ユニットは完全断熱仕様で、極寒の中でも暖かく快適に過ごせます。共有スペースには交流促進のためのカフェやレクリエーションエリアが完備されています。

月面開拓者向け居住モジュール
宇宙旅行が現実のものとなる中、月面での生活を始めるための居住モジュールを提供します。最先端の生命維持システムと放射線保護を備え、小さなコミュニティを形成することが可能です。

北極ラグジュアリーホテル＆スパ
北極圏内での贅沢な体験を提供するホテルです。オーロラを眺めることができる特別な部屋や、地元の自然を生かしたスパトリートメントを提供し、極地でも極上のリラクゼーションを提供します。

Contact
お問い合わせ

北極・南極、そして月面の不動産に関するご質問やご相談がありましたら、お気軽にお問い合わせください。専門のスタッフが一つ一つ丁寧に対応いたします。

Copyright © 2024 カステラ不動産. All rights reserved.

画像素材

Career

HTMLの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title></title>
  
  <!-- リセットCSS 読み込み -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
  
  <!-- style.css 読み込み -->
  <link rel="stylesheet" href="./css/style.css">
  
  <!-- Google Fonts 読み込み -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">

</head>
  
<body>
  
  <header></header>
  
  <main></main>
  
  <footer></footer>
  
</body>

</html>

CSSの雛形

body {
  font-family: "Noto Sans JP", sans-serif;
}

@media screen and (max-width: 767px) {
  
}

掲載テキスト

あなたのキャリア次の一歩を踏み出そう

マーケットの最新情報と個別カウンセリングで、未来への道を一緒に考えます。

About
私たちについて

私たちのビジョンは、すべての人が自分自身のキャリアパスを自由に描ける社会を実現することです。

一人ひとりが自分の可能性を最大限に発揮し、充実した職業生活を送ることができるよう、継続的なサポートを提供します。

About
私たちについて

私たちのビジョンは、すべての人が自分自身のキャリアパスを自由に描ける社会を実現することです。

一人ひとりが自分の可能性を最大限に発揮し、充実した職業生活を送ることができるよう、継続的なサポートを提供します。

転職支援サービス

個別のキャリア目標とスキルセットに基づいた求人の紹介、面接対策、入社後のフォローアップを含む全面的なサポートを提供します。

キャリアコンサルティング

キャリアの方向性を決定するためのカウンセリングセッション。長期的なキャリアプランの策定やスキルアップのアドバイスを提供します。

キャリア開発プログラム

専門の業界知識とスキル開発を組み合わせたカスタマイズプログラムを提供します。

Storiess
事例紹介

あなたの未来を変えることができる
実際の成功事例
私たちのサポートを受け、新しいキャリアの扉を開いた人々の物語です。

キャリアの可能性、無限大に広げよう

Copyright © 2024 Career Inc. All rights reserved.

画像素材

Mark

HTMLの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title></title>
  
  <!-- リセットCSS 読み込み -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
  
  <!-- style.css 読み込み -->
  <link rel="stylesheet" href="./css/style.css">
  
  <!-- Google Fonts 読み込み -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">

</head>
  
<body>
  
  <header></header>
  
  <main></main>
  
  <footer></footer>
  
</body>

</html>

CSSの雛形

body {
  font-family: "Noto Sans JP", sans-serif;
}

@media screen and (max-width: 767px) {
  
}

掲載テキスト

Captivating Minds, Engaging Hearts
目を引き、心を動かすマーケティング

About

私たちは人の心を動かすマーケティングで
実績を重ねてきた企業です

私たちは、マーケティング企業として、ユーザーの心を動かすマーケティングを行っています。
我々の目標は魅力的なコンテンツと効果的な戦略を通じてユーザーの興味を引き、彼らの心に深く触れることです。
私たちのアプローチは単なる広告ではなく、感動的な体験を提供し、ブランドの魅力を最大限に引き出します。

Our Service
私たちのサービスは、クリエイティブなアプローチと戦略的なマーケティングを組み合わせて、クライアントのブランドの成長と成功を促進します。
デジタル広告、コンテンツ制作、ブランド戦略の分野で豊富な経験を持つ専門家が、クライアントのニーズに合わせたカスタマイズされたソリューションを提供します。

デジタル広告の最適化
当社は、デジタル広告キャンペーンの企画、実施、最適化を行います。ターゲットオーディエンスの分析やデータドリブンなアプローチを通じて、効果的な広告メッセージを届け、クライアントの目標達成に貢献します。

コンテンツ制作とブランドストーリー
我々のチームは、魅力的なコンテンツの制作とブランドストーリー作成に長けています。クライアントのブランドメッセージを明確に伝え、ユーザーの興味を引きつけるコンテンツを提供し、ブランドのイメージを強化します。

ブランド戦略の開発と実行
私たちは、クライアントの独自のブランド戦略を開発し、実行します。市場調査や競合分析を通じて、ブランドのポジショニングやメッセージングを最適化し、競争力のある市場での成功を支援します。

Our Works

私たちのマーケティング実績
これまでに数々のブランドとの成功を手掛け、魅力的なコンテンツと効果的な広告キャンペーンを通じて、ユーザーの心を動かし、顧客の期待を超える結果をもたらしてきました。
私たちの仕事は、単なる数字や成果だけではなく、感動と共感を生み出し、ブランドの持つ魅力を最大限に引き出すことにあります。

Contact Us

お問い合わせ
ご質問やご相談がございましたら、お気軽にお問い合わせください。
私たちの専門家チームが迅速に対応し、最適なソリューションを提供いたします。
お客様のビジネスの成功をサポートするために、心からお手伝いさせていただきます。

Copyright © 2024 Mark Inc. All rights reserved.

画像素材

ITcom

HTMLの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title></title>
  
  <!-- リセットCSS 読み込み -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
  
  <!-- style.css 読み込み -->
  <link rel="stylesheet" href="./css/style.css">
  
  <!-- Google Fonts 読み込み -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap" rel="stylesheet">

</head>
  
<body>
  
  <header></header>
  
  <main></main>
  
  <footer>© ITcom Inc.</footer>
  
</body>

</html>

掲載テキスト

TechSolutions

未来をつくる<br>テクノロジーソリューション

Shaping the Future with Innovative Technology Solutions

カスタムソフトウェア開発

私たちはビジネスのニーズに合わせてカスタマイズされたソフトウェアソリューションを提供します。効率的で使いやすいアプリケーションを開発し、ビジネスプロセスを最適化します。

クラウドソリューション

クラウドテクノロジーを活用し、スケーラブルで柔軟なソリューションを提供します。ビジネスデータの安全な保管とアクセスを確保します。

データ分析

当社のデータ分析サービスは情報を把握し、トレンドを特定し、ビジネスの成長を促進するためにデータの力を活用するお手伝いをするために設計されています。

テクノロジーでビジネスを革新しよう

ITcomは革新的なテクノロジーソリューションを提供し、クライアントのビジネスを強化します。<br>
<br>
私たちの専門家のチームは、ビジョンを実現し、競争力を高めるためのパートナーとしてお手伝いします。

テクノロジーへの情熱と革新の原動力

ITcomは単なるテクノロジーの提供者ではありません。<br>
私たちは情熱と創造性をもってテクノロジーを活用し、革新的なソリューションを提供します。<br>
<br>
私たちの専門家たちは、お客様のビジョンを共有し、ビジネスにテクノロジーの力を結集させます。

新製品の発表をしました

ウェビナーの開催をしました

クラウドソリューションの新機能を追加しました

ホームページをリニューアルしました

画像素材

itcom/submit.php

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $to = "test@test.com"; // 受信者のメールアドレス
    $subject = "フォームからのお問い合わせ"; // メールの件名

    $name = $_POST["name"];
    $email = $_POST["email"];
    $message = $_POST["message"];

    // メールの本文をUTF-8でエンコード
    $message_body = "名前: " . $name . "\n";
    $message_body .= "メールアドレス: " . $email . "\n";
    $message_body .= "お問い合わせ内容: " . $message;

    // メールヘッダーを設定
    $headers = "MIME-Version: 1.0" . "\r\n";
    $headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n";
    $headers .= "From: " . $email . "\r\n"; // 送信者のメールアドレスを設定

    // メールを送信
    $success = mail($to, $subject, $message_body, $headers);

    if ($success) {
        header("Location: complete.html");
    } else {
        echo "お問い合わせの送信中にエラーが発生しました。";
    }
}
?>

BLASTING SPEED

HTMLの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title></title>
  
  <!-- リセットCSS 読み込み -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
  
  <!-- style.css 読み込み -->
  <link rel="stylesheet" href="./css/style.css">
  
  <!-- Google Fonts 読み込み -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap" rel="stylesheet">

</head>
  
<body>
  
  <header></header>
  
  <main></main>
  
  <footer>© Bakusoku Inc.</footer>
  
</body>

</html>

掲載テキスト

YouTubeで<br>Web制作を効率的に学ぶ

Web制作の独学ロードマップへようこそ。このチャンネルではWeb制作をYouTubeで学べるような動画を投稿しています。<br>
<br>
投稿者はフリーランスとしてWeb制作で生計を立てている人間です。歴は5〜6年程。<br>
このチャンネルで学べば、フリーランスとしての独立や副業での副収入を目指せます。<br>
<br>
少しだけWeb制作ができる友人にゆるく教わっているくらいの感覚で見続けてくれたら嬉しいです。

Web制作を学べば可能性が広がる

Web制作で収入を得ることができるようになれば、人生の選択肢が増えます。<br>
<br>
僕は元々Web制作とは関係ない業種で会社員として働いていたのですが、Web制作を学ぶことで自分の求める生活に一歩近づくことができました。<br>
<br>
Web制作には、時間に余裕を持てたり、自由なお金を手に入れたりできる力があります。

一緒にWeb制作を学ぶ仲間大募集中です。

一緒にWeb制作を学ぶ仲間大募集中です。

チャンネル登録やコメントをしてご参加ください！

画像素材

ハンバーガーメニュー

HTMLの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>タイトル</title>
  
  <!-- リセットCSS（Destyle.css）-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
  
  <!-- CSS読込み -->
  <link rel="stylesheet" href="./css/style.css" />
  
  <!-- Google font-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@400;500;700&display=swap" rel="stylesheet">

</head>
  
<body>
  
  <header></header>
  
  <main></main>
  <footer></footer>
  
  <script>
    const hmbBtn = document.getElementById("hmb");
    const header = document.getElementById("header");

    hmbBtn.addEventListener("click", function() {
      header.classList.toggle("active");
    });
  </script>
  
</body>

</html>

Banana

HTMLの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>タイトル</title>
  
  <!-- リセットCSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
  
  <!-- style.css -->
  <link rel="stylesheet" href="./css/style.css">
  
  <!-- Google font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@400;500;700&display=swap" rel="stylesheet">

</head>
  
<body>
  
  <header></header>
  
  <main></main>
  
  <footer></footer>
  
</body>

</html>

画像素材

Saise

HTMLの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>タイトル</title>
  
  <!-- リセットCSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
  
  <!-- style.css -->
  <link rel="stylesheet" href="./css/style.css">
  
  <!-- Google font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">

</head>
  
<body>
  
  <header></header>
  
  <main></main>
  
  <footer></footer>
  
</body>

</html>

Twitterタイムラインを埋め込むためのページ

https://publish.twitter.com

画像素材

salad meeting

HTMLの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>タイトル</title>
  
  <!-- リセットCSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">
  
  <!-- style.css -->
  <link rel="stylesheet" href="./css/style.css">
  
  <!-- Google font -->
  

</head>
  
<body>
  
  <header></header>
  
  <main></main>
  
  <footer></footer>
  
</body>

</html>

掲載テキスト

salad meeting

Concept
Service
Company

Fresh connections, one salad at a time.
新鮮なつながりを、ひとつのサラダから

Concept
健康と交流を促進する、サラダをテーマにした交流のかたち

「Salad Meeting」のコンセプトは健康的な食生活を促進しながら、ビジネスや社会人交流の場を提供することです。

サラダは、栄養価の高い食材を組み合わせた健康的な食事であり、また、ビジネスや社会人交流の場での軽食としても人気があります。Salad Meetingでは、健康的な食事を通じて、ビジネスや社会人交流の場を提供し、参加者の健康と交流を促進します。

また、サラダの材料を組み合わせるように様々な業種や分野の人々が交流し、新しいアイデアやビジネスチャンスを生み出す場でもあります。

Service

サラダを提供するビジネスランチイベント

健康的な食事を提供しながら、ビジネスや社会人交流の場を提供するイベントです。参加者は、自由にサラダの材料を選び、オリジナルのサラダを作りながら、楽しく交流することができます。

サラダレシピの共有プラットフォーム

サラダの作り方や材料の組み合わせなど、サラダに関する情報を共有するプラットフォームです。ユーザーは、自分が作ったオリジナルのサラダレシピを投稿し、他のユーザーと情報を共有することができます。

サラダに関するイベント情報の提供

サラダに関するイベント情報を提供するサービスです。例えば、サラダのフェスティバルやサラダのレシピコンテストなど、サラダに関するイベント情報を提供し、ユーザーが新しいサラダのレシピを学んだり、サラダに関する情報交換をすることができます。

Company

会社名
株式会社サラダ会議 　salad meeting

所在地
東京都トマト区レタス南3丁目

設立
2023年7月6日

代表者名
更田 沙羅 🥗

© salad meeting Inc.

画像素材

CSSが使えるようになる動画

コピー用のHTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="./css/style.css" />
  
  <title>40分でCSSが使えるようになる動画</title>
</head>
  
<body>
  
  <header>header</header>
  
  <main>
    <div id="onigiri">
      不思議なことがあるものだね
      <div class="shake">しゃけ</div>
    </div>
    <div id="omusubi">
      まさか牛が馬に変わるなんて
    </div>
    
    <div class="hanpen">
      今日も天気がいいなあ
    </div>
    <div class="hanba-gu">
      ミネラルでも集めてみようかな<br>
      ミネラルでも集めてみようかな
    </div>
    
    <h1>ラララララ。今日も私は歌うわ？</h1>
    <h2>電柱に張り付いたベーコンには誰も触れない</h2>
    <ul>
      <li>紹興酒で乾杯</li>
      <li>私は待つ。ボールペンのバネが飛び出すまで</li>
      <li>耳の穴の蓋みたいなやつ。イヤホン抑えるのに便利よね。耳の穴の蓋みたいなやつ。イヤホン抑えるのに便利よね。耳の穴の蓋みたいなやつ。イヤホン抑えるのに便利よね。耳の穴の蓋みたいなやつ。イヤホン抑えるのに便利よね。耳の穴の蓋みたいなやつ。イヤホン抑えるのに便利よね。耳の穴の蓋みたいなやつ。イヤホン抑えるのに便利よね。耳の穴の蓋みたいなやつ。イヤホン抑えるのに便利よね。耳の穴の蓋みたいなやつ。イヤホン抑えるのに便利よね。耳の穴の蓋みたいなやつ。イヤホン抑えるのに便利よね。耳の穴の蓋みたいなやつ。イヤホン抑えるのに便利よね。耳の穴の蓋みたいなやつ。イヤホン抑えるのに便利よね。耳の穴の蓋みたいなやつ。イヤホン抑えるのに便利よね。</li>
    </ul>
  
  </main>
  
  <footer>footer</footer>
  
</body>

</html>

HTMLが使えるようになる動画

HTMLの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="./css/style.css">
              
  <title>タイトル</title>
</head>
  
<body>
  
</body>

</html>

tableタグについて

動画内では何故かdlタグと混同して解説してしまいました。
以下が正しい使い方です。
<table>
  <thead>
    <tr>
      <th>項目のタイトル①</th>
      <th>項目のタイトル②</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>中身A</td>
      <td>中身B</td>
    </tr>
    <tr>
      <td>中身a</td>
      <td>中身b</td>
    </tr>
  </tbody>
</table>
theadで表のヘッダーを作り、tbodyの中で表の中身・要素を作っていくイメージです。

魔王の城

HTMLの雛形

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <title>タイトル</title>
</head>
  
<body>
  
</body>

</html>

リセットCSS（destyle.css）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.css">

メディアクエリ

@media only screen and (max-width: 960px) {
  
}
  
@media only screen and (min-width: 480px)　and (max-width: 768px) {
  
}

掲載テキスト

トップページ

何度負けても立ち上がる
WE NEVER GIVE UP.

MESSAGE

運命から眼をそらせ。
たとえ敗北のシナリオでも
我々は諦めない。

世界各地には多くの勇者が存在します。
一般家庭で育った者から一流の訓練を受けた者、
特別な血筋を持つ勇者、神や精霊から特異な力を与えられた
勇者など、様々な武闘派がパーティを率いています。

それら勇者の大群が我々魔王の城に攻め込んでくるのです。
それも伝説の剣なんかを振り回して。

しかも毎日のように。野蛮ですね。

勇者は負けても他者の力で蘇り、経験値までも引き継ぎます。

我々魔王軍にレベルアップの権利はありません。
最初に配られたカードのみで戦うしかないのです。

SERVICE
事業内容

魔王城保守
魔王城修繕
魔王城運営

CONTACT
お問い合わせ

過去、魔王城に乗り込んだ方より忘れ物に関するお問い合わせや謝罪の声が多く届いておりますが、対応致しかねますのでご了承ください。

魔王城敷地内に無断で乗り込んだ場合、例外なく法的措置をとらせていただきます。

Copyright © 2023 魔王の城 All rights reserved.

会社概要ページ

会社概要
Company

会社名	魔王の城
住所	〒66G-6666
魔界都市ディアブロシティ 魔王城
設立	2000年4月18日
資本金	1億円
取引銀行	魔界中央ディアバンク

ACCESS
アクセス

事業内容

事業内容
Service

SECURITY
魔王城保守

毎日のように攻め込んでくる勇者パーティから魔王城を守ります。
基本的には話し合い・説得がメインですが、話のわからない勇者パーティや戦闘狂い、宝や報奨金目当ての勇者パーティとは戦闘になる可能性もあります。

REPAIR
魔王城修繕

いたずらや勇者パーティに壊された魔王城の修繕業務を行います。
魔王城に限らず、周辺住民の建築物の修繕サポートも行っております。

OPERATION
魔王城運営

冒険者や窃盗犯に奪われた備品の補充や魔王城で働く従業員の衣食住を支えます。
近年、増え続けている勇者の忘れ物やお問い合わせ、クレーム対応なども行います。

お問い合わせ

お問い合わせ
Contact