[WEB制作]「HTMLの要素とタグ、属性の違い」で解説しましたが、テキストにマークアップをして意味を付加することでWebページとして機能させることが出来ます。Webページは、基本的に<html>の開始タグから始まって、</html>の終了タグで終わるという構成となっています。ソースを見ると複雑な文字が羅列されていますが、実はその構造はシンプルなものです。大まかに言うと、<html>という大きな箱の中に、<head>と<body>の2つの小さな箱が入っているだけです。ここでは、head要素とbody要素の仕組みについて解説をしていきます。head要素の構造についてhead要素に記述される内容は、大部分はコンピュータだけが読み取る情報です。Webページの中には表示されず、通常は人間が見ることが出来ません。ここに記述されている情報は、ページタイトルや重要なキーワード、簡単な概要、文字コードの種類などといったものです。head要素に入る代表的な要素は、以下の通りです。人の目に見えるのは、title要素のみですが、その他の要素もコンピュータに情報を伝えるために重要となります。meta要素meta要素は、Webページの仕様を伝える情報を記述します。それぞれの属性を使って、ページの仕様を設定していきます。charset(文字コード)author(著者名)keywords(キーワード)description(概要)上記が、meta要素で一般的に使われる属性です。いった情報を記述することで、どんなWebページなのかということをコンピュータに伝えることができます。link要素link要素は、外部ファイルとの接続を示すものです。CSSファイルやRSSファイルを、ページに関連付けるときに使われますね。以下のような記述をします。type="text/css">body要素の構造について先述したhead要素と違って、body要素に記述されている情報の多くは、人間が目にする情報となります。テキストや画像、動画など、Webページを構成するコンテンツが表示される部分です。ここに、見出しや段落、箇条書きなど、適切なタグを使ってマークアップしていきます。body要素に入る要素は、大きく2つに分けられます。それは、「ブロックレベル要素」と「インライン要素」です。それぞれに性質や役割が異なりますから、違いを理解するようにしてください。ブロックレベル要素ブロックレベル要素は、情報を一つのブロックとして扱います。ブラウザで表示すると、左右の幅いっぱいに表示されて、上下に改行が入ります。ブロックレベル要素同士は、横に並ぶことはありません。(CSSで指定した場合を除く)代表的なブロックレベル要素は、以下の通りです。h1~h6要素p要素ul,ol,li要素インライン要素インライン要素とは、文中の一部分だけに適用されます。ある単語だけをピンポイントで指定して、意味付けすることが可能です。ブロックレベル要素とは違い、左右の幅や改行が入らないために、連続して横に並べることもできます。代表的なインライン要素は、以下の通りです。a要素strong要素img要素こういった違いを理解することで、効率良くテキストをマークアップしていきましょう。初めは分かりづらいと思いますが、すぐに慣れて覚えられるはずです。関連する記事:「display:block;」「display:inline;」要素の表示状態を切り替えるCSSとは何か?使用するメリットや適用方法を紹介。機能性重視のレンタルサーバースペックの高さで選ぶ容量の大きさで選ぶマルチドメイン無制限から選ぶデータベース無制限から選ぶVPSで選ぶWordPress向けで選ぶサポートの充実度で選ぶお得なレンタルサーバーコストパフォーマンスで選ぶ料金の安さで選ぶ初期費用無料で選ぶ個人向けから選ぶ仕事で使うレンタルサーバービジネスサイト向けで選ぶアフィリエイト向けから選ぶネットショップ向けから選ぶアダルト向けから選ぶおススメのレンタルサーバーエックスサーバーロリポップヘテムルさくらのレンタルサーバーハッスルサーバーファイアバードミニバード最近の投稿ホスティングとハウジングの違いとは?レンタルサーバーの転送量制限とは何か?リンクベイト用のコンテンツで被リンクを獲得するSMO対策(ソーシャルメディア最適化)で被リンクを獲得する被リンクを集めやすいコンテンツを作る秘訣サイト内検索サバサバ倶楽部レンタルサーバーの比較や使い方を紹介するサイトです。Reserved.このページの先頭へ。