Monthly Archives: 4月 2012

You are browsing the site archives by month.

1カラムの簡単なページを作る 1 はじめに

とても、簡単な、上のようなページをつくります。
もちろんCSS(スタイルシート)を使い、作っていきます。

実際のページは、こちらです。

Continue Reading

1カラムの簡単なページを作る 2
ホームページビルダーの設定

最初にホームページビルダーの設定を行います。

Continue Reading

1カラムの簡単なページを作る3
ページの構造

前の記事
← ← ←1カラムの簡単なページを作る2 ホームページビルダーの設定

1カラムとは?

下の画像は、いわゆる1カラムと呼ばれる構造です。

ここでいう、カラム(column)とは、縦方向に並ぶ列のことを表す単位。段組みのことです。
1カラムなので、一列(もちろん縦)の構造ってこと! 
2カラムなら縦2列の構造になります。

まずは、1ページを作ることで、ホームページビルダーの操作や、HTMLタグ、スタイルシートなどに慣れてください。

Continue Reading

1カラムの簡単なページを作る4
CSSのリセットをする

前の記事
← ← ←1カラムの簡単なページを作る3 ページの構造

作成の手順

  1. 各ボックスのCSSを作成していきます。
    bl_1step5.gif
    ↑↑↑このボックスのスタイルを先に作ります。
  2. 文章にHTMLタグを設定し、スタイルの指定をします。

Continue Reading

1カラムの簡単なページを作る5
背景の設定

前の記事
← ← ←1カラムの簡単なページを作る4 CSSのリセットをする

背景の設定

家で言えば、庭を作って、
次に、外側の骨組みを作る手順になります。
(普通、家を建てる時は、庭は最後なんですが……例えということで、勘弁してくださいね)

Continue Reading

1カラムの簡単なページを作る6
一番外側の箱を作る

前の記事
← ← ← 1カラムの簡単なページを作る5 「背景の設定」

一番外側の大きな箱を作る

下の画像の赤い四角の箱をこれから作ります。
この中に、このページのメインである中身が、入るのです。

bl_1step_5.gif

Continue Reading

『レイアウト』タブの操作の仕方

スタイルシートマネージャの
【レイアウトタブ】使い方です。

レイアウトタブでは、
・マージン
・ボーダー
・パッディング
の設定が行えます。

Continue Reading

1カラムの簡単なページを作る 7 

前の記事
← ← ←1カラムの簡単なページを作る6 「一番外側の箱を作る」

ページの作り方について

さて、ページの作り方ですが、
人によっても、掲載する物によっても、様々なパターンがあると思います。

  1. ある程度、中身(記事)を書いてから、配置を決めて、装飾を施す。
  2. 記事を収める箱の配置を決めて、箱を作ってから、記事を書く。
  3. 展示したいもの、写真などをでーんと置いてから考える。

Continue Reading

1カラムの簡単なページを作る8
ヘッダー部分のスタイル

前の記事
← ← ←1カラムの簡単なページを作る7 「ページの作り方について」

今回は、ページの頭の部分。
ヘッダーのスタイルを作っていきます。
HPB操作画面

Continue Reading

1カラムの簡単なページを作る 9 メニューを作る

前の記事
← ← ←1カラムの簡単なページを作る8 ヘッダー部分のスタイル

次はメニューです。

このメニューは、ただ、横に文字を並べて、各々に、リンクの設定をしただけです。

横並びのメニューは、よくリストタグを使い、横に並べるのですが、
最初っからそれを作ると、多分イヤになると思います。
それで、今回は、原始的に、ただただ文字を横に並べました。

このページを作り終えたら、
各パーツごとに、もう一つ上の使い方ということで、
横並びのメニューの作りは、ご紹介しますね。

Continue Reading