HTMLとは

PCがそのページのレイアウトを理解できるようにすることがHTMLの役目だよ

 コンピューターに指示を出すのがHTML
Webページの土台となるファイルを作成する言語。
Webページに表示したい文書などを「<」と「>」（タグ）で囲んで書いていきます。

（例）

よく使う代表的なタグ

サイト作るには必ず使うタグだよ

HTMLファイルの骨組み

HTMLを作るってことは、サイトの骨組みを作るってことだよ

見出しをつける

見出しタグは <h1>~<h6> まであるよ。

見出しタグを使う順番は
大見出しとなる<h1>
中見出しは<h2>
小見出しは<h3>
と上から順番に使っていきます。

文章を表示する

<p>タグは、文章の段落のことだよ

<p>タグは 「段落（パラグラフ）」を表すHTMLタグ で文章のブロックを作るときに使います。
ブラウザで表示すると、自動的に 前後に改行（マージン） が入ります。

（例）
　　　<p>1つ目の段落です</p>
　　　<p>2つ目の段落です</p>

※<p>タグが連続すると自動的に改行されます
※段落の中に他のブロック要素（例:<div>や<h1> ）を入れられません

画像を表示する<img>タグ

Webページに画像を表示したい！
そんなときに使うのが<img>タグだよ

【基本の書き方】
<img src=”画像のURL” alt=”画像の説明”>
（例）
<img src=”sakura.jpg” alt=”桜”>

・srcは画像のURL（ファイルパス）
・altは画像が表示されなかった時の説明

・alt=””が空のままだとSEOに弱くなる
・サイズの指定なしで表示するとレイアウトが崩れることもあります

ファイルパスを指定（同じフォルダの中にあるとき）

ファイルパスは、画像ファイルがどこに置いてあるかを伝える「住所」のようなものだよ
下の場合は「sakura.jpg」って画像がおいてある場所を示してるよ

相対パス

自分のHTMLファイルを起点に、相対的に画像の場所を指定する方法です。

ファイルパスを指定（フォルダの中にあるとき）

フォルダにある「sakura.jpg」の画像ファイルを利用する方法だよ

同じ階層にあるフォルダー内のファイルを指定する時は、「/」を使い「フォルダー名/ファイル名」を書きます。

ファイルパスを指定（別のフォルダにあるとき）

「HTML」ファイル「sakukra.jpg」画像ファイルが別のフォルダにある場合だよ

別のフォルダーにある場合は、「../」を使い１つ上の階層に行く指定をします。

絶対パスを指定

外部サーバー※にある画像を読み込みたいときに使うよ

Web上の「画像の住所」をURLで正確に指定する方法です。「https://〜」から始まるURLで、画像ファイルの場所を完全に指定しているのが絶対パスです。

HTMLでリンクを貼ろう！基本の<a>タグの使い方

Webページにはクリックすると別ページに移動する「リンク」が欠かせないよ。
そのリンクを作るために使うのが <a>タグ（アンカータグ）だよ

【リンクの基本構文】
<a href=”リンク先のURL” >リンクテキスト</a>
（例）
<img src=”https://www.ailesys.co.jp/“>エールシステムはこちら<ia>

このように、href属性でURLを指定して、クリックできる文字をタグの中に書きます。

別タブ（別ページ）で開く場合
<a href=”https://www.ailesys.co.jp/” target="_blank">エールシステムはこちら</a>

リスト表示しよう！ul・ol・liタグの基本と使い方

Webページで情報をわかりやすく並べたいとき、便利なのが「リスト」！
リストを使うと、読みやすくて整った見た目になるよ

順番なしリスト（ul）の例

順番ありリスト（ol）の例

・<li> は必ず <ul> か <ol> の中に入れます。
・並び順があるときは <ol>、なければ <ul> がベストです。

HTMLで表を作ろう！基本のtableタグでデータを見やすく整理！

HTMLで表を作るのはとっても難しいよ
少しずつ分解して把握するといいよ

シンプルな表の例

表に枠線をつける方法（CSS）

HTMLだけだと枠線は出ないので、CSSをちょっと追加します

フォームを作ろう！ユーザーとつながる入力フォームの基本

フォームは、ユーザーが名前を入力したり、メールを送ったり、アンケートに答えたりするときに使う入力エリアのこと。
HTMLでは<form>タグを使って作るよ！

<form action="/send" method="post">
  <label for="name">お名前：</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">メールアドレス：</label>
  <input type="email" id="email" name="email"><br>

  <label for="message">メッセージ：</label><br>
  <textarea id="message" name="message" rows="4" cols="40"></textarea><br><br>

  <button type="submit">送信</button>
</form>

action="/send" は、入力されたデータを送る先のURL（今回は例）
method="post" は、送信方法（フォームではPOSTがよく使われる）
<label> は入力欄の説明。for 属性でどの入力欄に対応してるかを指定
<input> は色んな種類がある！（type="text", type="email" など）

<label for="color">好きな色を選んでね：</label>
<select id="color" name="color">
  <option value="">選んでください</option>
  <option value="pink">ピンク</option>
  <option value="blue">ブルー</option>
  <option value="yellow">イエロー</option>
</select>
<style>
select {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ffd1e1;
  background-color: #fffafc;
  font-size: 16px;
  color: #555;
}
</style>

より使いやすいフォームにしよう♪ ユーザー思いのデザイン＆工夫のポイント

フォームは、ユーザーがフォームが使いにくいと、ユーザーは途中で離れちゃうことも…
でも、ちょっとした工夫で「入力しやすい！」「わかりやすい！」って思ってもらえるフォームにできちゃうよ

<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email">

<input type="text" placeholder="例：エール花子">

<label for="name">お名前 <span class="required">※必須</span></label>
<input type="text" id="name" name="name" required>

<input type="checkbox" id="ichigo">
<label for="ichigo">いちご</label>
<input type="checkbox" id="banana">
<label for="banana">バナナ</label>

HTMLのグループ分けってなに？基本のタグと使い方をやさしく解説♪

Webページは「見た目」だけじゃなくて、「意味」でもちゃんと整理されているともっと使いやすくなります。

<main>
    <article>
      <h1>最近の記事</h1>
      <p>HTMLとCSSでふんわりガーリーなフォームを作ってみよう♪</p>
    </article>
  <section>
　　　<h2>かわいいフォームおすすめ</h2>
      <p>ガーリーなフォーム</p>
  </section>
</main>

ページの顔をつくるヘッダーの基本

<header> タグとは？

<header> タグは、ページやセクションの“はじまり”に使うパーツ！
たとえばこんな内容を入れるのにぴったりです。

• サイトのロゴやタイトル
• ナビゲーションメニュー（<nav>）
• キャッチコピーやメイン画像

<header>
    <h1>
        ページタイトル
    </h1>
    <p>
        ページの説明文がここに入ります。<br>
        ここでは、ページの内容や目的について簡潔に説明します。
    </p>
</header>

 DEMO

ページタイトル

ページの説明文がここに入ります。
ここでは、ページの内容や目的について簡潔に説明します。

<nav class="test">
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">ブログ</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>
<style>
.test ul {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.test a {
  text-decoration: none;
  color: #ff6fa5;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 10px;
  transition: background-color 0.3s;
}

.test a:hover {
  background-color: #ffe5f0;
}
</style>

 はじめてのCSS サイトをかわいく着せかえする魔法のスタイルシート 

CSS（Cascading Style Sheets）って難しい名前なんだけど、簡単に言うと「HTMLで作ったページに色やレイアウトなどのデザインをつける」ための言語だよ。HTMLが「骨組み」なら、CSSは「お洋服」や「メイク」みたいなものだね！

 CSSを適用する方法 

CSSは、HTMLと組み合わせてはじめてデザインが反映されるよ。
CSSとHTMLを“つなぐ方法”には、大きく3つの書き方があるよ！

<p style="color: pink;">こんにちは♪</p>

<head>
  <style>
    p {
      color: pink;
      font-size: 18px;
    }
  </style>
</head>

方法③ 外部CSSファイルをリンクする（コレがおすすめ！）

CSSを別ファイルにして、HTMLとリンクさせる方法です

<head>
  <link rel="stylesheet" href="style.css">
</head>

CSSファイル（style.css）の中にこのように書きます

body {
background-color: #fff0f6;
font-family: "Hiragino Kaku Gothic ProN", sans-serif;
}

適用方法はHTMLファイルの<head>内に<link>タグを使ってCSSファイルを指定します。
rel属性に「stylesheet」
href属性に「CSSファイルのパス」
を書きます。

rel属性って？
リンク先との関係性をブラウザや検索エンジンに伝える役割のことだよ

複数ページで同じCSSを使い回せる、管理しやすくて、プロっぽいサイトにも使えます

CSSファイルを作ろう はじめてのスタイルシート作成ガイド

”CSSファイルは、Webページの見た目を決める専用のファイルだよ
拡張子は「.css」で、HTMLからリンクして使うのが基本には、大きく3つの書き方があるよ！

body {
  background-color: #fff0f6;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
}

h1 {
  color: #ff6fa5;
  font-size: 28px;
}

<link rel="stylesheet" href="style.css">

 CSSの基本の書き方を身につけよう 

CSSは、HTMLの要素（文字や画像など）に
「どこに」「どんなデザインを当てるか」を指示するためのルールだよ

h1 {
  color: #ff69b4;     /* 色をピンクに */
  text-align: center; /* 中央寄せに */
}

 CSSで複数のセレクタをまとめてスタイル指定しよう

h1, h2, h3 {
  color: #ff6fa5;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
}

p, li {
  font-size: 16px;
  color: #555;
}

.button, input[type="submit"] {
  background-color: #ffadd6;
  border-radius: 999px;
  color: #fff;
}

 文字や文章をCSSでかわいく装飾しよう♪

CSSを使えば、文字の色・大きさ・行間・太さ・影など、
文章の印象をガラッと変えることができるよ〜

h2 {
  color: #ff6fa5;
  font-size: 24px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 1px 1px 3px #ffddee;
}

• 適切な文字サイズは14px〜18px程度に設定するのがおすすめです

 フォントの種類を変えよう 

font-family は、文字のフォント（書体）を変えるためのCSSプロパティだよ
文章の雰囲気をガラッと変えることができる、デザインの大事なポイント

body {
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
}

 文字の太さを変えてみよう「font-weight」 

font-weight は、文字の太さ（ウェイト）を変えるCSSプロパティだよ
フォントの太さを調整することで、文章に強弱やリズムをつけることができるんだ〜

基本の書き方

h1 {
  font-weight: bold;
}

• 数値で指定することもできます

 行の高さを変えようline-height プロパティで読みやすさアップ 

line-height は、文字と文字の行の間隔（行間）を調整するプロパティだよ
行間を広げると、文章がスッキリして読みやすく＆やさしい印象になるの

基本の書き方

p {
  line-height: 1.6;
}

• 単位なしの「1.6」っていう指定方法は「文字サイズ × 1.6」の高さになるって意味です

 指定のしかた3パターン

 文字を揃えようtext-align プロパティで見た目すっきり 

text-align は、文字や文章の横方向の位置をそろえるためのCSSプロパティだよ
テキストの見た目がグッと整って、読みやすく＆きれいに見せられるの

基本の書き方

p {
  text-align: center;
}

• この例だと、段落の文字が中央揃えになります

 よく使う値と意味

WEBフォントでサイトをもっとおしゃれに 

WEBフォントは、ネット上のフォントを読み込んで使う仕組みのことだよ
ユーザーのパソコンにそのフォントが入ってなくても、自分の好きな文字デザインを表示できるの

<link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap" rel="stylesheet">

body {
  font-family: 'Kiwi Maru', serif;
}

 おすすめGoogle Fonts（日本語対応）

CSSで色をつけよう 

CSSでは色を指定する方法がいくつかあるよ 
目的や使いやすさに合わせて選べるのがポイント 

 基本の色指定方法

h1 {
  color: pink;
}

p {
  background-color: lightblue;
}

body {
  background-color: #ffe4e1; /* パステルピンク */
}

p {
  color: rgb(255, 105, 180); /* ピンク */
}

div {
  background-color: rgba(255, 192, 203, 0.5); /* 半透明ピンク */
}

上手に配色しよう♪ 色の組み合わせ方＆色相・明度・彩度の基礎知識 

色の組み合わせひとつで、サイトの印象や伝えたいメッセージがガラッと変わるんだよ。

色の3要素：色相・明度・彩度

色相

色の種類のこと。
赤・青・緑・黄色など、の言葉で区別される色の違いのことです。

明度

明度とは色の明るさの度合いを表します。明度が高いと白に近づき、明度が低いと暗く落ち着いた雰囲気になります。

/* 明度が高い */
background-color: #ffcccc; /* パステルピンク */

/* 明度が低い */
background-color: #800000; /* ダークレッド */

彩度

色の鮮やかさの度合いの事です。
彩度が高いと鮮やかで元気な印象のイメージになり、彩度が低いとくすんで落ち着いた印象になります

/* 彩度が高い */
color: #ff69b4; /* ビビッドピンク */

/* 彩度が低い */
color: #d8bfd8; /* グレイッシュパープル */

1つのタグに複数のクラス・IDをつけられる

(例)同じタグに複数のクラス指定
<p class=”blue center small”>テキスト</p>

(例)同じタグにIDとクラスを指定
<p id=”red” class=”blue”>テキスト</p>

クラスとIDの違い

ID：ページ内で同じID名を複数回使う事ができません
クラス：ページ内で何度も使えます

※どのページでも変わることのない部分にはIDを、何度も使う部分にはクラスを使います。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
※CSSの優先順位はIDで指定した装飾のほうが優先されます

①ルールを統一させます

クラス名の書き方がバラバラだと、後から見たときに分かりにくくなるよ。

②使い回せるCSSを書く

「似たようなスタイルを何度も書く」のは大変だよね
ボタンやカードのデザインは、共通クラスを作っておくと便利だよ

③クラス名は英単語に統一する

クラス名には英単語でわかりやすいものを使うといいよ

④英単語の省略語