132 views

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

関連記事

スクリーンショット_051216_100716_PM

使いやすさNo.1!! iphoneの画面を録画できるフリーソフト「Apowersoft」の録画究極ツール

先日の最新!!どれが使いやすい?iphoneで動画録画ができるアプリ5つを比較!!という記事でご紹介

記事を読む

スクリーンショット_122815_033611_PM

クライアント向けにwordpressサイトを作ったときに役立つプラグイン10選

はじめに 今回はwordpressでクライアント向けにホームページやブログ等を作ったときに入れると

記事を読む

スクリーンショット_110514_104041_AM

WordPress (stinger3)の細かなカスタマイズ~ブログタイトルや記事内hタグ~

はじめに 今回は、当ブログ表示画面の細かいカスタマイズを行ったのでそのやり方をご紹介していきます。

記事を読む

03

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

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

記事を読む

2016-07-05_14h18_37

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

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

記事を読む

スクリーンショット_102514_125258_AM

Benri500札幌~新しいSEO対策について

Benri500札幌のご紹介 google検索では「札幌 激安 10分 500円」と検索す

記事を読む

スクリーンショット_111114_020302_PM

1カラムの高級感あるデザインテンプテート

はじめに 今回は前回の2カラムとは違い、1カラムのホームページのレイアウトサンプルをご紹介いたしま

記事を読む

2016-06-28_13h34_31

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

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

記事を読む

2016-05-31_10h02_59

ウィンドウを立体化??「窓立て2」のダウンロードから初期設定

はじめに 今回はPCのデスクトップをカスタマイズする「窓立て2」のダウンロードと初期設定までをご紹

記事を読む

WIFI

家でパソコンが使えるなら携帯もパソコンの回線をつなげよう!!

WI-FI Wi-Fiとは? 簡単に言えば無線で使える回線のことです。 最近飲食店や美容室

記事を読む

名称未設定
【超初心者向け】タバコを止めたいときにまずは試したい禁煙以外の4つの手段

時代の流れと共に、現在では普通のタバコはなかなか吸える場所がなく、肩身

2017-05-02_22h48_46
【iPhone】 チャット形式でSwiftが学べるcodebelle(コードベル)がすごい!!

はじめに app storeでプログラミングが学べるゲームが特集され

2017-05-02_11h36_35
【iPhone】 トライビットロジック~ゲームで学べるプログラミング~

はじめに app storeでプログラミングが学べるゲームが特集され

名称未設定
原始竜の黒い翼「ダイナ」を徹底攻略!!有名なデッキ編成も一挙まとめ

原始竜の黒い翼「ダイナ」 この記事はモンストの原始竜の黒い翼「ダ

スクリーンショット 2017-04-11 23.34.09
超簡単!! Macを使ってiPhoneの画面録画をする方法

はじめに 今回はMacPCを使ってiPhoneの画面録画をする方法を

→もっと見る

PAGE TOP ↑