MENU
  • 企業情報– About –
    • 採用情報– Recruit –
    • 特色・社内写真・イベント
      • Ailesystem「30周年記念」
      • 健康経営の取り組み
    • アクセス
  • システム開発– System –
    • 開発製品紹介
      • アプリ更新履歴– Update –
        • UNIPro2
        • Progress21
        • B-POP
    • Kintoneでシステム開発
  • Web制作– Web Service –
    • レイスタープランRaystar
    • モナルミナプラン
    • シャレースプラン
    • Webメンテナンスサービス
    • コンサル・ディレクション
    • マニュアル
  • ツール– Browser tool –
  • ゲーム– Game –
  • 制作実績– Works –
    • ホームページ
    • システム
    • ソフトウェア
  • ブログ– Blog –
  • お問合せ– contact –
  • ショップ– Online Shop –
    • UNIPro2
    • Progress21
    • B-POP
    • UniversePro
  • – cart –
株式会社エールシステム|長野県小諸市 - システム開発・Webサイト制作
  • 企業情報– About –
    • 採用情報– Recruit –
    • 特色・社内写真・イベント
      • Ailesystem「30周年記念」
      • 健康経営の取り組み
    • アクセス
  • システム開発– System –
    • 開発製品紹介
      • アプリ更新履歴– Update –
        • UNIPro2
        • Progress21
        • B-POP
    • Kintoneでシステム開発
  • Web制作– Web Service –
    • レイスタープランRaystar
    • モナルミナプラン
    • シャレースプラン
    • Webメンテナンスサービス
    • コンサル・ディレクション
    • マニュアル
  • ツール– Browser tool –
  • ゲーム– Game –
  • 制作実績– Works –
    • ホームページ
    • システム
    • ソフトウェア
  • ブログ– Blog –
  • お問合せ– contact –
  • ショップ– Online Shop –
    • UNIPro2
    • Progress21
    • B-POP
    • UniversePro
  • – cart –
株式会社エールシステム|長野県小諸市 - システム開発・Webサイト制作
  • 企業情報– About –
    • 採用情報– Recruit –
    • 特色・社内写真・イベント
      • Ailesystem「30周年記念」
      • 健康経営の取り組み
    • アクセス
  • システム開発– System –
    • 開発製品紹介
      • アプリ更新履歴– Update –
        • UNIPro2
        • Progress21
        • B-POP
    • Kintoneでシステム開発
  • Web制作– Web Service –
    • レイスタープランRaystar
    • モナルミナプラン
    • シャレースプラン
    • Webメンテナンスサービス
    • コンサル・ディレクション
    • マニュアル
  • ツール– Browser tool –
  • ゲーム– Game –
  • 制作実績– Works –
    • ホームページ
    • システム
    • ソフトウェア
  • ブログ– Blog –
  • お問合せ– contact –
  • ショップ– Online Shop –
    • UNIPro2
    • Progress21
    • B-POP
    • UniversePro
  • – cart –
  1. ホーム
  2. ブログ
  3. Web知識
  4. Webデザイナー入門
  5. 【Webデザイナー入門ブログ】HTMLの基本!Webの基本構造を知る

【Webデザイナー入門ブログ】HTMLの基本!Webの基本構造を知る

2025 5/13
2025年4月16日2025年5月13日
目次

HTMLの基本!Webの基本構造を知る

HTMLとは

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

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

(例)

よく使う代表的なタグ

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

タグ役割
 h 見出し(h1,h2…)
 p 段落
 a リンク
 div 範囲を指定

HTMLファイルの骨組み

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

  • 1行目にDoctype宣言
  • これは「html」の文章だという事を表しています。「lang」はWebページの言語を設定できる部分で「ja」は日本語の略です
  • <head> </head>は外部ファイルやリンクなど、ページ情報を記述します
  • 文字コードを<meta charset=”UTF-8”>にする指定です
  • <title> </title>ページのタイトルを記述します
  • <meta name=”description”content=””>
    検索エンジンでページのタイトルとともに表示される部分です
  • <body> </body>HTML文書の本体部分

見出しをつける

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

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

 まとめ

<h1>は1つのWebページにつき1つがおすすめです

文章を表示する

<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に弱くなる
・サイズの指定なしで表示するとレイアウトが崩れることもあります

 まとめ

  • <img>タグは画像表示の基本!
  • srcとaltはセットで使おう
  • サイズや読み込みの工夫で、見た目も使い勝手もUP!

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

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

相対パス

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


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

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

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

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

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

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

絶対パスを指定

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

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

 まとめ

  • 絶対パスは「世界中の誰でもアクセスできる画像のURL」
  • 外部の画像やCMSでアップロードされた画像を使うときに便利です
  • リンク切れ対策やマナーには気をつけるといいです!
  • サーバーとは?
    Webサイトを公開するのに必要な土地と住所を管理するものと思うとわかりやすいです。
    この外部サーバーというのは、サイトの土地と住所の管理が外部の機能ってイメージです。

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

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

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

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

外部リンク

  • Webサイトの外(別ドメイン)に飛ばすリンク。

<a href="https://google.com">Googleで検索</a>

内部リンク

  • 自分のサイト内の別ページに飛ばすとき。

<a href="/about.html">このサイトについて</a>

メールリンク

  • クリックするとメールソフトが開くリンク。

<a href="mailto:info@○○.com">メールでのお問い合わせはこちら</a>

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

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

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

スクロールできます
タグ意味表示のされかた
 <ul> 順番なしリスト ・マーク(黒丸など)で表示される
 <ol> 順番ありリスト 数字やアルファベットで順番に表示される
 <li> リスト項目 各項目を囲むために使うタグ

順番なしリスト(ul)の例

順番ありリスト(ol)の例

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

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

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

表の基本タグ

スクロールできます
タグ意味
 <table> 表全体を囲むタグ
 <tr> 行(row)
 <td> データのセル(cell)
 <th> 見出し用のセル(太字・中央揃えになる)

シンプルな表の例

html
表示イメージ

 DEMO

名前 年齢 出身地
ぴよ丸 3 たまご村
よこた 5 妖精町

表に枠線をつける方法(CSS)

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

css
表示イメージ

 DEMO

名前 年齢 出身地
ぴよ丸 3 たまご村
よこた 5 妖精町

ちょっと応用!セルの結合

・セルを横につなげる(colspan)
 <td colspan=”つなげるセルの数“>テキスト</td>

・セルを縦につなげる(rowspan)
 <td rowspan=”つなげるセルの数“>テキスト</td>

 まとめ

border-collapse: collapse; を使うと、隣り合うセルの枠線が1本に重なって表示されるようになります。なので、枠線が重複せず、スッキリしたデザインになります!

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

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

基本のフォームタグ

スクロールできます
タグ意味
 <form> フォーム全体を囲む
 <input> テキスト・チェックボックスなどの入力欄
 <textarea> 複数行の自由入力欄
 <select> プルダウン選択メニュー
 <button> 送信などのボタン
<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>

 DEMO







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

よく使う <input> のタイプ

スクロールできます
タグ意味
 <text> 1行のテキスト入力
 <email> メール形式の入力(形式チェック付き)
 <number> 数字入力
 <checkbox> チェックボックス
 <radio> 選択肢の中から1つ選ぶラジオボタン
 <password> パスワード入力(●で表示)
 <url> WebサイトのURL

セレクトボックスを作る!

<select>タグ+<option>タグの使い方ガイド

<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>

タグの解説

スクロールできます
タグ意味
 <select> セレクトボックス全体を囲むタグ。name 属性で送信時の名前
 <option> 選択肢を1つずつ表示するタグ。value は送信される値

 DEMO

※styleCSSで可愛く装飾もできます

 まとめ

  • <select> でセレクトボックスを作ります
  • <option> は選択肢を1つずつ追加できる
  • CSSで見た目もカスタマイズして、サイトの世界観に合わせられます

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

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

フォームラベルで伝わりやすく!

**ラベル(<label>タグ)**は、入力欄が「何のためのものか」を伝える大切な存在です。
視覚的にも、アクセシビリティ的にもとっても重要です。

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

 DEMO

for="email" と id="email" をセットにすることで、ラベルをクリックしても入力欄にフォーカスされます。
画面読み上げソフトにも優しくなるから、より多くの人に使いやすくなりますよ

プレースホルダーとの違いを理解しよう

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

 DEMO

ラベル:常に見える説明文
プレースホルダー:入力前だけに見えるヒント(消えてしまうので補助的に使う)
※ラベルは必須、プレースホルダーは補足として使うのがおすすめです。

必須項目をはっきり見せよう

ユーザーが入力を迷わないように、目に入りやすくしておきます。

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

 DEMO

※styleCSSで装飾もできます

チェックボックスでもラベルは大事

チェックボックスも、テキストとセットで使います。

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

 DEMO

 まとめ

  • id は入力欄のIDを一意に設定
  • inputタグにidをつけて、labelのfor属性でリンクさせる

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

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

グループ分けってなに?

  • 検索エンジンに正しく内容が伝わる
  • 読み上げソフトでもわかりやすくなる
  • CSSやJavaScriptでスタイルや動きをつけやすくなる

よく使うグループ分けタグたち

スクロールできます
タグ使いどころ意味・役割
 <div> なんでもOKなグループ分け 箱として使います
 <section> トピック単位のまとまり ページ内の区切り
 <article> 記事・投稿・レビューなど 独立したコンテンツ
 <header> 見出しやナビなど上部エリア セクションやページのヘッダー部分
 <footer> 補足情報やコピーライトなど セクションやページのフッター部分
 <main> ページのメインコンテンツ 1ページに1つだけ使うのがルール
 <aside> サイドバー・関連情報 本文と直接関係ない補足エリア
 <nav> ナビゲーションリンクのグループ サイト内のリンクまとめ

使い方のサンプル

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

 DEMO

最近の記事

HTMLとCSSでふんわりガーリーなフォームを作ってみよう♪

   
かわいいフォームおすすめ

ガーリーなフォーム

 まとめ

  • ページ内を意味ごとにグループ分けすることで、読みやすく、伝わりやすくなります♪
  • divは自由度が高くて万能、sectionやarticleは意味を持たせたいときに使います
  • HTMLがきちんと整理されてると、SEOやアクセシビリティにも効果あり◎

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

<header> タグとは?

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

  • サイトのロゴやタイトル
  • ナビゲーションメニュー(<nav>)
  • キャッチコピーやメイン画像
<header>
    <h1>
        ページタイトル
    </h1>
    <p>
        ページの説明文がここに入ります。<br>
        ここでは、ページの内容や目的について簡潔に説明します。
    </p>
</header>

 DEMO

ページタイトル

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

 まとめ

  • <body> の中に書きます
  • <header> タグは、ページやセクションの先頭の案内役
  • タイトル・ナビ・ロゴなどをまとめておくと、ユーザーにもSEOにもやさしい


タグでナビゲーションメニューを作ろう わかりやすいリンクのまとめ方

<nav> タグは、サイト内のリンク(ナビゲーション)をまとめるためのタグ
ユーザーがページを移動しやすくなる、いわば**Webページの“道しるべ”**みたいな存在です

<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>

 DEMO

  • ホーム
  • ブログ
  • お問い合わせ

※styleCSSで装飾しています

 まとめ

  • <ul>(リスト)と <li>(項目)、そして <a>(リンク)を組み合わせて作るのが基本です

CSSの基礎

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

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

【セレクター】
セレクターでは、どこを装飾するかを指定

【プロパティ】
セレクターで指定した部分の何を変えるのかを指定
※プロパティと値の間には(:)で区切ります

【値】
値はどのように変えるのか指定
※値の最後に(;)をつけます

(例)
h1{
color: blue;
font-size: 20px;
}

 CSSを適用する方法 

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

方法① インラインスタイル(直接書く)

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

 DEMO

こんにちは♪

すぐにスタイルを当てたいときに便利

方法② <style>タグを使う(HTML内にCSSを書く)

<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つの書き方があるよ!

STEP
新しいファイルを作る

パソコンで使っているテキストエディタ(VSCode、メモ帳など)で
新しいファイルを開いて、以下のようにCSSを書きます

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

h1 {
  color: #ff6fa5;
  font-size: 28px;
}
STEP
名前をつけて保存する

ファイル名は「style.css」などにして、拡張子は .css にします。

STEP
HTMLにリンクする

作ったCSSファイルをHTMLとつなげるには、HTMLの <head> の中にこのコードを書きます

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

HTMLファイルと同じフォルダにある場合は、この書き方で大丈夫です!
もし別の場所に置いたときは、パスを正しく指定してください。

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

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

 セレクタってなに?

セレクタは、「どのHTML要素にスタイルを当てるか」を決める部分です

セレクタ {
プロパティ: 値;
}

スクロールできます
セレクタ意味使用例
 p 段落(<p>タグ)すべてに適用 p { color: pink; }
 .box クラス名「box」の要素に適用 .box { padding: 20px; }
 #main ID名「main」の要素にだけ適用 main { background: #fff; }

 プロパティと値ってなに?

  • プロパティ:何を変えるか(色?サイズ?背景?など)
  • 値:その内容(赤くする?16pxにする?ピンクの背景?など)
h1 {
  color: #ff69b4;     /* 色をピンクに */
  text-align: center; /* 中央寄せに */
}

まとめ

  • {}の中にスタイルを書くきます
  • :の左がプロパティ、右が値
  • 最後は必ず「セミコロン ;」をつける

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

基本の書き方

h1, h2, h3 {
  color: #ff6fa5;
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
}
  • この例だと、h1, h2, h3 の見出し全部に同じスタイルが当たります

 いろんな組み合わせの例

複数のHTMLタグに同じスタイルを当てたいとき

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

クラスとタグをまとめることもできます

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

まとめ

  • 複数のセレクタはカンマ , で区切ってまとめてスタイル指定できます
  • まとめると、コードがすっきり整理されて見やすくなります
  • タグ同士でも、クラスやIDでも、組み合わせてOK

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

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

 よく使う文字装飾プロパティまとめ

スクロールできます
プロパティ内容使用例
 color文字の色color: #ff6fa5;
font-size文字の大きさfont-size: 18px;
line-height太さfont-weight: bold;
line-height行間(縦のゆとり)line-height: 1.6;
letter-spacing文字と文字の間letter-spacing: 1px;
text-align文字の位置(左・中央など)text-align: center
text-decoration下線・取り消し線などtext-decoration: underline;
text-shadow文字に影をつけるtext-shadow: 1px 1px 2px #ccc;

 サンプルコード(見出しをかわいく)

h2 {
  color: #ff6fa5;
  font-size: 24px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 1px 1px 3px #ffddee;
}
  • 適切な文字サイズは14px〜18px程度に設定するのがおすすめです

まとめ

  • font-size → サイト全体の雰囲気に合わせて調整します
  • line-height → 行間を広げると読みやすさUPします
  • text-shadow → ナチュラルな影で、立体感&かわいさも演出できます
  • CSSで文字を装飾すれば、読みやすさもデザイン性もアップします

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

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

基本の書き方

body {
  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
}
  • " " で囲むのは、フォント名にスペースが含まれている場合です

 よく使うフォントファミリー(日本語対応)

スクロールできます
フォント名例雰囲気書き方(例)
Hiragino Kaku Gothic ProNすっきりモダンなゴシック体"Hiragino Kaku Gothic ProN", sans-serif
Yu Gothic / YuGothicWindows向けゴシック体"Yu Gothic", "YuGothic", sans-serif
Meiryo / メイリオ丸っこくて読みやすい"Meiryo", sans-serif
游明朝 / YuMincho落ち着いた明朝体
"YuMincho", "Yu Mincho", serif
Noto Sans / Noto Serif(Web用)Googleの多言語対応フォント"Noto Sans JP", sans-serif など(※Google Fonts)
  • ゴシック体(sans-serif):太さが均等で現代的。Webに多く使われています
  • 明朝体(serif):筆で書いたような雰囲気。高級感・落ち着きが出せます

まとめ

  • font-family は、文字の雰囲気を変えるプロパティ!
  • "フォント名", fallbackフォント の順に書くのがコツです
  • 使用するフォントは1〜3種類までにとどめるといいです

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

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

基本の書き方

h1 {
  font-weight: bold;
}
  • 数値で指定することもできます

まとめ

  • font-weight は、文字の太さを変えて印象をコントロールするプロパティ
  • normal, bold, 100〜900 のいろんな書き方があります

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

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

基本の書き方

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

 指定のしかた3パターン

スクロールできます
書き方例特徴
単位なしline-height: 1.6;一番よく使う。フォントサイズに比例
pxやemで指定line-height: 24px;ぴったりの高さを決めたいとき

おすすめ行間の目安 

  • 通常の本文:1.5〜1.8
  • 小さめの文字:1.6〜2.0
  • 大きな見出し:1.2〜1.4

まとめ

  • line-height は行間(文字と文字の間)を調整するプロパティ
  • 行間を整えると、読みやすさも見た目の印象もアップ
  • 単位なしでの指定がシンプルでおすすめです

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

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

基本の書き方

p {
  text-align: center;
}
  • この例だと、段落の文字が中央揃えになります

 よく使う値と意味

スクロールできます
値説明使いどころ例
left左揃え(初期値)通常の本文・文章など
center中央揃え見出し・ボタン・タイトル
right右揃えお問い合わせ情報・金額など
justify両端揃え(幅を均等に)長めの文章・ニュース記事など

まとめ

  • text-align は、文字の横方向の位置をそろえるプロパティ
  • left, center, right, justify の4つを使い分けよう
  • 中央揃えは短文に使います

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

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

Google Fontsの使い方(かんたん3ステップ!)

STEP
好きなフォントを選ぶ

https://fonts.google.com

STEP
<link>タグをHTMLに貼る
<link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap" rel="stylesheet">
STEP
CSSで font-family を指定する
body {
  font-family: 'Kiwi Maru', serif;
}

 おすすめGoogle Fonts(日本語対応)

スクロールできます
フォント名雰囲気
Kiwi Maruゆるふわ可愛い
Noto Sans JPスッキリ&読みやすい
Sawarabi Gothicゴシックでナチュラル
Sawarabi Gothic両端揃え(幅を均等に)
Kosugi Maruまるっと優しい印象

まとめ

  • 最初に読み込みがあるから、少しだけ表示が遅れることもあります
  • たくさんのフォントを一気に使うと、サイトが重くなっちゃいます

CSSで色をつけよう 

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

 基本の色指定方法

スクロールできます
方法書き方例特徴
キーワードcolor: pink;簡単だけど色数が少ない
16進数(HEX)color: #ff69b4;Webデザインでよく使う
RGBcolor: rgb(255, 105, 180);色の強さを0〜255で指定
RGBAcolor: rgba(255, 105, 180, 0.7);透明度を加えられる
カラーピッカー色を選んで直接コード取得
キーワードで指定する

CSSには、140種類の色キーワードが用意されています

h1 {
  color: pink;
}

p {
  background-color: lightblue;
}

簡単で覚えやすいですが、色数が限られてるのでカスタム感を出すにはちょっと物足りないかもしれません!

16進数(HEX)で指定する

HEXは「#」のあとに6桁の英数字で色を表現する方法です。

body {
  background-color: #ffe4e1; /* パステルピンク */
}
RGBで指定する

RGBは、赤・緑・青の3色の強さを0〜255で表現する方法

p {
  color: rgb(255, 105, 180); /* ピンク */
}
RGBAで透明度も調整!

RGBに「A(Alpha)」を加えることで、透明度も設定できます。

div {
  background-color: rgba(255, 192, 203, 0.5); /* 半透明ピンク */
}
カラーピッカーで色を直感的に選ぶ

Googleで「カラーピッカー」と検索。

まとめ

  • HEXの省略形 → シンプルで早く書きたいとき
  • RGBA → 背景を透けさせて重ね合わせたいとき
  • 背景色には background-color、文字色には color を使う

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

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

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

色相

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

明度

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

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

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

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

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

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

まとめ

  • 色の基本は「色相・明度・彩度」の3つの要素!
  • 色相環を使うと、色の組み合わせ方が見えてくる
  • 配色パターンを意識して、統一感のあるデザインを作ってみる

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

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

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

クラスとIDの違い

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

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

管理しやすいCSS

CSSを書いていると、「どこに何のスタイルを書いたか分からなくなる」 ことありませんか?
特に、コードが増えると修正や追加が大変になってくる…。
そこで今回は、管理しやすいCSSを書くコツ を紹介します!

管理しやすいCSSのポイント

①ルールを統一させます

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

②使い回せるCSSを書く

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

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

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

④英単語の省略語

つづく・・・

STEP

 企画を立てる

 目標を設定する
 はじめにメイン目標とサブ目標を設定する
 (例)メイン:商品の売上を伸ばすなど
     サブ:商品評価を書いてもらう

 ターゲットユーザーを決める
 (例)趣味、性別、年齢層など
  ターゲットユーザーをより具体化した「ペルソナ」(22歳、女性。新しい物が好き、おしゃれなカフェでゆっくりするのが好き、入社2年目、収入は月20万、ライブが好き)とよばれる人物像を設定することでデザインの方向性が定まってきます。

 まとめ
ペルソナは実在する人物のように考えます。Webサイトの利用場面も思い浮かべてみましょう

STEP

 サイトマップ制作

 ページをグループ分けする
構成を上手にまとめるには関連するページをグループ分けすることです。
必要なページを書き出し、関連性のあるページ同士を1つのグループとして分けましょう。

 (例)

 ページの優先順位
特に見てほしいページやユーザーが求めているであろうページが何かを考えて、優先順位の高いページはすぐに目に止まるようなナビゲーションメニュー内に配置しましょう。

 まとめ
サイトマップはペンと紙があれば手書きですぐ作成可能です。階層はなるべくユーザーが迷子にならないように2階層以内がおすすめです。

STEP

 ワイヤーフレーム作成

 「ワイヤーフレーム」
全ページのレイアウトを考えます。色や装飾などは入れずテキストやライン、ボックスのみで制作します。

 (例)

(例)Figmaなど

 コンテンツの優先順位
ページの中でどんな要素が必要かを書き出します。その要素の中でどれが1番見てもらいたいかかを考え、優先順位をつけます。
(例)

  • メイン画像
  • ロゴ
  • ナビゲーションメニュー
  • タイトル
  • 紹介文
  • 商品写真

 視線の動きを考える
ユーザーの視線は上から下、左から右に移動します。優先順位の高いコンテンツほど上部や左側に配置しましょう。

 まとめ
サイトマップはペンと紙があれば手書きでできます。修正などが大変になるためツールを使うのもおすすめです。

STEP

 デザインする

 「デザインする」
ワイヤーフレームが完成したら
【デザインカンプ】と呼ばれる、実際のWebページと変わらないデザインをツールを使って作成します。

 (例)

(例)Figma、Canvaなど

 まとめ
デザインカンプを作成することで、Webページのイメージがしやすくなります。
ユーザーさんが見やすい画像の配置、配色、書体、余白などにも気をつけて作成します。

STEP

 コーディング

 「ファイルを用意」
必要なのは「HTML」と「CSS」と「画像ファイル」です。

 「HTMLでWebサイトのコンテンツを記述」
「.html」ファイルでは、ページ毎にそれぞれファイルが必要になります。

 「CSSでWebサイトを装飾」
HTMLだけでは『色、文字装飾、レイアウト』などはできません。なので基本的に装飾に関することは全て「.css」ファイルに記述します。

 「画像ファイルを用意する」
使う画像は【images】などのフォルダに保存します。
Webに使える画像は、『JPG、PNG、GIF、SVG、WebP』などです。

 (例)

(JPG,PNG,GIF,SVG,WebP 等の画像を保存)
STEP

 Webに公開

 「Web上に公開する」
パソコンの中にファイルがあるだけでは、サイトを閲覧できるのは自分だけになります。
世界に公開するには、Webサーバーにファイルを転送する必要があります。

 「※1サーバーを用意」
Webサーバーは一般的にサーバー会社からレンタルして利用します。会社によって料金やできる事が違うので、自分のサイトにあったサーバーを選択しましょう。
月額500円〜でもサーバーをレンタルできます。

 「ドメインを取得」
ドメインとはサイトの場所を表す【住所】のようなものです。ドメインの名前は世界にひとつだけです。
サーバー会社さんによっては申し込んだ時点でドメイン取得の手続きも同時に行える会社もあります。

 「Webサーバーにアップロード」
用意したサーバーにファイルをアップロードします。ファイルの数が多い場合にはファイル転送ソフト「※2FTP」のほうが、アップロードがスムーズになります。

※1 サーバーとは?
①何らかのデータを受け取り
②受け取ったデータをもとに何らかの処理をし
③処理を行った結果を返す
という役割を持ったコンピュータ全般のこと
※2 FTPとは?
FTP(File Transfer Protocol)
「ファイルを送受信する時に使う決まりごと(通信プロトコル)」です。

Webサイト制作を始める前のステップ

STEP

テキストエディターをインストール

HTMLやCSSファイルの作成は、『メモ帳』などでもできますが、制作するのに役立つ「補助機能」が備わっているテキストエディター(VSCode)がおすすめです。

特に人気なテキストエディターは、Microsoftの「Visual Studio Code」です。

VSCode(Visual Studio Code)を日本語化

手順
拡張機能の画面表示

赤枠ない左端にある拡張機能アイコンをクリックします。

手順
拡張機能をインストール

左上検索から
「Japanese Language Pack for Visual Studio Code」を検索し表示されたら選択し、「Install」ボタンをクリックします。

Screenshot
手順
日本語化完了

VSCodeを再起動するメッセージが表示されるので、案内に従って再起動すると日本語表示へ変わります。

STEP

ブラウザーをインストール

ブラウザーによって多少表示が異なります。

そのため、ユーザーがどのブラウザーを利用するかわからないので、なるべく全てのブラウザーで動作確認をしておくのがおすすめです。

よく利用されるブラウザアプリ

  • Google Chrome
  • Safari
  • Firefox
  • Microsoft Edge
Google Chrome
Safari
STEP

グラフィックツールおすすめ

グラフィックツールとは、イメージやデザインを作成したり編集したりするためのツールのことです。

Figuma

デザインカンプ(完成見本)の作成に便利なツールです。
簡易なアニメーションなども含めた実際に動作しているような「プロトタイプ」も作成できます。

ブラウザー上で扱えるのでとても便利です。

Figma

Canva

デザイン作成の経験が少なくても、Canvaには魅力的なテンプレートが豊富にあるので、ビジュアルコンテンツを比較的容易に作成することができます。

こちらもブラウザー上で扱えるので便利です。

Canva

Adobe photoshop & Illustrator

言わずと知れたAdobeの代表的なツールです。PhotoshopとIllustratorを扱えれば、それだけで専門的なお仕事ができるくらい幅広い活動に利用できます。

少々費用が高い点と、動作する環境がある程度のスペックを求められるので導入障壁が高いのが難点です。

Adobe photoshop

まとめ

最初に知っておくと便利な「Webサイトの基本」

いざ、Webサイトを作ろうと思っても、何から始めたらいいのか悩みますよね。
本記事を参考に、Webサイトの基本的な構成やWebサイトを制作する流れを把握して、学習のお役に立つことを願っています。

ご質問や、サイト制作に関するお問い合わせはメールフォームよりお寄せください。

    プライバシーポリシーに同意の上送信してください。

    reCAPTCHA で保護されています
    プライバシー – 利用規約

    その他のお問い合わせ
     0267-25-5990
     info@ailesys.co.jp
    営業時間:9:00〜18:00
    定休日:土曜、日曜、祝日

    ブログ Web知識 Webデザイナー入門
    • 【WordPress】意外と知らないSWELLテーマでのスマホ専用メニューのつくりかた
    • WordPress 6.8『セシル』新機能と注意点まとめ|進化した編集体験とカスタマイズ性|【追記】WordPress 6.8.1 情報

    〒384-0083
    長野県小諸市大字市665-9
    TEL 0267-25-5990 (代)
    FAX 0267-26-1324

    • プライバシーポリシー
    • 特定商取引に関する表記
    • サイトマップ

    © 2023 Ailesystem Inc.

    目次
    当サイトは分析の為にCookieを使用しています。サイトを閲覧する場合はCookieの使用に同意したことになります。OKプライバシーポリシー