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

292 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

関連記事

超簡単!! Macを使ってiPhoneの画面録画をする方法

はじめに 今回はMacPCを使ってiPhoneの画面録画をする方法をご紹介します。 Window

記事を読む

GIF作成が超簡単!!「GifCam」を使ってモンストのGIFを作成

何かと便利なGIF形式の画像を簡単に作ることができるフリーソフトのご紹介。 ついでにこのサイトのメ

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

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

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

記事を読む

エンジニア・クリエーター必見の求人サイト!!レバテックキャリアとは

はじめに レバテックキャリアのスキルアップ記事の一つ、【プログラミング勉強サイト情報まとめ】に当サ

記事を読む

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

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

記事を読む

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

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

記事を読む




PAGE TOP ↑