モンスト中心、映画やアニメ、DIY…興味あることをその都度発信

323 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" "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属性を使用して名前空間を指定しています

なんだかんだ言いましたがコピペで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" 

"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="札幌市,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

関連記事

YouTube動画保存の決定版!!便利すぎる「4k video downloader」の使い方

YouTube上にある動画をダウンロードするためのソフトは検索すると数多くでてきますが、いったいどれ

記事を読む

2カラム左ナビゲーションのテンプレート

はじめに 今回は、札幌市格安ホームページ製作のbabyhoodで使用しているテンプレートのご紹介を

記事を読む

Firefoxに必須の基本アドオン「FireGestures」の使い方

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

no image

mp3ファイルに画像情報(アルバムアートワーク、ジャケット画像)を追加するフリーソフト

備忘録がてらサクっと書きます。 手順1.MP3tagをダウンロード まずは以下よりMP3tagと

記事を読む

【初心者向け】デスクトップPCのメモリを増設する方法

はじめに PCの処理速度が遅くメモリ不足が原因の場合、【メモリ容量を増設しよう】と思ったときにまず

記事を読む

最新!!どれが使いやすい?iphoneで動画録画ができるアプリ5つを比較!!

はじめに 今回は、ゲームのプレイ動画だったり、なにかの説明だったりで使える「iphoneの画面

記事を読む

人気のプラグイン!!Google Analytics Dashboard for WPの使い方

Google Analytics Dashboard for WPとは? まず始めに、Google

記事を読む




PAGE TOP ↑