ベクトルドロー・レベルゼロ+

ホーム > コンピュータ > webツール > BlueGriffon

ウェブページのボディ(body)を作成します

作成日 2015.01.14
最終更新日 2015.01.14

ページの基本構成


<!DOCTYPE html>
<html lang="ja">
  <head>
  </head>
  <body>
  </body>
</html>
			
ここでは、<body></body>を作成します。

他のページを確認する時のポイント

bodyでは、cssと合わせて確認していく必要があります。 ナビゲーションを実現してる方法や、クラス名の付け方に注意を払いましょう。

カラム構成

カラム構成
2カラム構成で作成します。属性とクラスの使い分けはどう判断しているのかわかりませんが、 テンプレートやサイトのコードを確認すると、ここに示したようなカラムの枠組みは、属性で作成されているので それを踏襲します。

ナビゲーション

検索エンジンやリンクからの訪問者が1ページを見ただけで帰ってしまったら、ページビューが向上せず、 その結果、検索エンジンからの評価も上がらずサイトの利用者が増加しません。 できるだけ、サイト内に滞在してもらう必要があります。

コードを入力します。

動作確認用の仮のデータを作成します。cssは、まだ作成していないのでコードを完成させても意図した表示にはなりません。 このように、基準となる、cssを作成し、コードも合わせて修正していきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <title>ページのタイトル</title>
    <meta content="ページ作成者" name="author">
    <meta content="ページの内容の説明" name="description">
    <meta content="キーワード1,キーワード2,キーワード3" name="keywords">
    <meta content="BlueGriffon wysiwyg editor" name="generator">
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all">
    <link href="/favicon.ico" rel="shortcut icon">
    <!-- アクセス解析コードなどのスクリプトはここに配置する -->
  </head>
  <body>
    <div id="container">
      <div id="banner">
        <h1>Title</h1>
      </div>
      <div id="navbar1">
        <ul id="navmenu">
          <li class="current">Menu01</li>
          <li>Menu02</li>
          <li>Menu03</li>
          <li>Menu04</li>
          <li>Menu05</li>
          <li>Menu06</li>
        </ul>
      </div>
      <div id="navbar2">
        <ul id="navmenu">
          <li class="current">Menu11</li>
          <li>Menu12</li>
          <li>Menu13</li>
          <li>Menu14</li>
          <li>Menu15</li>
          <li>Menu16</li>
        </ul>
        <p class="topicPath">Home</p>
      </div>
      <div id="content">記事本文</div>
      <div id="sidebar"> サイドバー
        <div id="sidenav">
          <ul id="navmenu">
            <li class="current">Menu31</li>
            <li>Menu32</li>
            <li>Menu33</li>
            <li>Menu34</li>
            <li>Menu35</li>
            <li>Menu36</li>
          </ul>
        </div>
      </div>
      <div id="footer"> フッター
        <hr>
        <div class="indent">
          <h3>このサイトについて</h3>
          <div class="indent"> 「掲載内容は私自身の見解であり、所属する組織を代表するものではありません 」。 </div>
        </div>
        <hr>
        <div align="center"> Copyright (C) 2011-2016 作成者 All Rights Reserved.
          <address>xxxxxx@xxxx.xxx</address>
          ご連絡の際はアドレスの@は半角にしてください。 また、お問い合わせページのURLの明記をお願いします。 </div>
        <hr> </div>
    </div>
  </body>
</html>
			

プレビュー

プレビュー画面

BlueGriffon
Copyright (C) 2011-2016 kukekko All Rights Reserved.
kukekko@gmail.com
ご連絡の際はアドレスの@は半角にしてください。 また、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません 」。
inserted by FC2 system