その他ばいりんがるWEBデザイナーのblogWebデザインやIT,海外についての情報をお届けします。まとめあらすじフロントエンジニアやwebデザイナーは知っていて当たり前といってもいい言語HTML。今回はそんなHTMLとは具体的にはどのようなものなのかを詳しく紹介していきます。マークアップ言語とはHTMLとはHTMLの文法HTMLのバーションHTMLの代表的なタグ例といった項目で解説していきたいと思います。スポンサーリンクマークアップ言語とはHTMLの前にご説明しておきたいのが、マークアップ言語です。マークアップ言語とは簡単にいってしまえば、主にタグなどの表現を使ってコンピュータに文章を分かりやすく伝える言語のことを言います。memo<p></p>といったものをタグと言います。Language)といった種類があります。今回はその中でもWebサイト作成に欠かせない要素である「HTML」について詳しく解説していきます。Consortium)という組織が1993年に開発した言語です。Web(www)内での基準を決定したり、ウェブに関する教育活動などを行なっています。このHTML言語を使用することで、文章や画像、動画などのメディアをWebサイト上に表現することができます。基本的に全てのwebページはこのHTML、CSS(シ―・エス・エス)、JavaScript(ジャバスクリプト)といった言語からできています。memoCSS(シ―・エス・エス)はwebページに色付けやサイズといったものを調整する言語で、JavaScript(ジャバスクリプト)はwebページに動きをつける言語です。HTMLタグはWebサイトの型(フレーム)を作るようなものだと思ってください。冒頭でも少し説明しましたが、タグとは開始タグ<要素>を最初に記載し、コンテンツの終わりの意味をあらわす終了タグ</要素>を必ず記載する必要があります。終了タグを記載していない場合でもwebサイト上では正しく表示される場合もありますが、思わぬエラーが起きたり、webサイト自体の表示がおかしくなったりすることも考えられますので、終了タグは必ず記載してください。</body></html>となっています。最初の<!DOCTYPE>タグでは、「これからHTML5を使用しますよ」とコンピュータに宣言する意味を持ちます。memo*HTML5は「最新バーションのHTML」のことです。バーションに関しては後ほど解説します。XML>であれば、これからXMLを使用することを意味します。次の<html></html>タグはこのタグ内にHTMLを記載することを意味します。<head></head>内にはページのタイトルCSSファイルのリンクJavaScript(ジャバスクリプト)metaデータといった情報を記載します。<body></body>内にはwebページのメインとなるコンテンツを書いていきます。詳細:W3CホームページHTMLのバージョンHTMLには今までいくつかのバーションが存在しています。Xといった感じで毎年色々な機能が追加されていくのと同じようなものだと考えてもらえれば大丈夫です。下記が今までの代表的なバーションです。(2014年)※()内はそのバーションに変更された年です。iPhoneのように毎年ではありませんが、今までに何回かバーション変更がされています。memo現在の最新のバーションは5.0を使用しており、これからHTMLを学習する方は、このバーション5.0を勉強することをおすすめします。HTMLタグの代表例HTMLタグにはたくさん種類がありますが、今回はその中でも代表的なものを紹介したいと思います。具体的には<h1>〜<h6><header><footer><nav><div><p>といったタグがよく使用されます。<h1>〜<h6>hはheading(見出し)の略で、1〜6の数字はそれぞれ見出しの重要度によって使い分けることができます。ページ内で一番重要な見出しには<h1>タグを使用し、次に重要なものに<h2>タグ、その次が<h3>タグといった具合に、数字が大きくなるにつれてタグの重要度が下がっていきます。<header>その名の通りヘッダー(あたま)部分を構成するタグです。webページ用のロゴやバナー、タイトルといった要素を記載するためのタグです。<head>タグとは異なるタグですのでご注意を。<footer>こちらも<header>タグとは逆にフッター(あし)部分を構成するタグです。記載するところとなっています。<nav>navはnavigation(ナビゲーション)の略で、主にwebページの上部に表示され、webサイト内のリンク先を表示してくれます。このサイトでいうと、下記画像がナビゲーション部分になります。<div>divはdivision(区別)の略です。その名の通りブロックレベルで要素を作成(divide)してくれるタグです。<p>paragraph(文)の頭文字をとって<p>となり、</p>タグ内に文章を記載することで、その文章をwebページ上に表示することができます。<p>こんにちは、今日はいい天気です。</p>と文章を<p>タグ囲ってあげることで、「こんにちは、今日はいい天気です。」がwebブラウザ上に表示されます。まとめいかがだったでしょうか。HTMLはweb制作では欠かすことのできない要素ですので、是非ともしっかりと学んで、基礎を固めておくことが大事です。HTMLの他にCSSという言語がありますが、HTMLとこのCSSの二つを使いこなすことができるようになれば、ある程度のwebページは作れるようになるはずです。Designer目指し日々奮闘中。海外や英語、Webデザインに関する情報を提供してきます。最近書いた記事Webデザイン初心者でも簡単にwebサイトが作れちゃうCMSって何!?例:WordPressCSSCSSプロパティのoverflowとは?hiddenやscrollの意味についても!HTMLブロック要素とインライン要素の違いとは?インラインブロックで解決!CSSCSSで変更できるfont(フォント)のあれこれ。HTMLの関連記事CSSプロパティのoverflowとは?hiddenやscrollの意味についても!2019年9月22日ブロック要素とインライン要素の違いとは?インラインブロックで解決!2019年9月21日CSSで変更できるfont(フォント)のあれこれ。今や世界的に流行りのジャンルといえばEDMではないでしょうか。現在のSEO対策ではコンテンツの質が検索順位を決めているといっても過言ではないくらい重要な要素です。html要素の位置を自由に決めることができるpositionプロパティとはご存知でしょうか。今回は筆者も留学の際に重宝していた「マルチ・カレンシー・キャッシュ・パスポート」について紹介したいと思います。今やインターネットはなくてはならない存在となりました。(エルヴ...xxsuguruxxオーストラリア在住。Designer目指し日々奮闘中。海外や英語、Webデザインなどに関する情報を提供してきます。6お問い合わせお問い合わせプロフィール。