【Webデザイナー入門ブログ】HTMLの基本!Webの基本構造を知る
目次
HTMLの基本!Webの基本構造を知る
HTMLとは
コンピューターに指示を出すのがHTML
Webページの土台となるファイルを作成する言語。
Webページに表示したい文書などを「<」と「>」(タグ)で囲んで書いていきます。
(例)
コンピューターがそのページの構造を理解できるようにすることがHTMLの役目
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名を複数回使う事ができません
クラス:ページ内で何度も使えます
※どのページでも変わることのない部分にはIDを、何度も使う部分にはクラスを使います。
※CSSの優先順位はIDで指定した装飾のほうが優先されます
CSSを適用させる方法
CSSファイルを読み込んで適用させる01
「.CSS」の拡張子がついたCSSファイルを作成します。それをHTMLファイルに読み込ませて適用させます。
1つのCSSファイルを複数のHTMLファイルに読み込ませることができるのでCSSを管理しやすくおすすめですよ!
適用方法はHTMLファイルの<head>内に<link>タグを使ってCSSファイルを指定します。
rel属性に「stylesheet」
href属性に「CSSファイルのパス」
を書きます。
※rel属性とは?
リンク先との関係性をブラウザや検索エンジンに伝える役割をします。
HTMLファイルの<head>の中に
<style>タグで指定02
CSSは記述したHTMLファイルにのみ適用され、他のHTMLファイルには反映されません。
CSSは記述したHTMLファイルにのみ適用され、他のHTMLファイルには反映されないため注意が必要です!
特定のページだけデザインを変えたいときに便利です。
適用方法はHTMLファイルの<head>内に<style>タグを追加し、その中にCSSを記述します。
タグの中にstyle属性を指定する03
HTMLのタグ内に直接デザインを指定できるのが「style属性」。例えば、文字の色や背景色を一時的に変えたいときに使えます。
style属性のメリット・デメリット
メリット
- すぐにデザインを適用できる(CSSファイルを用意しなくてもOK)
- 一部の要素だけ特別なデザインにしたいときに便利
デメリット
- HTMLがごちゃごちゃしやすい(可読性が下がる)
- サイト全体で統一したデザインを適用しにくい
一般的には、外部CSSファイルを使う方が管理しやすいですが、「ちょっとだけ変えたい」ときにstyle属性が役立ちます。
管理しやすいCSS
CSSを書いていると、「どこに何のスタイルを書いたか分からなくなる」 ことありませんか?
特に、コードが増えると修正や追加が大変になってくる…。
そこで今回は、管理しやすいCSSを書くコツ を紹介します!
②使い回せるCSSを書く
※「似たようなスタイルを何度も書く」のは大変です
ボタンやカードのデザインは、共通クラスを作っておくと便利ですよ。
④英単語の省略語
つづく・・・
STEP
企画を立てる
目標を設定する
はじめにメイン目標とサブ目標を設定する
(例)メイン:商品の売上を伸ばすなど
サブ:商品評価を書いてもらう
ターゲットユーザーを決める
(例)趣味、性別、年齢層など
ターゲットユーザーをより具体化した「ペルソナ」(22歳、女性。新しい物が好き、おしゃれなカフェでゆっくりするのが好き、入社2年目、収入は月20万、ライブが好き)とよばれる人物像を設定することでデザインの方向性が定まってきます。
まとめ
ペルソナは実在する人物のように考えます。Webサイトの利用場面も思い浮かべてみましょう
STEP
サイトマップ制作
ページをグループ分けする
構成を上手にまとめるには関連するページをグループ分けすることです。
必要なページを書き出し、関連性のあるページ同士を1つのグループとして分けましょう。
(例)
ページの優先順位
特に見てほしいページやユーザーが求めているであろうページが何かを考えて、優先順位の高いページはすぐに目に止まるようなナビゲーションメニュー内に配置しましょう。
まとめ
サイトマップはペンと紙があれば手書きですぐ作成可能です。階層はなるべくユーザーが迷子にならないように2階層以内がおすすめです。
STEP
ワイヤーフレーム作成
「ワイヤーフレーム」
全ページのレイアウトを考えます。色や装飾などは入れずテキストやライン、ボックスのみで制作します。
コンテンツの優先順位
ページの中でどんな要素が必要かを書き出します。その要素の中でどれが1番見てもらいたいかかを考え、優先順位をつけます。
(例)
- メイン画像
- ロゴ
- ナビゲーションメニュー
- タイトル
- 紹介文
- 商品写真
視線の動きを考える
ユーザーの視線は上から下、左から右に移動します。優先順位の高いコンテンツほど上部や左側に配置しましょう。
まとめ
サイトマップはペンと紙があれば手書きでできます。修正などが大変になるためツールを使うのもおすすめです。
STEP
デザインする
「デザインする」
ワイヤーフレームが完成したら
【デザインカンプ】と呼ばれる、実際のWebページと変わらないデザインをツールを使って作成します。
まとめ
デザインカンプを作成することで、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
STEP
グラフィックツールおすすめ
グラフィックツールとは、イメージやデザインを作成したり編集したりするためのツールのことです。
Figuma
デザインカンプ(完成見本)の作成に便利なツールです。
簡易なアニメーションなども含めた実際に動作しているような「プロトタイプ」も作成できます。
ブラウザー上で扱えるのでとても便利です。
Figma
Canva
デザイン作成の経験が少なくても、Canvaには魅力的なテンプレートが豊富にあるので、ビジュアルコンテンツを比較的容易に作成することができます。
こちらもブラウザー上で扱えるので便利です。
Canva
Adobe photoshop & Illustrator
言わずと知れたAdobeの代表的なツールです。PhotoshopとIllustratorを扱えれば、それだけで専門的なお仕事ができるくらい幅広い活動に利用できます。
少々費用が高い点と、動作する環境がある程度のスペックを求められるので導入障壁が高いのが難点です。
Adobe photoshop
まとめ
最初に知っておくと便利な「Webサイトの基本」
いざ、Webサイトを作ろうと思っても、何から始めたらいいのか悩みますよね。
本記事を参考に、Webサイトの基本的な構成やWebサイトを制作する流れを把握して、学習のお役に立つことを願っています。
ご質問や、サイト制作に関するお問い合わせはメールフォームよりお寄せください。
その他のお問い合わせ
0267-25-5990
info@ailesys.co.jp
営業時間:9:00〜18:00
定休日:土曜、日曜、祝日