*

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

はじめに

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

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

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

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

<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="札幌市,HP製作,とか" />
<title>サイトやページのタイトル</title>
<link rel="stylesheet" type="text/css" href="sample.css" />
<script type="text/javascript" src=""></script>
</head>

・解説
1~2行目—文字エンコーディングの指定
3~4行目—基準スタイルシート言語と基準スクリプト言語の指定
5~6行目—ページの説明とキーワードを明記します。SEO対策の為しっかり書いたほうがいいです。
7行目—サイト名やページのタイトルを記述します
8行目—外部ファイルとして読み込むCSSを指定します。まずはこのままで。
9行目—外部ファイルとして読み込む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">
      Copyright© 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" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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="札幌市,HP製作,とか" />
  <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">
      Copyright© 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

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

続く

  • このエントリーをはてなブックマークに追加
  • Pocket
  • 0 follow us in feedly

関連記事

写真 2014-12-02 18 59 14

効率アップの素晴らしいキーボード

私事ですが、先日誕生日を迎えました。 この歳にもなると、自分の誕生日などさほど嬉しいものではあ

記事を読む

スクリーンショット_070115_021223_PM

コピペでできる!!サクサクっとwordpressオリジナルテーマの作成①~準備~

はじめに このブログでも姉妹ブログでも、私はwordpressを使っています。 wordpres

記事を読む

index

簡単かつ高機能!!Skitchに代わる画像注釈ソフト「Screenpresso」の使い方!!

はじめに 当サイトのようなブログ記事を書くとき、誰かに画像を使って説明したいときなどにかかせな

記事を読む

スクリーンショット_070215_105010_PM

コピペでできる!!サクサクっとwordpressオリジナルテーマの作成②~基本的な設定~

はじめに 「コピペでできる!!サクサクっとwordpressオリジナルテーマの作成」2回目ですが、

記事を読む

2016-06-28_13h34_31

今見ても面白い!!6年前にはてなブックマークしていた記事30選!!

はじめに 皆さんご存知のはてなブックマークは「オンライン上でブックマークができるサイト」 基

記事を読む

スクリーンショット_110914_025524_PM

2カラム左ナビゲーションの別バージョンサンプル

はじめに 前回に引き続き、今回もホームページのレイアウトサンプルをご紹介いたします。 前回の

記事を読む

スクリーンショット_101814_033600_AM

clibor,skitch…ブログを書くのに便利なツール厳選

ブログを書くのに便利なツール厳選 ブログ投稿に使うフリーのソフト、アプリケーションを厳選してみ

記事を読む

2016-05-23_15h01_18

[WordPress] 人気のプラグイン「TablePress」で並び替え可能なテーブル作成を可能に

はじめに 今回は当サイトに「並び替えが可能なテーブルを記事内に挿入する」ことにしたので、wordp

記事を読む

03

GIMPで簡単!!よく使われている文字加工のやり方

はじめに 今回は、ホームページのロゴ部分や、見出し部分、画像の上に掲載する文字など、少し目立った感

記事を読む

紹介チケット

美容室ロゴ・看板・名刺デザイン

美容室のロゴ・看板・名刺デザインをさせていただきました。 ロゴ 4つ提案させていただき、こち

記事を読む

e2941cce339456cc46d8e9ee35a23a7f
モンスト!!天地開闢の始神「イザナギ」を徹底攻略!!

天地開闢の始神「イザナギ」 この記事はモンストの天地開闢の始神「

2016-11-02_11h29_48
モン玉ガチャ!!排出率や当たり確率について分析してみた

新しく始まったモン玉ガチャ。今回が初開催で、今後は定期的に開催される模

2016-11-01_16h51_05
Firefoxに必須の基本アドオン「FireGestures」の使い方

Firefoxを使うならまず入れていきたい基本的なアドオンのひとつ「F

2016-07-05_14h18_37
プログラミング学習サイト!!初心者でも楽しく覚えられるProgateがすごい!!

はじめに プログラミングを勉強したいと思ったときに、まず何からしてい

2016-06-30_13h31_04
画面が狭くてやりずらいときに試してほしい、作業レベルに合わせた3つの対策

PCで作業をしていると、画面がいっぱいになってしまい作業がやりずらいこ

→もっと見る

PAGE TOP ↑