コトダマウェブホームHTMLCSSBootsrtapWordPressプラグインphotoshopIllustratorJavaScriptjQueryその他サーチコンソールGoogleアナリティクスツールWordPressとデザインが学べるWebメディアmenuホームHTMLHTMLの基本構造HTML2017.08.7HTMLの基本構造ここでは、HTMLの基本的な構造についてお話させていただきます。HTMLの構造はこんな感じになっています。</body></html>上記がHTML5(現在のバージョン)のページの骨組みです。HTMLファイルでペラページを作成する際は、上記をコピペして新規のファイルを作成していけば雛形になります。複雑でややこしく感じるかもしれませんがひとつひとつを理解してしまえばそこまで難しくはありません。それでは、さっそく各要素について見ていきましょう。コンテンツの下に配置するfooter要素DOCTYPE宣言はじめはDOCTYPE宣言(ドックタイプ宣言)です。-->HTMLはすべてこの「宣言」から始まります。DOCTYPE宣言では、HTMLがどのバージョンで作成されているかを伝えます。ここでは、HTML5で作成されたことを意味する宣言を使用します。html要素ドックタイプ宣言のあとはhtml要素というHTMLの大元となる要素が入ります。--></html>単純に、<html>だけでも良いのですが、日本語のコンテンツを記述するページにする場合、言語属性lang="ja"を指定しておいた方が良いでしょう。head要素html要素の中に「頭(ヘッド)」を入れます。head要素と言われるものです。</head></html>人間の頭(脳)には、いろんな情報が入っています。同じようにhead要素は、そのページに関するいろんな情報を入れる場所だと思って下さい。この部分に記入した内容は、ブラウザからは見えません。content="width=device-width">「viewport」というのは、ページを表示させる仮想の表示領域のサイズの指定をするものです。理解するのがややこしいものではありますが、上記のコードは簡単にいうと「端末に合わせたサイズにします」という意味になります。ページをPCやスマートフォンなどの端末に合わせてレスポンシブ表示させたい場合はこのおまじないが必要になります。charset="UTF-8">という形で文字コードの指定を入れます。文字コードは「UTF-8」が推奨です。いろいろなプログラムに対応できる文字コードだからです。※文字コードがよく分からない方はコチラもご参照ください。2017.08.15文字コード(エンコード)についてブラウザからページを見たときに、全く同じに見える日本語のテキストが、実は異なる文字コードで作られているという場合があります。このページは、「UTF-8」という文字コードでテキストが表現されています。</head></html>ページタイトル<title></title>ページタイトルもhead要素の中に入れます。titleタグというものを使って入力していきます。個々に記載したタイトルは、ブラウザのタブの部分に表示されたり、そのページをブックマークしたときの名前になったりします。</head></html>今、ご覧のページのタブには「HTMLの基本構造|コトダマウェブ」という文字が途中で切れて表示されているのが見えると思います。この部分がtilteです。この部分はGoogleなどで検索したときのタイトルとして表示される部分になりますので、ここに何を入れるかは結構、重要になってきます。2017.11.09WordPress|サイトのタイトルとキャッチフレーズの設定方法WordPressをインストールしたら最初に、「設定」>「一般」のところで、「サイトのタイトル」と「キャッチフレーズ」を設定します。ここでは、「サイトのタイトル」と「キャッチフレーズ」にそれぞれどんなことを入れたら良いかについてお話します。「サイトのタ...メタディスクリプション(メタ説明文)次はメタディスクリプションというものを入れます。content="ページの説明">というのは、そのページの説明を入れる場所です。メタディスクリプションに入れた文章は、Googleなどで検索したときの説明が表示される(下の赤い枠の)部分になるところです。href="style.css">という形でページ内のレイアウトやデザインが指定してあるスタイルシートを読み込む設定をします。</head></html>「style.css」となっている部分は、あくまでサンプルなので、実際はそれぞれのページで使用しているスタイルシートへのパス(URL)を記入してください。ここまでhead要素の中身は終わったので、次からは体(body)を入れていきます。body要素bodyは英語で「体」という意味ですね。このbody要素の中に記載したものがブラウザで読み込んだときに表示される部分になります。</body></html>header要素ページ内のコンテンツの導入としての役割を持った要素です。ページの一番上に表示されるいわゆる「ヘッダー」がその代表格ですね。HTML5の定義だともっと広義な意味で「イントロダクション」的な役割をもった要素なのだそうですが、細かい定義はここでは省略します。</body></html>nav要素ヘッダーの次はnav要素です。nav要素はグローバルナビなどのメニュー関連を入れる役割があります。</body></html>「記事」を入れるarticle要素article要素は、独立した「記事」を入れる役割があります。本当は、もっとややこしい定義があって理解が難しいのですが、単純に「記事」と考えておきましょう。見出しはh1~h6までのタグで記入します。数字が小さい方が大きな見出しになります。</body></html>「見出し」と「文章」をセットでまとめるsection要素section要素は、簡単に言うと「見出し」がそれをテーマにした文章があるとしたら、これらをまるごとくくった要素です。これもややこしい定義があるのですが、ここでは簡単に「見出し」と「文章」をセットにしたものと考えましょう。「段落」のことを英語で「パラグラフ」といいますが、この頭文字をとったp要素には1つの段落を入れる役割があります。先ほど、イントロダクションの役割があるheader要素のお話をしましたが、footer要素はheader(頭)に対するfooter(足)の役割があります。ページの一番下にある著作権表記などがあるフッターが代表格になります。</body></html>以上がHTMLの基本構造でした。今回の内容はすべて覚える必要はありませんが、全体としてこんな構造になっているということが把握できれば大丈夫です。最後までお読みいただきまして、ありがとうございました。