Webデザイナー必須スキル CSS〜20%をマスターして80%の結果を出す！

“HTMLってなんか覚えること多そうだなあ”

というイメージを持っている方も多いかもしれません。
そんな苦手意識を持つ方にこのブログを用意しました。

+*２０％のキーポイントをマスターしたら、
８０％の結果を出すことができる、*+
ということがテーマです

結果を出す為には、
すべてのスキルや知識を身につける必要はありません。
２０％のスキルや知識でも、立派なサイトやサービスを
作ることができると思います。

Webデザイナーになる人が最初に身につけたい必須スキルがHTML

最近では、Dreamweverやwordpressなどのツールなどを
使ってHTMLタグを一切書くことなくデザインを完了する場合もあります。

しかし、
基本となるHTMLの知識は持っておく必要があります。

でも多くの人がHTMLの取得で挫折してみまいます。

なぜでしょうか？

HTMLのタグ一覧を見た時に、
”え〜こんなにあるの〜！？ 覚えきれないよ！”
と思ってしまうからです。

でも安心してください。
全部覚える必要もありません。

+*２０個〜３０個のタグの使い方と
HTMLの原理原則を覚えれば
一人前のWebデザイナーとしてのスキルが身に付きます。*+

このブログではそのWebデザイナーにとって
必須となる20%の部分についてまとめましたので、
参照いただければと思います。

そもそもHTMLってなんで必要なの？　

HTMLは、WEBページを構成する言語の一つです。

なぜHTMLでサイトを書く必要があるのでしょうか？

HTML で書くことによって
コンピュータがその文書の構造を理解する
ことできます。

つまり、検索エンジンがウェブページの構造を把握して解析したり、
ブラウザがウェブページ内の各要素の意味を理解できるようになります。

Googleなどで、何かを検索した時に表示されるのは、
HTMLで書かれているからなんですね。

どんなに素晴らしい文章を書いても、
どんなに素晴らしいイメージがあっても、
+*検索エンジンなどを通じて発見されなければ、
作ったサイトの価値はなくなってしまいますね。*+

HTMLの書き方とは

HTMLはどのように書いていくのでしょうか？

HTML文章（HTMLソース）は “<” と” >” で囲まれたタグを使って書いていきます。
タグとは<タグ名>の記号で囲まれた半角の英数字のことで、
このタグを使ってWebページは作られています。

たとえば、Chromeブラウザーを開けてみて右クリックして
+*要素の検証を選択してみて下さい。+*

メモ帳が開きたくさんの<　>で囲まれた文字が表示されましたね。この<　>で囲まれているのがタグというものです。

”<タグ名>”を“開始タグ”、”</タグ名>”を“終了タグ”と呼びます
開始タグと終了タグの間に内容を入れます。

サイトの基本構造はとてもシンプル！　

サイトの基本構造は、下記の図のように
＜HTML＞＜HEAD＞＜TITLE＞＜BODY＞
の４つでできています。

とてもシンプルですね。

では一つ一つの要素を見てみましょう。

＜HTML＞～＜/HTML＞

html要素はルート要素と呼ばれ、文書の“根っこ”となります。
このタグで囲まれている範囲がHTMLとして認識されます。
HTML文書は＜HTML＞を始まりにして、
その中にhead要素やbody要素が含まれます

＜HEAD＞～＜/HEAD＞

次に＜HEAD＞～＜/HEAD＞を記入して、この中にヘッダー情報を記入します。
例えばHTML文書は、どの文字コードで記入されているとか、
スタイルシート（CSSという視覚表現で次のブログで詳しく解説します）
を使っている場合、どのスタイルシートを使っているのかなどを記入します。

＜TITLE＞～＜/TITLE＞

＜HEAD＞～＜⁄HEAD＞の中に記入してタイトルをつけます。
ここで付けたタイトルは、ブラウザのタイトルバーに表示されます。
このTITLEは履歴に残ったり、お気に入りに登録するときのタイトルとなります。

＜BODY＞～＜⁄BODY＞

このタグの範囲内に記入された内容が、画面上にに表示されます。
この中にいろいろなタグを使いながら本文を記入していきます。

Bodyの文章構造 h1~h6を使ってみよう

h1は大見出しという意味なのでタイトルをいれています。
h2はh1の中の見出しなのでサブタイトルみたいなものを入れてます。
見出しはh1〜h6まであるので階層的に使いましょう。
最も重要な見出しがh1であり、最も重要でないのがh6とされています。

BODY内の要素 リストタグはとても便利！

＜UL＞＜LI＞～＜/LI＞＜/UL＞
記号を使ったリストを作るには、まずリストの初めに＜UL＞タグを記入します。
その中にリストの項目分の＜LI＞項目名＜/LI＞を記入します。
項目分の＜LI＞タグを記入したら、最後に</UL>タグを記入します。

＜OL＞＜LI＞～＜/LI＞＜/OL＞
数字を使ったリストを作るには、まずリストの初めに＜OL＞タグを記入します。
その中にリストの項目分の＜LI＞項目名＜/LI＞を記入します。
項目分の＜LI＞タグを記入したら、最後に</OL>タグを記入します。

下記のようなイメージになりますので参照ください

BODY内の要素 テーブルタグでコンテンツを整理できる！

HTMLにおける表はtable要素を使って表現します。
表の中には1つ以上の「行」(横長の枠）があり、
その行の中にはまた1つ以上の「セル」（内側の四角）
があるという考え方でテーブルを表現します。

「行」をtr要素（Table Row）
「セル」をtd要素（Table Data）で表します。

実際の書き方は、下の図のようになっています。
ひとつひとつの単語がテーブルの中で整列しているのがわかりますね

テーブルは単に表を作るだけでなくページのレイアウトのためによく使われています。凝ったデザインのサイトさんのソースを見てみると、テーブル関係のタグがたくさん書かれていると思います。

アンカータグ でリンクを貼ろう！

他のサイトや他のページにに、リンクするには

＜A href=”URL“＞テキスト＜/A＞

というように記入します。

リンクするための＜A＞タグを使って、値にリンクしたいサイトのアドレスを、
記入し、リンクを設定させたいテキストをこのタグで囲みます。

”絶対パス”と”相対パス”がわかったら中級者の仲間入り！

絶対パス　

絶対パスとは、http:// から始まるアドレス（URL)を使ってファイルの場所を指定することです。たとえば、我々のサイトにリンクするには、http ://skillhub.jp のように記入します。

＜A href=“http :skillhub.jp“＞Skillhubサイトへのリンク＜/A＞

この絶対パスは、他のサイトにリンクしたりする場合に使います。
お気に入りのサイトにリンクを貼ったり、
レンタル掲示板にリンクする場合はこの絶対パスでパスを指定します。

相対パス　

この相対パスとは、基準となるファイルから見て任意のファイルの場所を指定します。例えば同じフォルダ（ディレクトリ）の中にindex.htmとlink.htmがあった場合はどうでしょうか？

その場合、つまりindex.htmから001.htmにリンクを貼りたいケースは

＜A href=“link.htm“＞001.html＜/A＞

のようにファイル名のみの記入で
ファイルの場所を指定することが出来ます。

いかがでしたでしょうか？
HTMLに関して、必要最低限な２０％のスキル・知識を網羅しました。

この２０％の知識を実際に自分のスキルにするには実践をやるしかありません。

スキルハブの実践講座を受講してWebデザインをマスターしよう！

我々が提供する教育サービススキルハブでも、
これらの必須スキル20%にフォーカスを置いた実践的なレッスンを提供しています。

最短距離でWebスキルを身につけたい人は
是非受講してみてください。(下の画像をクリック！）

最短距離で最大の成果を上げたい人のためのブログシリーズ

最短距離でWebデザイナーになる８０：２０の法則
HTMLの必須20%をマスターする
CSSの必須20%をマスターする
デザインスキルの必須20%をマスターする
UX設計の必須20%をマスターする
配色・色彩のスキルの必須20%をマスターする（近日公開）
Web企画のスキルの必須20%をマスターする（近日公開）
Webマーケティングのスキルの必須20%をマスターする（近日公開）
SEO（検索エンジン最適化）のスキルの必須20%をマスターする（近日公開）
プログラミングの必須20%をマスターする（近日公開）
Illustratorのスキルの必須20%をマスターする（近日公開）
Photoshopのスキルの必須20%をマスターする（近日公開）