“HTMLってなんか覚えること多そうだなあ”というイメージを持っている方も多いかもしれません。そんな苦手意識を持つ方にこのブログを用意しました。+*20%のキーポイントをマスターしたら、80%の結果を出すことができる、*+ということがテーマです結果を出す為には、すべてのスキルや知識を身につける必要はありません。20%のスキルや知識でも、立派なサイトやサービスを作ることができると思います。Webデザイナーになる人が最初に身につけたい必須スキルがHTML最近では、Dreamweverやwordpressなどのツールなどを使ってHTMLタグを一切書くことなくデザインを完了する場合もあります。基本となるHTMLの知識は持っておく必要があります。多くの人がHTMLの取得で挫折してみまいます。覚えきれないよ!”と思ってしまうからです。全部覚える必要もありません。+*20個〜30個のタグの使い方とHTMLの原理原則を覚えれば一人前のWebデザイナーとしてのスキルが身に付きます。参照いただければと思います。HTMLは、WEBページを構成する言語の一つです。書くことによってコンピュータがその文書の構造を理解することできます。検索エンジンがウェブページの構造を把握して解析したり、ブラウザがウェブページ内の各要素の意味を理解できるようになります。Googleなどで、何かを検索した時に表示されるのは、HTMLで書かれているからなんですね。作ったサイトの価値はなくなってしまいますね。囲まれたタグを使って書いていきます。タグとは<タグ名>の記号で囲まれた半角の英数字のことで、このタグを使ってWebページは作られています。Chromeブラウザーを開けてみて右クリックして+*要素の検証を選択してみて下さい。>で囲まれた文字が表示されましたね。>で囲まれているのがタグというものです。”<タグ名>”を“開始タグ”、”</タグ名>”を“終了タグ”と呼びます開始タグと終了タグの間に内容を入れます。サイトの基本構造は、下記の図のように<HTML><HEAD><TITLE><BODY>の4つでできています。一つ一つの要素を見てみましょう。<HTML>~</HTML>html要素はルート要素と呼ばれ、文書の“根っこ”となります。このタグで囲まれている範囲がHTMLとして認識されます。HTML文書は<HTML>を始まりにして、その中にhead要素やbody要素が含まれます<HEAD>~</HEAD>次に<HEAD>~</HEAD>を記入して、この中にヘッダー情報を記入します。HTML文書は、どの文字コードで記入されているとか、スタイルシート(CSSという視覚表現で次のブログで詳しく解説します)を使っている場合、どのスタイルシートを使っているのかなどを記入します。<TITLE>~</TITLE><HEAD>~<⁄HEAD>の中に記入してタイトルをつけます。ここで付けたタイトルは、ブラウザのタイトルバーに表示されます。このTITLEは履歴に残ったり、お気に入りに登録するときのタイトルとなります。<BODY>~<⁄BODY>このタグの範囲内に記入された内容が、画面上にに表示されます。この中にいろいろなタグを使いながら本文を記入していきます。h1~h6を使ってみようh1は大見出しという意味なのでタイトルをいれています。h2はh1の中の見出しなのでサブタイトルみたいなものを入れてます。見出しはh1〜h6まであるので階層的に使いましょう。重要な見出しがh1であり、最も重要でないのがh6とされています。リストタグはとても便利!<UL><LI>~</LI></UL>記号を使ったリストを作るには、まずリストの初めに<UL>タグを記入します。その中にリストの項目分の<LI>項目名</LI>を記入します。項目分の<LI>タグを記入したら、最後に</UL>タグを記入します。<OL><LI>~</LI></OL>数字を使ったリストを作るには、まずリストの初めに<OL>タグを記入します。その中にリストの項目分の<LI>項目名</LI>を記入します。項目分の<LI>タグを記入したら、最後に</OL>タグを記入します。テーブルタグでコンテンツを整理できる!HTMLにおける表はtable要素を使って表現します。表の中には1つ以上の「行」(横長の枠)があり、その行の中にはまた1つ以上の「セル」(内側の四角)があるという考え方でテーブルを表現します。Data)で表します。実際の書き方は、下の図のようになっています。ひとつひとつの単語がテーブルの中で整列しているのがわかりますねテーブルは単に表を作るだけでなくページのレイアウトのためによく使われています。凝ったデザインのサイトさんのソースを見てみると、テーブル関係のタグがたくさん書かれていると思います。href=”URL“>テキスト</A>というように記入します。記入し、リンクを設定させたいテキストをこのタグで囲みます。始まるアドレス(URL)を使ってファイルの場所を指定することです。:skillhub.jp“>Skillhubサイトへのリンク</A>この絶対パスは、他のサイトにリンクしたりする場合に使います。お気に入りのサイトにリンクを貼ったり、レンタル掲示板にリンクする場合はこの絶対パスでパスを指定します。この相対パスとは、基準となるファイルから見て任意のファイルの場所を指定します。href=“link.htm“>001.html</A>のようにファイル名のみの記入でファイルの場所を指定することが出来ます。いかがでしたでしょうか?HTMLに関して、必要最低限な20%のスキル・知識を網羅しました。この20%の知識を実際に自分のスキルにするには実践をやるしかありません。スキルハブの実践講座を受講してWebデザインをマスターしよう!我々が提供する教育サービススキルハブでも、これらの必須スキル20%にフォーカスを置いた実践的なレッスンを提供しています。最短距離でWebスキルを身につけたい人は是非受講してみてください。Railsなどがなんと無料。募集人数には制限があります。サインアップはお早めに。100名(残りわずか)今すぐ14講座を受講する(無料)夢をかなえよう!プロのスキルを身につけて夢をかなえましょう。support@skillhub.jp■お問い合わせ■スキルハブの受託開発サービス※開発のご依頼はここからお願いします。