Webデザイナーを目指す人の為のHTML5タグ入門Webデザイナーを目指す人の為のHTML5タグ入門Webデザイナーを目指すなら勉強をスタートする前に、HTMLの基本的なタグの使い方を理解しておく必要があります。HTMLタグの機能を理解してデザインするのと、機能を理解しないでデザインするのではデザインの仕上がりに大きな差が出てしまうからです。Webは機能的かつユーザーにとって使いやすいものである必要があります。その為にはWebの軸となるHTMLをはじめに習得しましょう。こちらのページではこれからWebデザイナーを目指すコーディング初心者の方に向けて、よく使用するHTMLタグをご紹介していますのでぜひ参考にして下さい。コーディングで使用するタグは実に限られています。覚える事が出来ますのでこの機会に基本的なHTMLタグを習得しましょう。html>4-2.htmlタグ4-3.headタグ4-4.titleタグ4-4.metaタグ(description)4-5.metaタグ(charset)4-6.bodyタグ4-7.linkタグ5.bodyタグ内で使用するHTMLタグ5-1.aタグ(リンク)5-2.divタグ5-3.ulタグ5-4.olタグ5-5.dlタグ5-6.spanタグ5-7.imgタグ5-8.pタグ5-9.strongタグ5-10.tableタグ5-11.h1〜h6タグ5-12.headerタグ5-13.navタグ5-14.footerタグ5-15.scriptタグ5-16.blockquoteタグ5-17.inputタグ(text)5-18.inputタグ(submit)5-19.textareaタグ5-20.コメントアウト6.まとめ1.HTMLとは?HTMLとは(ハイパーテキストマークアップランゲージ)の略でホームページを作る為の言語になります。HTMLタグで文章や見出し画像などをマークアップする(HTMLタグで括る)事で、ホームページとして表示する事が出来るようになります。2.コーディングで多用するHTMLタグ書店に売っているHTMLタグ辞典などはとてもボリュームが多く、びっくりされた方も多いでしょう。結論からお伝えすると、HTMLタグ辞典の内容をすべて丸暗記する必要はありません。コーディングの際に使用するHTMLタグは数える程しかないからです。コーディングでよく使用するタグは以下の通りです。head内でよく使用するタグlinktitlemeta(description)htmlbody内でよく使用するタグadivuloldlspanimgpstrongtableh1〜h6scriptheaderfooterinputtextareablockquotescriptinputtextarea3.HTMLの基本形式を覚えようタグの習得を始める前に、HTMLの基本構文を覚えましょう。ホームページを作成する時には、必ずこの基本構文に沿ってコーディングを行っていきます。charset="UTF-8"><title></title></head><body></body></html>4.head内で使用するHTMLタグ4つ<head></head>内に記述するタグは、ページの情報です。ページタイトル・文字コード・文書宣言・meta情報などです。ここに書いた情報はページに表示される事はありません。検索エンジンやクローラーなどに情報を伝える為のものです。html>この一文は、このページはHTML5の文書である事を宣言しています。4-2.htmlタグ<html></html>1<html></html>htmlの文書をこの中に記述していきます。4-3.headタグ<head></head>1<head></head>headタグはページ情報を記述する所です。headタグ内には、meta情報・ページタイトル・CSSの読み込みなどを記述します。headタグ内に書いた情報は、ページには表示されません。検索エンジンにページ内の情報を伝える為のものです。4-4.titleタグ<title>ここにページタイトルを入れます。</title>1<title>ここにページタイトルを入れます。</title>ページタイトルを表示する為のタグです。検索エンジンではタイトル部分に表示されるタグでSEOに直接的に影響する重要なタグです。content="未経験から独学でWebデザイナーを目指す人の為お役立ち情報サイトです。あなたに役立つ情報を配信していきます。content="未経験から独学でWebデザイナーを目指す人の為お役立ち情報サイトです。あなたに役立つ情報を配信していきます。descriptionは、検索結果の赤枠の部分に表示されます。ここにページの説明を記述します。ユーザーのクリック率が大きくかわりますのでアクセスアップの為にはとても重要な箇所です。4-5.metaタグ(charset)文字コードを宣言する為の記述です。文字コードはUTF-8に設定しましょう。charset="UTF-8">4-6.bodyタグ<body></body>1<body></body>bodyタグの中に内容を記述する事でページが表示されるようになります。4-7.linkタグlinkタグは主に外部のCSS(カスケーディングスタイルシート)を読み込む際に使用します。type="text/css">5.bodyタグ内で使用するHTMLタグ<body></body>内に記述したHTMLがページとして表示されます。body内で使用するタグは以下の通りです。5-1.aタグ(リンク)aタグはリンクを貼る時に使用するタグです。resultをタップしていただくと、ページを確認出来ます。CodePen.276795-2.divタグdivは、要素を一括りにする時に使用するボックスのような役割を果たします。divだけを記述しても横幅や縦幅背景色などは反映されませんので、単体では意味をもたない透明の枠となります。divを使う時は、CSSで横幅、縦幅、マージン、余白などを指定する事が出来ます。CodePen.276795-3.ulタグulタグは箇条書きのリスト要素を表示したい時に使います。<li></li>で囲われた箇所がリスト形式で出力されます。CodePen.276795-4.olタグolタグは箇条書きのリスト要素に番号を振る事が出来ます。CodePen.276795-5.dlタグdlタグは、タイトル付きの箇条書きリストです。CodePen.276795-6.spanタグspanタグは一部分のみを変更したい時に使用します。spanタグ単体では意味を持ちませんが、CSSで色を変えたりサイズを変えたりする事が出来ます。CodePen.276795-7.imgタグimgタグは画像を読み込む為のタグです。imgタグを使う時には、width(横幅)・height(高さ)・alt(代替テキスト)を必ず入力します。CodePen.276795-8.pタグpタグは文章を表示したい場合に使うタグです。CodePen.276795-9.strongタグstrongタグは文字を強調したい場合に使用します。strongタグで囲われた箇所は太字として表示されます。CodePen.276795-10.tableタグtableタグは表として使いたい時に使用します。CodePen.276795-11.h1〜h6タグ見出しタグです。ページ内の見出し要素をh1〜最大h6のタグで括る事ができます。h1が一番重要な見出しで数字が大きくなるに連れて見出しレベルが小さくなります。CodePen.276795-12.headerタグheaderの要素を1つのグループにするタグです。CodePen.276795-13.navタグnavタグはナビゲーションメニューを1つのグループする為のタグです。CodePen.276795-14.footerタグfooterの要素を1つのグループにする事が出来るタグです。CodePen.276795-15.scriptタグscriptタグはJavaScriptを読み込む為のタグです。jQueryのライブラリファイルを始め、Web制作では様々なJs(JavaScript)ファイルを読み込んでサイトに動きをつける事が出来ます。Scriptタグは</body>の直前に書くのが主流となっています。CodePen.276795-16.blockquoteタグblockquoteタグは、引用したものを掲載する時に使用します。CodePen.276795-17.inputタグ(text)inputタグのtype=”text”はお問い合わせフォームを作成する時に使用するタグです。CodePen.276795-18.inputタグ(submit)inputタグのtype=”submit”はボタンとして使用出来ます。CodePen.276795-19.textareaタグtextareaタグはお問い合わせフォームのお問い合わせ内容を入力するエリアとして使用します。CodePen.276795-20.コメントアウトコーディングの際にメモとして残しておきたい場合は、コメントアウトを使います。CodePen.276796.まとめいかがでしたでしょうか?コーディングの際によく使用するHTMLは実際のところ数える程しかなく、HTMLタグ辞典に載っているタグを何百も覚える必要は全くありません。WebデザイナーもHTMLタグをすべて丸暗記している人はいません。わからない場合は、タグをその都度調べながらコーディングを行っているのです。今回ご紹介させていただいたタグを重点的に勉強していただければ、コーディングで使用するHTMLタグは、カバー出来ます。HTMLを習得する事は、他の言語に比べて難しくは無いのでこの機会にHTMLタグを身につけましょう。STACK(当サイト)のソースコードも確認して見てください。このページのタグに集約されているはずです。