0 XHTMLとCSSを使って、固定幅で崩れないトップページのレイアウトを作る | カンカンライフ
masterAcc

XHTMLとCSSを使って、固定幅で崩れないトップページのレイアウトを作る

10年 前

はじめに

またホームページ関連の内容になりますが、まずは前回までのおさらい。
先日こちらのブログにて、ホームページの構造の超基礎開設を行い、タグについてはこちらのブログで簡単にご紹介しました。
今回は、XHTMLとCSSを使った、実践的なホームページの作り方という点で書いていきたいと思います。

CSSとは？

いきなり出てきたCSSという言葉ですが、これはCascading Style Sheets（カスケーティング・スタイル・シート）の略で、簡単に言うとWEBページのスタイルを装飾するというもの。
HTMLファイルで定義した情報を、外部ファイルであるCSSを読み込ませることで様々なレイアウトやスタイルを表示させるのです。
では実際にホームページのメインとなる、トップページのレイアウトの作り方をご紹介していきます。
ちなりに今回は、表示したときのディスプレイの大きさ、ウィンドウの大きさに左右されず、レイアウトが崩れることのない固定幅でのページ作成で書いていきます。

XHTMLの記述

ドキュメントタイプの宣言

まず、こないだの内容を元に白紙のhtmlファイルを用意します。
そして<!DOCTYPE>～ドキュメントタイプ～にHTMLのバージョンを宣言するのですが、まずは以下のようにコピペしてみましょう。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

これは、文字コードが「UTF-8」で、「XHTML 1.0 Transitional」の「Transitional （移行型）」で記述するという宣言、さらにxmlns属性を使用して名前空間を指定しています

なんだかんだ言いましたがコピペでＯＫです。

<head>部分の記述

続いて<head>内の記述ですが、ここではその文章に関する様々な情報を記述していきます。
これもまずは以下の内容をコピペしてみましょう。

<head>
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="XHTMLでのサイト作り,とかそんな説明をここに記述" />
<meta name="keywords" content="札幌市,ＨＰ製作,とか" />
<title>サイトやページのタイトル</title>
<link rel="stylesheet" type="text/css" href="sample.css" />
<script type="text/javascript" src=""></script>
</head>

・解説
１～２行目—文字エンコーディングの指定
３～４行目—基準スタイルシート言語と基準スクリプト言語の指定
５～６行目—ページの説明とキーワードを明記します。SEO対策の為しっかり書いたほうがいいです。
７行目—サイト名やページのタイトルを記述します
８行目—外部ファイルとして読み込むCSSを指定します。まずはこのままで。
９行目—外部ファイルとして読み込むjavascriptを指定します。まずはこのままで。

<body>部分の記述

続いてbody部分ですが、これも簡易的にこちらで用意したものを以下に記載しますのでコピペしましょう。

<body>
  <div id="header">
    <div id="header_rogo">
      ロゴ部分
    </div>  
    <div id="header_navi">
      ヘッダーナビゲーション<br>
    </div>
    <div id="header_tel">
    ヘッダーテル
    </div>
  </div>

  <div id="navimenu">
    <div class="menu">
      あああ
    </div>
    <div class="menu">
      あああ
    </div>
    <div class="menu">
      あああ
    </div>
    <div class="menu">
      あああ
    </div>
  </div>

  <div id="main">
      メインコンテンツ
  </div>

  <div id="footer">
       ﾌｯﾀｰ<br>
       ﾌｯﾀｰ<br>
       ﾌｯﾀｰ<br>
    <div class="copyright">
      Copyrightc cssレイアウトサンプル , 2014 All Rights Reserved.
    </div>
  </div>

</body>

以上を貼り付けると、HTMLファイル全体は以下の様になると思います。

<head>、<body>を組み合わせると

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
  <meta http-equiv="Content-Language" content="ja" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <meta name="description" content="XHTMLでのサイト作り,とかそんな説明をここに

記述" />
  <meta name="keywords" content="札幌市,ＨＰ製作,とか" />
  <title>サイトやページのタイトル</title>
  <link rel="stylesheet" type="text/css" href="sample.css" />
  <script type="text/javascript" src=""></script>
</head>

<body>
  <div id="header">
    <div id="header_rogo">
      ロゴ部分
    </div>  
    <div id="header_navi">
      ヘッダーナビゲーション<br>
    </div>
    <div id="header_tel">
    ヘッダーテル
    </div>
  </div>

  <div id="navimenu">
    <div class="menu">
      あああ
    </div>
    <div class="menu">
      あああ
    </div>
    <div class="menu">
      あああ
    </div>
    <div class="menu">
      あああ
    </div>
  </div>

  <div id="main">
      メインコンテンツ
  </div>

  <div id="footer">
       ﾌｯﾀｰ<br>
       ﾌｯﾀｰ<br>
       ﾌｯﾀｰ<br>
    <div class="copyright">
      Copyrightc cssレイアウトサンプル , 2014 All Rights Reserved.
    </div>
  </div>

</body>

CSSの記述

上記のHTMLファイルの中で「id」や「class」といった記述があると思いますが、この名前が付いた要素をCSSで装飾します。
要素にCSSを読み込ませるといったほうがわかりやすいでしょうか。
しっくりくるほうで覚えてください。
では以下にサンプルのCSSを記載しますので、再びコピペし、先ほどとは別に新しいテキストファイルにペースト。
テキストの拡張子を「.css」に変更して保存します。

サンプルCSSの記述

@charset "UTF-8";


/* =====ベース===== */
html {
   overflow-y:scroll;
}

body {
   margin:0 auto;
   line-height:1.0;
   letter-spacing:1px;
   font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
   font-size:12px;
   color:#000;
   background-color:#fff;
}


br {
   letter-spacing:normal;
}

a {
   color:#fa8072;
   text-decoration:underline;
}

a:hover {
   color:#87CEFA;
   text-decoration:underline;
}

img {
   border:0;
   vertical-align:bottom;
}

h1,h2,h3,h4,h5,h6 {
   margin:0;
}

p {
   font-size: 12px;
}

/* =====ベースend===== */



/* =====レイアウト===== */

*{
    margin:0;
    padding:0;
    border:0;
}
#bg {
    z-index: -1;
    position:fixed;
}


/* =====ヘッダーレイアウト===== */
#header{
   margin: auto;
   width: 800px;
   height: 100px;
   text-align: left; 
   margin-top: 10px;
   margin-bottom: 5px;
   padding: 5px;
   background-color: #F0FFFF;
}

#header_rogo {
   float: left;
   width: 250px;
   height: 80px;
   margin: 5px;
   padding: 5px;
   background-color: #F4A460;
}

#header_navi {
   float: right;
   text-align: right;
   width: 300px;
   height: 15px;
   margin: 5px;
   padding: 5px;
   background-color: #F4A460;
}

#header_tel {
   float: right;
   text-align: right;
   width: 300px;
   height: 40px;
   margin-top: 10px;
   margin-right: 5px;
   padding: 5px;
   background-color: #F4A460;
}

#navimenu{
   margin:0 auto;
   clear: both;
   width: 800px;
   height: 15px;
   padding: 5px;
   background-color: #F0FFFF;
}

#navimenu .menu {
   text-align: center;
   font-size: 15px;
   color: #000;  
   text-shadow: 2px 2px 1px #999;
   float: left;
   width: 196px;
   border-right: 1px solid #87CEFA;
   border-left: 1px solid #87CEFA;
}

#main {
   margin:5px auto 5px auto;
   clear: both;
   width: 790px;
   height: 600px;
   padding: 10px;
   background-color: #FDF5E6;
}

#footer {
   margin: 0 auto;
   width: 800px;
   padding: 5px;
   background-color: #FFFACD;
}

#footer .copyright {
   text-align: center;
}

とりあえずいじらず、このままで保存してください。

WEBサイトのレイアウトが完成

以上で、html文章をブラウザで開いてみてください。
CSSを読み込めるとこのように表示されると思います。

スクリーンショット_102814_094432_PM

なんの特徴もない１カラムのレイアウトですが、これをベースに次回からバリエーションやコンテンツ内部の装飾をしていきたいと思います。

続く

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次の投稿

2014年版 iPhone買ったらとりあえず入れとけっていうアプリまとめ～vol.1～

火 11月 4 , 2014
始めに たまにはライフハック系の内容をと思い、iP […]

おすすめ