HTMLの基本!Webの基本構造を知る
HTMLとは
コンピューターに指示を出すのがHTML
Webページの土台となるファイルを作成する言語。
Webページに表示したい文書などを「<」と「>」(タグ)で囲んで書いていきます。
(例)
コンピューターがそのページの構造を理解できるようにすることがHTMLの役目
よく使う代表的なタグ
タグ | 役割 |
---|---|
h | 見出し(h1,h2…) |
p | 段落 |
a | リンク |
div | 範囲を指定 |
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つがおすすめです
HTMLの属性
よく使う代表的なタグ
タグ | 役割 |
---|---|
h | 見出し(h1,h2…) |
p | 段落 |
a | リンク |
div | 範囲を指定 |
CSSの基礎
CSS書き方
【セレクター】
セレクターでは、どこを装飾するかを指定
【プロパティ】
セレクターで指定した部分の何を変えるのかを指定
※プロパティと値の間には(:)で区切ります
【値】
値はどのように変えるのか指定
※値の最後に(;)をつけます
(例)
h1{
color: blue;
font-size: 20px;
}
クラスとIDを使った書き方
クラス名とIDは自分で決める事ができますが、制作時にわかりやすい名前をつけた方がいいです
ただし
- 全て英数字
- 1文字目は必ず英字
- 空白は入れない
- 英数字と「-(ハイフン)」「_(アンダーバー)」で記述
※ページ内で何度も使う装飾はクラスにします
1つのタグに複数のクラス・IDをつけられる
(例)同じタグに複数のクラス指定
<p class=”blue center small”>テキスト</p>
(例)同じタグにIDとクラスを指定
<p id=”red” class=”blue”>テキスト</p>
※IDはページ内で同じIDを使う事ができません
レイアウト・枠組みなどはIDを使います
つづく・・・
企画を立てる
目標を設定する
はじめにメイン目標とサブ目標を設定する
(例)メイン:商品の売上を伸ばすなど
サブ:商品評価を書いてもらう
ターゲットユーザーを決める
(例)趣味、性別、年齢層など
ターゲットユーザーをより具体化した「ペルソナ」(22歳、女性。新しい物が好き、おしゃれなカフェでゆっくりするのが好き、入社2年目、収入は月20万、ライブが好き)とよばれる人物像を設定することでデザインの方向性が定まってきます。
まとめ
ペルソナは実在する人物のように考えます。Webサイトの利用場面も思い浮かべてみましょう
サイトマップ制作
ページをグループ分けする
構成を上手にまとめるには関連するページをグループ分けすることです。
必要なページを書き出し、関連性のあるページ同士を1つのグループとして分けましょう。
(例)
ページの優先順位
特に見てほしいページやユーザーが求めているであろうページが何かを考えて、優先順位の高いページはすぐに目に止まるようなナビゲーションメニュー内に配置しましょう。
まとめ
サイトマップはペンと紙があれば手書きですぐ作成可能です。階層はなるべくユーザーが迷子にならないように2階層以内がおすすめです。
ワイヤーフレーム作成
「ワイヤーフレーム」
全ページのレイアウトを考えます。色や装飾などは入れずテキストやライン、ボックスのみで制作します。
(例)
(例)Figmaなど
コンテンツの優先順位
ページの中でどんな要素が必要かを書き出します。その要素の中でどれが1番見てもらいたいかかを考え、優先順位をつけます。
(例)
- メイン画像
- ロゴ
- ナビゲーションメニュー
- タイトル
- 紹介文
- 商品写真
視線の動きを考える
ユーザーの視線は上から下、左から右に移動します。優先順位の高いコンテンツほど上部や左側に配置しましょう。
まとめ
サイトマップはペンと紙があれば手書きでできます。修正などが大変になるためツールを使うのもおすすめです。
デザインする
コーディング
「ファイルを用意」
必要なのは「HTML」と「CSS」と「画像ファイル」です。
「HTMLでWebサイトのコンテンツを記述」
「.html」ファイルでは、ページ毎にそれぞれファイルが必要になります。
「CSSでWebサイトを装飾」
HTMLだけでは『色、文字装飾、レイアウト』などはできません。なので基本的に装飾に関することは全て「.css」ファイルに記述します。
「画像ファイルを用意する」
使う画像は【images】などのフォルダに保存します。
Webに使える画像は、『JPG、PNG、GIF、SVG、WebP』などです。
(例)
Webに公開
「Web上に公開する」
パソコンの中にファイルがあるだけでは、サイトを閲覧できるのは自分だけになります。
世界に公開するには、Webサーバーにファイルを転送する必要があります。
※1サーバーを用意」 「
Webサーバーは一般的にサーバー会社からレンタルして利用します。会社によって料金やできる事が違うので、自分のサイトにあったサーバーを選択しましょう。
月額500円〜でもサーバーをレンタルできます。
「ドメインを取得」
ドメインとはサイトの場所を表す【住所】のようなものです。ドメインの名前は世界にひとつだけです。
サーバー会社さんによっては申し込んだ時点でドメイン取得の手続きも同時に行える会社もあります。
「Webサーバーにアップロード」
用意したサーバーにファイルをアップロードします。ファイルの数が多い場合にはファイル転送ソフト「※2FTP」のほうが、アップロードがスムーズになります。
※1 サーバーとは?
①何らかのデータを受け取り
②受け取ったデータをもとに何らかの処理をし
③処理を行った結果を返す
という役割を持ったコンピュータ全般のこと
※2 FTPとは?
FTP(File Transfer Protocol)
「ファイルを送受信する時に使う決まりごと(通信プロトコル)」です。
Webサイト制作を始める前のステップ
テキストエディターをインストール
HTMLやCSSファイルの作成は、『メモ帳』などでもできますが、制作するのに役立つ「補助機能」が備わっているテキストエディター(VSCode)がおすすめです。
特に人気なテキストエディターは、Microsoftの「Visual Studio Code」です。
VSCode(Visual Studio Code)を日本語化
赤枠ない左端にある拡張機能アイコンをクリックします。
左上検索から
「Japanese Language Pack for Visual Studio Code」を検索し表示されたら選択し、「Install」ボタンをクリックします。
VSCodeを再起動するメッセージが表示されるので、案内に従って再起動すると日本語表示へ変わります。
ブラウザーをインストール
ブラウザーによって多少表示が異なります。
そのため、ユーザーがどのブラウザーを利用するかわからないので、なるべく全てのブラウザーで動作確認をしておくのがおすすめです。
よく利用されるブラウザアプリ
- Google Chrome
- Safari
- Firefox
- Microsoft Edge
グラフィックツールおすすめ
グラフィックツールとは、イメージやデザインを作成したり編集したりするためのツールのことです。
言わずと知れたAdobeの代表的なツールです。PhotoshopとIllustratorを扱えれば、それだけで専門的なお仕事ができるくらい幅広い活動に利用できます。
少々費用が高い点と、動作する環境がある程度のスペックを求められるので導入障壁が高いのが難点です。
まとめ
最初に知っておくと便利な「Webサイトの基本」
いざ、Webサイトを作ろうと思っても、何から始めたらいいのか悩みますよね。
本記事を参考に、Webサイトの基本的な構成やWebサイトを制作する流れを把握して、学習のお役に立つことを願っています。
ご質問や、サイト制作に関するお問い合わせはメールフォームよりお寄せください。